Free tutorials & notes in Hindi & English · Clean code examples 🧰 Free PDF & Image Tools →
📱 Android App (Kotlin + XML)  ·  Lesson 14

Beautiful Theme: Colors, Fonts & Styles

The colour palette

A good shop app uses one strong brand colour, one accent for "buy" buttons, and fixed colours that always mean the same thing (green = savings, red = sale/error). Everything else is calm greys.

NameLightUsed for
brand#4F46E5toolbar, primary buttons, selected tab, links
brand_dark#3730A3status bar, gradient end
brand_light#EEF2FFchips, tonal buttons, coupon card
accent#F97316"Buy now", "Checkout", "Place order", avatar
success / rating#16A34A% off, rating badge, "In stock", savings
sale#DC2626errors, cart badge, "Only 3 left!", remove
background#F5F6FAscreen background (cards stand out on it)
text_primary#1F2937titles and prices
text_secondary#6B7280MRP, hints, small labels
9:41▮▮ 85%☰KartEasy⋮🔍 Search for productsMobilesFashionBooks⌚Smart Watch₹1,899🎧Earbuds X2₹1,099Buy now🏠Home🗂️Categories♡Wishlist🛒Cart👤Account9:41▮▮ 85%☰KartEasy (dark)⋮🔍 Search for productsMobilesFashionBooks⌚Smart Watch₹1,899🎧Earbuds X2₹1,099Buy now🏠Home🗂️Categories♡Wishlist🛒Cart👤Account
Light theme and the lighter brand colour used in dark mode

Step 1: colors.xml + dark mode

We give colours meaning names (text_secondary, not grey_500). Then dark mode is just a second file with the same names and different values — no layout changes.

XML – res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Brand -->
    <color name="brand">#4F46E5</color>
    <color name="brand_dark">#3730A3</color>
    <color name="brand_light">#EEF2FF</color>
    <color name="accent">#F97316</color>
    <color name="on_brand">#FFFFFF</color>

    <!-- Surfaces and text (overridden in values-night) -->
    <color name="background">#F5F6FA</color>
    <color name="surface">#FFFFFF</color>
    <color name="text_primary">#1F2937</color>
    <color name="text_secondary">#6B7280</color>
    <color name="divider">#E5E7EB</color>
    <color name="placeholder">#EEF0F4</color>

    <!-- Meaning colours -->
    <color name="sale">#DC2626</color>
    <color name="success">#16A34A</color>
    <color name="rating">#16A34A</color>
    <color name="status_placed">#D97706</color>
    <color name="status_confirmed">#2563EB</color>
    <color name="status_shipped">#7C3AED</color>
    <color name="offline">#374151</color>
</resources>
XML – res/values-night/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="brand">#818CF8</color>
    <color name="brand_dark">#6366F1</color>
    <color name="brand_light">#272A4A</color>
    <color name="on_brand">#0F1020</color>
    <color name="background">#111318</color>
    <color name="surface">#1C1F26</color>
    <color name="text_primary">#F3F4F6</color>
    <color name="text_secondary">#9CA3AF</color>
    <color name="divider">#2D313B</color>
    <color name="placeholder">#262A33</color>
    <color name="sale">#F87171</color>
    <color name="success">#4ADE80</color>
    <color name="rating">#16A34A</color>
</resources>

Step 2: themes.xml

The app theme extends Theme.Material3.DayNight.NoActionBar (we add our own MaterialToolbar) and maps our colours to Material roles like colorPrimary and colorSurface. Default styles for cards, buttons and text fields are set once here, so layouts stay short. The splash theme is covered in the next lesson.

XML – res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.KartEasy" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/brand</item>
        <item name="colorOnPrimary">@color/on_brand</item>
        <item name="colorPrimaryContainer">@color/brand_light</item>
        <item name="colorOnPrimaryContainer">@color/brand_dark</item>
        <item name="colorSecondary">@color/accent</item>
        <item name="colorOnSecondary">@android:color/white</item>
        <item name="colorError">@color/sale</item>
        <item name="android:colorBackground">@color/background</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorOnSurface">@color/text_primary</item>
        <item name="colorOnSurfaceVariant">@color/text_secondary</item>
        <item name="colorOutline">@color/divider</item>
        <item name="android:statusBarColor">@color/brand_dark</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="materialCardViewStyle">@style/Widget.KartEasy.Card</item>
        <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.OutlinedBox</item>
        <item name="materialButtonStyle">@style/Widget.KartEasy.Button</item>
        <item name="chipStyle">@style/Widget.Material3.Chip.Filter</item>
    </style>

    <!-- Shown by the core-splashscreen library while the app starts -->
    <style name="Theme.KartEasy.Splash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/brand</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash</item>
        <item name="postSplashScreenTheme">@style/Theme.KartEasy</item>
    </style>

    <style name="Widget.KartEasy.Card" parent="Widget.Material3.CardView.Elevated">
        <item name="cardBackgroundColor">@color/surface</item>
        <item name="cardCornerRadius">14dp</item>
        <item name="cardElevation">1dp</item>
    </style>

    <style name="Widget.KartEasy.Button" parent="Widget.Material3.Button">
        <item name="android:minHeight">52dp</item>
        <item name="cornerRadius">12dp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="Widget.KartEasy.Button.Outlined" parent="Widget.Material3.Button.OutlinedButton">
        <item name="android:minHeight">52dp</item>
        <item name="cornerRadius">12dp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textStyle">bold</item>
    </style>

    <!-- Small round − / + buttons -->
    <style name="Widget.KartEasy.QtyButton" parent="Widget.Material3.Button.OutlinedButton">
        <item name="android:minWidth">40dp</item>
        <item name="android:minHeight">40dp</item>
        <item name="android:padding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="cornerRadius">20dp</item>
        <item name="android:textSize">18sp</item>
    </style>

    <style name="TextAppearance.KartEasy.Section" parent="TextAppearance.Material3.TitleMedium">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/text_primary</item>
    </style>

    <style name="TextAppearance.KartEasy.Price" parent="TextAppearance.Material3.TitleMedium">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/text_primary</item>
    </style>
</resources>

Step 3: reusable styles

When the same group of attributes appears again and again (section headers, "See all" links, price rows), we move it into a style. A layout then needs one line: style="@style/KartEasy.SeeAll".

XML – res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Small reusable styles for layouts (keeps the XML short) -->
<resources>
    <style name="KartEasy.SectionHeader">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingStart">16dp</item>
        <item name="android:paddingEnd">8dp</item>
        <item name="android:layout_marginTop">20dp</item>
        <item name="android:layout_marginBottom">8dp</item>
    </style>

    <style name="KartEasy.SectionTitle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textAppearance">@style/TextAppearance.KartEasy.Section</item>
    </style>

    <style name="KartEasy.SeeAll">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
        <item name="android:padding">8dp</item>
        <item name="android:text">@string/see_all</item>
        <item name="android:textColor">@color/brand</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="KartEasy.HorizontalRow">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:clipToPadding">false</item>
        <item name="android:paddingStart">8dp</item>
        <item name="android:paddingEnd">8dp</item>
    </style>

    <!-- A tappable row in the Account screen: icon, text, arrow -->
    <style name="KartEasy.MenuRow">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">56dp</item>
        <item name="android:background">?attr/selectableItemBackground</item>
        <item name="android:drawablePadding">16dp</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingStart">16dp</item>
        <item name="android:paddingEnd">16dp</item>
        <item name="android:textAppearance">?attr/textAppearanceBodyLarge</item>
        <item name="android:textColor">@color/text_primary</item>
        <item name="drawableTint">@color/brand</item>
        <item name="drawableEndCompat">@drawable/ic_chevron_right</item>
    </style>

    <!-- Label / value rows in the price summary -->
    <style name="KartEasy.SummaryLabel">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textColor">@color/text_secondary</item>
    </style>

    <style name="KartEasy.SummaryValue">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/text_primary</item>
    </style>

    <style name="KartEasy.SummaryRow">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:paddingTop">6dp</item>
        <item name="android:paddingBottom">6dp</item>
    </style>

    <style name="KartEasy.CardTitle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">8dp</item>
        <item name="android:textAppearance">@style/TextAppearance.KartEasy.Section</item>
    </style>

    <style name="ShapeAppearance.KartEasy.Circle" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

    <style name="ShapeAppearance.KartEasy.Top" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">14dp</item>
        <item name="cornerSizeTopRight">14dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.KartEasy.Rounded" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!-- Account screen counters -->
    <style name="KartEasy.Stat">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">?attr/selectableItemBackground</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">vertical</item>
    </style>

    <style name="KartEasy.StatNumber">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/brand</item>
        <item name="android:textSize">22sp</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="KartEasy.StatLabel">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/text_secondary</item>
        <item name="android:textSize">13sp</item>
    </style>
</resources>

Step 4: shape drawables

Rounded badges, the search bar, gradients and borders are tiny XML drawables — no PNG images, so they are sharp on every screen and change colour with the theme.

XML – drawable/bg_discount_badge.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Small green "40% off" label -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/success" />
    <corners android:radius="6dp" />
</shape>
XML – drawable/bg_search_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/surface" />
    <corners android:radius="12dp" />
    <stroke android:width="1dp" android:color="@color/divider" />
</shape>
XML – drawable/bg_header_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Purple gradient behind the account header and the drawer header -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:angle="315"
        android:endColor="@color/brand_dark"
        android:startColor="@color/brand" />
</shape>
XML – drawable/bg_bottom_bar.xml (top border with layer-list)
<?xml version="1.0" encoding="utf-8"?>
<!-- Top border line for the fixed bottom bars -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/divider" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/surface" />
        </shape>
    </item>
</layer-list>
XML – drawable/bg_offer_card.xml (dashed coupon border)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/brand_light" />
    <corners android:radius="12dp" />
    <stroke android:width="1dp" android:color="@color/brand" android:dashWidth="6dp" android:dashGap="4dp" />
</shape>
XML – color/nav_item_color.xml (selector)
<?xml version="1.0" encoding="utf-8"?>
<!-- Bottom navigation: brand colour for the selected tab, grey for the rest -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/brand" android:state_checked="true" />
    <item android:color="@color/text_secondary" />
</selector>

All 33 ic_… files are vector drawables: Material icons (24 × 24) plus the launcher and splash icons. The filled heart has its own red colour; the others take the theme tint:

XML – drawable/ic_heart.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#E11D48"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

Step 5: the product card

9:41▮▮ 85%←Top deals⋮⌚62% off ♡Smart Watch Pro🎧63% off ♡Earbuds X2Card = image (top-rounded) + % offbadge + heartname (2 lines) · 4.5★ (128) ·₹1,899 ₹4,999 · (+)
Every product card in the app uses item_product.xml

One card layout serves home rows, grids, search and the wishlist. The image uses ShapeableImageView with only the top corners rounded; the name always takes exactly 2 lines so cards in a grid line up.

XML – layout/item_product.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Product card used everywhere (home rows, grids, wishlist) -->
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/card_gap"
    android:clickable="true"
    android:focusable="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:contentDescription="@string/product_image"
                android:scaleType="centerCrop"
                app:shapeAppearanceOverlay="@style/ShapeAppearance.KartEasy.Top" />

            <TextView
                android:id="@+id/discount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:background="@drawable/bg_discount_badge"
                android:paddingStart="6dp"
                android:paddingTop="2dp"
                android:paddingEnd="6dp"
                android:paddingBottom="2dp"
                android:textColor="@android:color/white"
                android:textSize="11sp"
                android:textStyle="bold"
                tools:text="62% off" />

            <ImageButton
                android:id="@+id/wishlist"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="end"
                android:layout_margin="4dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:contentDescription="@string/add_to_wishlist"
                android:src="@drawable/ic_heart_outline" />

            <TextView
                android:id="@+id/out_of_stock"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="#99000000"
                android:gravity="center"
                android:padding="4dp"
                android:text="@string/out_of_stock"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:visibility="gone" />
        </FrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="2"
                android:textColor="@color/text_primary"
                android:textSize="14sp"
                tools:text="Smart Watch Pro" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/rating"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bg_rating"
                    android:drawablePadding="2dp"
                    android:paddingStart="6dp"
                    android:paddingEnd="6dp"
                    android:textColor="@android:color/white"
                    android:textSize="11sp"
                    android:textStyle="bold"
                    app:drawableEndCompat="@drawable/ic_star_small"
                    tools:text="4.5" />

                <TextView
                    android:id="@+id/rating_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="6dp"
                    android:textColor="@color/text_secondary"
                    android:textSize="12sp"
                    tools:text="(128)" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/price"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="@style/TextAppearance.KartEasy.Price"
                        tools:text="₹1,899" />

                    <TextView
                        android:id="@+id/mrp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/text_secondary"
                        android:textSize="12sp"
                        tools:text="₹4,999" />
                </LinearLayout>

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/add_button"
                    style="@style/Widget.Material3.Button.TonalButton.Icon"
                    android:layout_width="44dp"
                    android:layout_height="44dp"
                    android:contentDescription="@string/add_to_cart"
                    android:insetTop="0dp"
                    android:insetBottom="0dp"
                    android:padding="0dp"
                    app:cornerRadius="22dp"
                    app:icon="@drawable/ic_add"
                    app:iconGravity="textStart"
                    app:iconPadding="0dp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Step 6: tablets and dimensions

Android picks values-sw600dp/ on screens at least 600dp wide (tablets, foldables). There we ask for 4 product columns and a taller banner. The Kotlin code reads resources.getInteger(R.integer.product_columns).

XML – values/integers.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="product_columns">2</integer>
    <integer name="category_columns">3</integer>
</resources>
XML – values-sw600dp/integers.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Tablets (smallest width 600dp+): more columns -->
<resources>
    <integer name="product_columns">4</integer>
    <integer name="category_columns">5</integer>
</resources>
XML – values/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="screen_padding">16dp</dimen>
    <dimen name="card_gap">8dp</dimen>
    <dimen name="bottom_bar_height">72dp</dimen>
    <dimen name="banner_height">160dp</dimen>
</resources>
XML – values-sw600dp/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="banner_height">280dp</dimen>
</resources>

Step 7: strings.xml

Every text of the app, grouped by screen, including plurals and format arguments. To translate KartEasy to Hindi, copy this file to values-hi/strings.xml and translate the values.

XML – res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- app_name is created in app/build.gradle.kts (resValue) so debug and release can differ -->

    <!-- Common -->
    <string name="ok">OK</string>
    <string name="cancel">Cancel</string>
    <string name="retry">Try again</string>
    <string name="next">Next</string>
    <string name="skip">Skip</string>
    <string name="get_started">Get started</string>
    <string name="save">Save</string>
    <string name="delete">Delete</string>
    <string name="submit">Submit</string>
    <string name="undo">Undo</string>
    <string name="no">No</string>
    <string name="free">FREE</string>
    <string name="see_all">See all</string>
    <string name="offline_banner">You are offline. Showing saved data.</string>

    <!-- Navigation -->
    <string name="nav_home">Home</string>
    <string name="nav_categories">Categories</string>
    <string name="nav_wishlist">Wishlist</string>
    <string name="nav_cart">Cart</string>
    <string name="nav_account">Account</string>
    <string name="nav_orders">My orders</string>
    <string name="nav_addresses">Saved addresses</string>
    <string name="open_drawer">Open menu</string>
    <string name="close_drawer">Close menu</string>
    <string name="share_app">Share app</string>
    <string name="share_text">I shop on KartEasy. Great deals every day! https://codingeasily.in/tutorial/android-ecommerce/</string>
    <string name="help">Help &amp; support</string>
    <string name="help_title">Help &amp; support</string>
    <string name="help_message">Questions about an order? Write to support@karteasy.in with your order number.\n\nKartEasy is a demo store built in the CodingEasily Android e-commerce tutorial.</string>
    <string name="logout">Logout</string>
    <string name="logout_confirm">Do you want to logout from KartEasy?</string>
    <string name="drawer_section_more">More</string>

    <!-- Screen titles -->
    <string name="title_products">Products</string>
    <string name="title_product">Product</string>
    <string name="title_checkout">Checkout</string>
    <string name="title_order_placed">Order placed</string>
    <string name="title_order_detail">Order details</string>
    <string name="title_edit_profile">Edit profile</string>
    <string name="title_address_edit">Address</string>

    <!-- Onboarding -->
    <string name="onboard_title_1">Everything you need</string>
    <string name="onboard_text_1">Mobiles, fashion, electronics, books and more in one simple app.</string>
    <string name="onboard_title_2">Daily deals &amp; coupons</string>
    <string name="onboard_text_2">Big discounts, coupon codes and free delivery on orders above ₹499.</string>
    <string name="onboard_title_3">Fast doorstep delivery</string>
    <string name="onboard_text_3">Pay cash on delivery and track every order from placed to delivered.</string>

    <!-- Auth -->
    <string name="welcome_back">Welcome back!</string>
    <string name="login_subtitle">Login to continue shopping</string>
    <string name="create_account">Create account</string>
    <string name="register_subtitle">Sign up in less than a minute</string>
    <string name="email">Email</string>
    <string name="password">Password</string>
    <string name="confirm_password">Confirm password</string>
    <string name="full_name">Full name</string>
    <string name="mobile">Mobile number</string>
    <string name="mobile_optional">Mobile number (optional)</string>
    <string name="login">Login</string>
    <string name="sign_up">Sign up</string>
    <string name="no_account">New to KartEasy? Create an account</string>
    <string name="have_account">Already have an account? Login</string>
    <string name="use_demo">Use demo account</string>
    <string name="demo_email">test@karteasy.in</string>
    <string name="demo_password">Test@123</string>
    <string name="accept_terms">I agree to the Terms of Use and Privacy Policy</string>
    <string name="err_email">Enter a valid email address</string>
    <string name="err_password">Password must be at least 6 characters</string>
    <string name="err_password_match">Passwords do not match</string>
    <string name="err_name">Enter your name (2 to 80 characters)</string>
    <string name="err_phone">Enter a valid 10-digit mobile number</string>
    <string name="err_terms">Please accept the terms to continue</string>
    <string name="err_current_password">Enter your current password to set a new one</string>

    <!-- Home -->
    <string name="search_hint">Search for products</string>
    <string name="shop_by_category">Shop by category</string>
    <string name="featured">Featured for you</string>
    <string name="top_deals">Top deals</string>
    <string name="new_arrivals">New arrivals</string>

    <!-- Product list -->
    <string name="sort_newest">Newest</string>
    <string name="sort_popular">Popular</string>
    <string name="sort_price_low">Price: low to high</string>
    <string name="sort_price_high">Price: high to low</string>
    <string name="sort_rating">Top rated</string>
    <string name="sort_discount">Biggest discount</string>
    <string name="filter">Filter</string>
    <string name="filter_on">Filter (on)</string>
    <string name="filter_title">Filter by price</string>
    <string name="reset">Reset</string>
    <string name="apply">Apply</string>
    <string name="price_any">Any</string>
    <string name="price_range">%1$s – %2$s</string>
    <string name="no_products">No products found. Try another search or filter.</string>

    <!-- Product card + detail -->
    <string name="percent_off">%d%% off</string>
    <string name="rating_count">(%d)</string>
    <string name="rating_value">%.1f ★</string>
    <string name="ratings_reviews">%d ratings</string>
    <string name="add">Add</string>
    <string name="add_to_cart">Add to cart</string>
    <string name="buy_now">Buy now</string>
    <string name="add_to_wishlist">Add to wishlist</string>
    <string name="remove_from_wishlist">Remove from wishlist</string>
    <string name="share">Share</string>
    <string name="in_stock">In stock</string>
    <string name="out_of_stock">Out of stock</string>
    <string name="only_left">Hurry, only %d left!</string>
    <string name="already_in_cart">%d already in your cart</string>
    <string name="quantity">Quantity</string>
    <string name="decrease">Decrease quantity</string>
    <string name="increase">Increase quantity</string>
    <string name="product_details">Product details</string>
    <string name="read_more">Read more</string>
    <string name="read_less">Show less</string>
    <string name="reviews_title">Ratings &amp; reviews (%d)</string>
    <string name="no_reviews">No reviews yet. Buy it and be the first to review!</string>
    <string name="similar_products">Similar products</string>
    <string name="free_delivery_note">Free delivery on orders above ₹499 · Cash on delivery</string>
    <string name="share_product">Check out %1$s for just %2$s on KartEasy!</string>
    <string name="product_image">Product image</string>

    <!-- Cart -->
    <string name="cart_empty">Your cart is empty.\nAdd something you love!</string>
    <string name="start_shopping">Start shopping</string>
    <string name="line_total">Total: %s</string>
    <string name="remove">Remove</string>
    <string name="save_for_later">Save for later</string>
    <string name="removed_item">%s removed</string>
    <string name="free_delivery_left">Add %s more for FREE delivery</string>
    <string name="free_delivery_unlocked">🎉 You get FREE delivery on this order</string>
    <string name="checkout">Checkout</string>
    <string name="price_details">Price details</string>
    <string name="total_amount">Total amount</string>
    <string name="product_discount">Product discount</string>
    <string name="delivery_charges">Delivery charges</string>
    <string name="minus_amount">− %s</string>
    <string name="coupon_label">Coupon (%s)</string>
    <string name="you_save">You save %s on this order</string>

    <!-- Wishlist -->
    <string name="wishlist_empty">Your wishlist is empty.\nTap ♡ on any product to save it.</string>

    <!-- Checkout -->
    <string name="deliver_to">Deliver to</string>
    <string name="change">Change</string>
    <string name="add_delivery_address">+ Add delivery address</string>
    <string name="apply_coupon">Apply coupon</string>
    <string name="coupon_code">Coupon code</string>
    <string name="coupon_applied">%1$s applied · you save %2$s</string>
    <string name="coupon_chip">%1$s · %2$s</string>
    <string name="payment_method">Payment method</string>
    <string name="cash_on_delivery">Cash on delivery</string>
    <string name="cod_note">Pay by cash or UPI when the order arrives.</string>
    <string name="place_order">Place order</string>
    <string name="placing_order">Placing order…</string>

    <!-- Addresses -->
    <string name="add_address">Add address</string>
    <string name="edit_address">Edit address</string>
    <string name="delete_address">Delete this address?</string>
    <string name="no_addresses">No saved addresses yet.\nTap + to add one.</string>
    <string name="deliver_here">Deliver here</string>
    <string name="edit">Edit</string>
    <string name="default_label">Default</string>
    <string name="make_default">Make this my default address</string>
    <string name="address_line1">House no, building, street</string>
    <string name="address_line2">Area, landmark (optional)</string>
    <string name="city">City</string>
    <string name="state">State</string>
    <string name="pincode">Pincode</string>
    <string name="save_address">Save address</string>
    <string name="name_phone">%1$s · %2$s</string>
    <string name="err_address">Enter the full address</string>
    <string name="err_required">This field is required</string>
    <string name="err_pincode">Enter a valid 6-digit pincode</string>

    <!-- Orders -->
    <string name="order_placed_title">Order placed successfully!</string>
    <string name="order_placed_text">Thank you for shopping with KartEasy. We will deliver your order soon.</string>
    <string name="order_no">Order #%s</string>
    <string name="amount_to_pay">Amount to pay on delivery: %s</string>
    <string name="track_order">Track order</string>
    <string name="continue_shopping">Continue shopping</string>
    <string name="no_orders">You have not placed any orders yet.</string>
    <string name="placed_on">Placed on %s</string>
    <string name="order_status">Order status</string>
    <string name="order_cancelled_note">This order was cancelled. Any amount paid will be refunded.</string>
    <string name="items_title">Items</string>
    <string name="shipping_address">Shipping address</string>
    <string name="payment">Payment</string>
    <string name="payment_cod">Cash on delivery</string>
    <string name="subtotal">Subtotal</string>
    <string name="qty_price">Qty %1$d × %2$s</string>
    <string name="cancel_order">Cancel order</string>
    <string name="cancel_order_confirm">Are you sure you want to cancel this order?</string>
    <string name="yes_cancel">Yes, cancel</string>
    <string name="rate">Rate</string>
    <string name="rate_product">Rate this product</string>
    <string name="review_hint">Write a review (optional)</string>
    <string name="err_rating">Please choose at least 1 star</string>

    <!-- Account -->
    <string name="orders">Orders</string>
    <string name="wishlist">Wishlist</string>
    <string name="cart">Cart</string>
    <string name="add_phone">Add mobile number</string>
    <string name="theme">Theme</string>
    <string name="theme_system">System</string>
    <string name="theme_light">Light</string>
    <string name="theme_dark">Dark</string>
    <string name="version_text">KartEasy v%s · Made with CodingEasily</string>
    <string name="change_password">Change password (optional)</string>
    <string name="current_password">Current password</string>
    <string name="new_password">New password</string>
    <string name="email_locked">Email cannot be changed</string>

    <!-- Notifications -->
    <string name="channel_orders">Order updates</string>
    <string name="channel_orders_desc">Order placed, shipped and delivered alerts</string>
    <string name="notif_order_title">Order placed 🎉</string>
    <string name="notif_order_text">Your order %1$s of %2$s has been placed. Tap to track it.</string>

    <plurals name="products_count">
        <item quantity="one">%d product</item>
        <item quantity="other">%d products</item>
    </plurals>
    <plurals name="results_count">
        <item quantity="one">%d result</item>
        <item quantity="other">%d results</item>
    </plurals>
    <plurals name="price_items">
        <item quantity="one">Price (%d item)</item>
        <item quantity="other">Price (%d items)</item>
    </plurals>
    <plurals name="items_in_order">
        <item quantity="one">%d item in this order</item>
        <item quantity="other">%d items in this order</item>
    </plurals>
    <plurals name="items_count">
        <item quantity="one">%d item</item>
        <item quantity="other">%d items</item>
    </plurals>
</resources>

Design tips that make apps look premium

  • Light grey background + white cards with 14dp corners and 1dp elevation.
  • One primary action per screen in the accent colour (Buy now, Checkout, Place order).
  • Prices bold and dark, MRP small and struck through, discount in green.
  • Buttons at least 48–52dp tall; touch targets never smaller than 40dp.
  • Consistent 8dp / 12dp / 16dp spacing — never random numbers.
  • Real images on a soft background (our sample images use a light gradient).

Frequently Asked Questions

How do I change the brand colour of the whole app?
Change brand, brand_dark and brand_light in values/colors.xml (and the night versions). Buttons, toolbar, chips, badges and the splash all read these colours, so one edit changes everything.
Why put text in strings.xml instead of the layout?
It allows translation (values-hi/strings.xml), plurals ("1 item" / "3 items") and formatted values ("%1$s · %2$s") — and Android Studio warns about hard-coded text for a reason.
← E-commerce App Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

Next topicSplash & Onboarding Screens Your progress: 14 / 28 (50%) · Lesson 15 / 28 Continue →

How was this lesson?

Your feedback helps us make the content better.

Write a review or suggestion (optional)

After approval, your name and city may appear publicly with your review. Please do not write your email or phone number.

▶ CodingEasily on YouTube

Learn with video lessons in easy Hindi

Featured video: RDBMS Part 3 – Class XI Commerce IT

▶ Subscribe – it’s free