Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
📱 Android App (Kotlin + XML)  ·  Lesson 14

सुंदर Theme: Colors, Fonts और Styles

Colour palette

अच्छी shop app एक strong brand colour, "buy" buttons के लिए एक accent, और हमेशा एक ही मतलब वाले fixed colours (green = बचत, red = sale/error) use करती है। बाकी सब शांत greys।

NameLightकहाँ use
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", बचत
sale#DC2626errors, cart badge, "Only 3 left!", remove
background#F5F6FAscreen background (cards उस पर उभरते हैं)
text_primary#1F2937titles और prices
text_secondary#6B7280MRP, hints, छोटे 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 और dark mode में use होने वाला हल्का brand colour

Step 1: colors.xml + dark mode

हम colours को मतलब वाले नाम देते हैं (text_secondary, grey_500 नहीं)। तब dark mode बस वही names और अलग values वाली दूसरी file है — layout में कोई बदलाव नहीं।

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

App theme Theme.Material3.DayNight.NoActionBar extend करती है (हम अपना MaterialToolbar लगाते हैं) और हमारे colours को colorPrimary, colorSurface जैसे Material roles से जोड़ती है। Cards, buttons और text fields के default styles यहीं एक बार set होते हैं, जिससे layouts छोटे रहते हैं। Splash theme अगले 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

जब attributes का एक ही group बार-बार आए (section headers, "See all" links, price rows), हम उसे style में ले जाते हैं। तब layout को एक 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, search bar, gradients और borders छोटे XML drawables हैं — PNG images नहीं, इसलिए हर screen पर sharp और theme के साथ colour बदलते हैं।

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 (layer-list से top border)
<?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>

सारी 33 ic_… files vector drawables हैं: Material icons (24 × 24) और launcher व splash icons। भरे हुए heart का अपना red colour है; बाकी 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: product card

9:41▮▮ 85%←Top deals⋮⌚62% off ♡Smart Watch Pro🎧63% off ♡Earbuds X2Card = image (ऊपर rounded) + % offbadge + heartname (2 lines) · 4.5★ (128) ·₹1,899 ₹4,999 · (+)
App का हर product card item_product.xml use करता है

एक card layout home rows, grids, search और wishlist सब में चलता है। Image ShapeableImageView है जिसके सिर्फ ऊपर के corners rounded हैं; name हमेशा ठीक 2 lines लेता है ताकि grid में cards line में रहें।

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 और dimensions

कम से कम 600dp चौड़ी screens (tablets, foldables) पर Android values-sw600dp/ चुनता है। वहाँ हम 4 product columns और ऊँचा banner माँगते हैं। Kotlin code 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

App का हर text, screen के हिसाब से group किया हुआ, plurals और format arguments समेत। KartEasy को Hindi में translate करने के लिए यह file values-hi/strings.xml में copy करके values translate करें।

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>

Apps को premium दिखाने वाले design tips

  • हल्का grey background + 14dp corners और 1dp elevation वाले white cards।
  • हर screen पर accent colour में एक main action (Buy now, Checkout, Place order)।
  • Prices bold और dark, MRP छोटा और कटा हुआ, discount green में।
  • Buttons कम से कम 48–52dp ऊँचे; touch targets कभी 40dp से छोटे नहीं।
  • एक जैसी 8dp / 12dp / 16dp spacing — कभी random numbers नहीं।
  • Soft background पर असली images (हमारी sample images हल्का gradient use करती हैं)।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

पूरी app का brand colour कैसे बदलें?
values/colors.xml (और night versions) में brand, brand_dark और brand_light बदलें। Buttons, toolbar, chips, badges और splash सब यही colours पढ़ते हैं, इसलिए एक edit से सब बदल जाता है।
Text layout की जगह strings.xml में क्यों?
इससे translation (values-hi/strings.xml), plurals ("1 item" / "3 items") और formatted values ("%1$s · %2$s") possible होते हैं — Android Studio hard-coded text पर warning इसी लिए देता है।
← E-commerce App Tutorial
🔗

Share this topic with a friend

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

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

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

अगला topicSplash और Onboarding Screens आपकी प्रगति: 14 / 28 (50%) · Lesson 15 / 28 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें