मटीरियल कॉम्पोनेंट (एमडीसी) डेवलपर को मटीरियल डिज़ाइन लागू करने में मदद करता है. Google के इंजीनियर और UX डिज़ाइनर की टीम ने, MDC में दर्जनों खूबसूरत और फ़ंक्शनल यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बनाए हैं. यह Android, iOS, वेब, और Fluter के लिए उपलब्ध है. material.io/develop |
कोडलैब MDC-101 और MDC-102 में, आपने Shrain नाम के एक ऐप्लिकेशन की बुनियादी जानकारी के लिए मटीरियल कॉम्पोनेंट (एमडीसी) का इस्तेमाल किया था. यह ई-कॉमर्स ऐप्लिकेशन है, जो कपड़े और घर का सामान बेचता है. इस ऐप्लिकेशन में लॉगिन फ़्लो से शुरू होने वाला यूज़र फ़्लो है. यह उपयोगकर्ता को प्रॉडक्ट दिखाने वाली होम स्क्रीन पर ले जाता है.
मटीरियल डिज़ाइन की हाल ही में विस्तार से, डिज़ाइनर और डेवलपर ने अपने प्रॉडक्ट के ब्रैंड को दिखाने के लिए ज़्यादा विकल्प दिए. अब आप मठ को कस्टमाइज़ करने और पहले से कहीं ज़्यादा खास शैली को दिखाने के लिए, एमडीसी का इस्तेमाल कर सकते हैं.
आप क्या बनाते हैं
इस कोडलैब में आप इन तीन विकल्पों की मदद से, श्राइन को अपनी ब्रैंड के लिए कस्टमाइज़ कर सकते हैं. इसके लिए, इनका इस्तेमाल करें:
- रंग
- टाइपाेग्राफ़ी
- ऊंचाई
- लेआउट
इस कोडलैब में इस्तेमाल किए गए एमडीसी Android कॉम्पोनेंट और सबसिस्टम
- थीम
- टाइपाेग्राफ़ी
- ऊंचाई
आपको क्या चाहिए
- Android डेवलपमेंट की बुनियादी जानकारी
- Android Studio (अगर आपके पास पहले से #39 नहीं है, तो इसे यहां डाउनलोड करें)
- Android एम्युलेटर या डिवाइस (Android Studio से उपलब्ध)
- सैंपल कोड (अगला चरण देखें)
आप Android ऐप्लिकेशन बनाने के अपने अनुभव को क्या रेटिंग देंगे?
क्या आप MDC-102 से जारी रखना चाहते हैं?
अगर आपने MDC-102 पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. तीसरे चरण पर जाएं: रंग बदलना.
स्टार्टर कोडलैब (कोड बनाना सीखना) ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन material-components-android-codelabs-103-starter/java डायरेक्ट्री में मौजूद है. शुरू करने से पहले उस डायरेक्ट्री में cd ज़रूर जाएं.
...या GitHub से क्लोन बनाएं
GitHub से इस कोडलैब को क्लोन करने के लिए, ये निर्देश चलाएं:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 103-starter
Android Studio में स्टार्टर कोड लोड करना
- सेट अप विज़र्ड पूरा होने और Android Studio में आपका स्वागत है विंडो दिखने के बाद, किसी मौजूदा Android Studio प्रोजेक्ट को खोलें पर क्लिक करें. उस डायरेक्ट्री में जाएं जहां आपने सैंपल कोड इंस्टॉल किया था. साथ ही, मठ प्रोजेक्ट खोलने के लिए, Java -> मंदिर (या shrin ) खोजें.
- Android Studio के विंडो में सबसे नीचे दिए गए गतिविधि इंडिकेटर की मदद से, प्रोजेक्ट को बनाने और सिंक करने के लिए Android Studio को थोड़ा इंतज़ार करें.
- इस समय, Android Studio कुछ बिल्ड गड़बड़ियों को बढ़ा सकता है, क्योंकि इनमें Android SDK टूल या बिल्ड टूल मौजूद नहीं है, जैसा कि नीचे दिखाया गया है. इन्हें इंस्टॉल/अपडेट करने और अपना प्रोजेक्ट सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.
प्रोजेक्ट डिपेंडेंसी जोड़ना
प्रोजेक्ट को MDC Android सहायता लाइब्रेरी पर निर्भर करना होगा. आपने जो सैंपल कोड डाउनलोड किया है उसमें यह डिपेंडेंसी पहले से शामिल होनी चाहिए. हालांकि, बेहतर होगा कि आप इन तरीकों को अपनाएं.
appमॉड्यूल'sbuild.gradleफ़ाइल पर जाएं और पक्का करें किdependenciesब्लॉक में MDC Android पर निर्भरता हो:
api 'com.google.android.material:material:1.1.0-alpha06'
- (ज़रूरी नहीं) अगर ज़रूरी हो, तो नीचे दी गई डिपेंडेंसी जोड़ने के लिए
build.gradleफ़ाइल में बदलाव करें और प्रोजेक्ट सिंक करें.
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}
स्टार्टर ऐप्लिकेशन चलाना
|
खाता ट्रांसफ़र हो गया है! आपको अपने डिवाइस या एम्युलेटर में धार्मिक स्थल का लॉगिन पेज दिखाई देगा. 'आगे बढ़ें' बटन दबाने पर, श्राइन होम पेज सबसे ऊपर ऐप्लिकेशन बार और उसके नीचे प्रॉडक्ट इमेज की ग्रिड के साथ दिखेगा.
आइए, सबसे ऊपर बने ऐप्लिकेशन बार का रंग, ऊंचाई, और टाइपोग्राफ़ी बदलकर श्राइन ब्रैंड से मेल खाते हैं.
यह रंग थीम किसी डिज़ाइनर ने बनाई है जिसे पसंद के मुताबिक रंगों का इस्तेमाल करके दिखाया गया है (नीचे दी गई इमेज में दिखाया गया है). इसमें कई ऐसे रंग शामिल हैं जिन्हें मंदिर के ब्रैंड से चुनकर मटीरियल थीम एडिटर पर लागू किया गया है. इस थीम की मदद से, इन चीज़ों ने रंग बड़ा किया है. (ये रंग 2014 के मटीरियल कलर पैलेट से लिए गए हैं.)
मटीरियल थीम एडिटर ने उन्हें अंकों में लेबल किए गए शेड में व्यवस्थित किया है. इनमें 50, 100, 200, .... और हर रंग के 900 लेबल शामिल हैं. श्राइन में सिर्फ़ गुलाबी स्रोत से 50, 100, और 300 ही रंगों का इस्तेमाल होता है. साथ ही, भूरे रंग की स्वॉच से 900 साइज़ का इस्तेमाल किया जाता है.
इस कलर स्कीम को दिखाने के लिए, सबसे ऊपर मौजूद ऐप्लिकेशन बार का रंग बदलें.
colorPrimaryDark और colorAcenten सेट करें
colors.xml में, इन लाइनों में बदलाव करें. colorAccent एट्रिब्यूट से सबसे ऊपर मौजूद ऐप्लिकेशन बार का रंग कंट्रोल होता है. साथ ही, colorPrimaryDark एट्रिब्यूट से भी स्टेटस बार का रंग कंट्रोल होता है.
colors.xml
<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>स्टेटस बार में गहरे रंग वाले आइकॉन इस्तेमाल करने के लिए, Theme.Shrine में मंदिर की # और थीम जोड़ें:
styles.xml
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>आपका colors.xml और styles.xml इस तरह दिखना चाहिए:
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#E0E0E0</color>
<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>
<color name="toolbarIconColor">#FFFFFF</color>
<color name="loginPageBackgroundColor">#FFFFFF</color>
<color name="productGridBackgroundColor">#FFFFFF</color>
</resources>styles.xml
<resources xmlns:android="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
</style>
<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorAccent</item>
<item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>
</resources>colors.xml में, #442C2E रंग पर एक नया textColorPrimary संसाधन सेट जोड़ें और textColorPrimary विशेषता अपडेट करने के लिए textColorPrimary रंग का संदर्भ दें.
अपनी styles.xml फ़ाइल को अपडेट करके, android:textColorPrimary एट्रिब्यूट को textColorPrimary रंग पर सेट करें.
Theme.Shrine में android:textColorPrimary को सेट करने पर, सभी एलिमेंट का टेक्स्ट स्टाइल हो जाएगा. इसमें, टॉप ऐप्लिकेशन बार और हमारे टॉप ऐप्लिकेशन बार के आइकॉन शामिल हैं.
एक बात और: Widget.Shrine.Toolbar स्टाइल में मौजूद android:theme एट्रिब्यूट को Theme.Shrine पर सेट करें.
आपका colors.xml और styles.xml इस तरह दिखना चाहिए:
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#E0E0E0</color>
<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>
<color name="textColorPrimary">#442C2E</color>
<color name="toolbarIconColor">@color/textColorPrimary</color>
<color name="loginPageBackgroundColor">#FFFFFF</color>
<color name="productGridBackgroundColor">#FFFFFF</color>
</resources>styles.xml
<resources xmlns:android="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
<item name="android:textColorPrimary">@color/textColorPrimary</item>
</style>
<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorAccent</item>
<item name="android:theme">@style/Theme.Shrine</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>
</resources>बनाएं और चलाएं. आपका प्रॉडक्ट ग्रिड अब कुछ ऐसा दिखेगा:
रंग की हमारी स्कीम से मेल खाने के लिए, लॉगिन की स्क्रीन के स्टाइल को बदलें.
टेक्स्ट फ़ील्ड को स्टाइल देना
लॉग इन पेज पर टेक्स्ट इनपुट को आउटलाइन करने और हमारे लेआउट के लिए बेहतर रंगों का इस्तेमाल करने दें.
अपनी colors.xml फ़ाइल में ये रंग संसाधन जोड़ें:
colors.xml
<color name="textInputOutlineColor">#FBB8AC</color>अपने styles.xml में दो नई स्टाइल जोड़ें:
styles.xml
<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
<item name="hintTextColor">@color/textColorPrimary</item>
<item name="android:paddingBottom">8dp</item>
<item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>
<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>आखिर में, shr_login_fragment.xml में अपने TextInputLayout एक्सएमएल कॉम्पोनेंट के दोनों लिए स्टाइल एट्रिब्यूट का इस्तेमाल अपनी नई स्टाइल के लिए करें:
shr_login_fragment.xml
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.Shrine.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/shr_hint_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/password_text_input"
style="@style/Widget.Shrine.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/shr_hint_password"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>बटन के रंगों को आकर्षक बनाना
आखिर में, लॉगिन पेज पर बटनों के रंग को पसंद के मुताबिक बनाएं. अपने styles.xml में ये स्टाइल जोड़ें:
styles.xml
<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>
<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>Widget.Shrine.Button शैली, डिफ़ॉल्ट MaterialButton स्टाइल से एक्सटेंड होती है और बटन के टेक्स्ट का रंग और बैकग्राउंड का रंग बदलती है. Widget.Shrine.Button.TextButton डिफ़ॉल्ट टेक्स्ट MaterialButton स्टाइल से एक्सटेंड होता है और सिर्फ़ टेक्स्ट का रंग बदलता है.
अपने 'आगे बढ़ें' बटन पर Widget.Shrine.Button स्टाइल और 'रद्द करें' बटन पर Widget.Shrine.Button.TextButton स्टाइल इस तरह सेट करें:
shr_login_fragment.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:id="@+id/next_button"
style="@style/Widget.Shrine.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="@string/shr_button_next" />
<com.google.android.material.button.MaterialButton
android:id="@+id/cancel_button"
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:layout_toStartOf="@id/next_button"
android:layout_toLeftOf="@id/next_button"
android:text="@string/shr_button_cancel" />
</RelativeLayout>लॉगिन पेज में, मंदिर के लोगो का रंग अपडेट करें. इसके लिए वेक्टर ड्रॉ करने लायक छोटा बदलाव करना होगा, shr_logo.xml. ड्रॉ करने लायक फ़ाइल खोलें और android:fillAlpha प्रॉपर्टी को 1 में बदलें. ड्रॉ करने वाला कुछ ऐसा दिखना चाहिए:
shr_logo.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="149dp"
android:height="152dp"
android:tint="?attr/colorControlNormal"
android:viewportWidth="149"
android:viewportHeight="152">
<path
android:fillAlpha="1"
android:fillColor="#DADCE0"
android:fillType="evenOdd"
android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
android:strokeWidth="1"
android:strokeAlpha="0.4"
android:strokeColor="#00000000" />
</vector>shr_login_fragment.xml में ?android:attr/textColorPrimary लोगो <ImageView> पर, android:tint एट्रिब्यूट को इस तरह सेट करें:
shr_login_fragment.xml
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="48dp"
android:layout_marginBottom="16dp"
android:tint="?android:attr/textColorPrimary"
app:srcCompat="@drawable/shr_logo" />बनाएं और चलाएं. आपकी लॉगिन स्क्रीन अब कुछ ऐसी दिखेगी:
रंग में बदलाव के अलावा, आपके डिज़ाइनर ने आपको साइट पर इस्तेमाल करने के लिए एक खास टाइपोग्राफ़ी भी दी है. चलिए, इसे सबसे ऊपर मौजूद ऐप्लिकेशन बार में भी जोड़ते हैं.
सबसे ऊपर मौजूद ऐप्लिकेशन बार को स्टाइल करना
अपने डिज़ाइनर की ओर से दी गई खास बातों से मेल खाने के लिए, अपने टॉप ऐप्लिकेशन बार के टेक्स्ट का स्टाइल बनाएं. styles.xml में इस टेक्स्ट के दिखने का स्टाइल जोड़ें और अपनी Widget.Shrine.Toolbar स्टाइल में इस स्टाइल का रेफ़रंस देने के लिए, titleTextAppearance प्रॉपर्टी सेट करें.
styles.xml
<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorAccent</item>
<item name="android:theme">@style/Theme.Shrine</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>
<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textSize">16sp</item>
</style>आपका colors.xml और styles.xml इस तरह दिखना चाहिए:
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#E0E0E0</color>
<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>
<color name="textColorPrimary">#442C2E</color>
<color name="toolbarIconColor">@color/textColorPrimary</color>
<color name="loginPageBackgroundColor">#FFFFFF</color>
<color name="productGridBackgroundColor">#FFFFFF</color>
<color name="textInputOutlineColor">#FBB8AC</color>
</resources>styles.xml
<resources xmlns:android="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
<item name="android:textColorPrimary">@color/textColorPrimary</item>
</style>
<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
<item name="hintTextColor">@color/textColorPrimary</item>
<item name="android:paddingBottom">8dp</item>
<item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>
<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>
<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorAccent</item>
<item name="android:theme">@style/Theme.Shrine</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>
<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textSize">16sp</item>
</style>
</resources>लेबल को स्टाइल देना
हम प्रॉडक्ट के कार्ड के लेबलों को इस तरह से स्टाइल करेंगे कि वे सही तरीके से टेक्स्ट में दिखें और कार्ड के बीच में हॉरिज़ॉन्टल रूप से दिखे.
अपने शीर्षक लेबल पर टाइपोग्राफ़ी को textAppearanceHeadline6 से textAppearanceSubtitle2 में इस तरह अपडेट करें:
shr_product_card.xml
<TextView
android:id="@+id/product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceSubtitle2" />इमेज लेबल को बीच में करने के लिए, android:textAlignment="center" एट्रिब्यूट में सेट करने के लिए shr_product_card.xml में <TextView> लेबल में बदलाव करें:
shr_product_card.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_title"
android:textAlignment="center"
android:textAppearance="?attr/textAppearanceSubtitle2" />
<TextView
android:id="@+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_description"
android:textAlignment="center"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>बनाएं और चलाएं. आपके प्रॉडक्ट की ग्रिड स्क्रीन अब इस तरह दिखेगी:
मैच करने के लिए, लॉगिन स्क्रीन की टाइपोग्राफ़ी बदलें.
लॉगिन स्क्रीन का टाइपफ़ेस बदलें
styles.xml में, ये स्टाइल जोड़ें:
styles.xml
<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>shr_login_fragment.xml में, नए स्टाइल को अपने "SHRINE&कोटेशन; शीर्षक <TextView> पर सेट करें (और वहां textAllCaps और textSize एट्रिब्यूट मिटाएं:
shr_login_fragment.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="132dp"
android:text="@string/shr_app_name"
android:textAppearance="@style/TextAppearance.Shrine.Title" />बनाएं और चलाएं. आपकी लॉगिन स्क्रीन अब कुछ ऐसी दिखेगी:
अब आपने #&398 पेज को एक खास रंग और टाइपोग्राफ़ी से स्टाइल कर लिया है, जो मठ के नाम से मेल खाता है. चलिए, मज़ा लेने के कार्ड को एक नज़र डालते हैं. फ़िलहाल, वे ऐप्लिकेशन के नेविगेशन में सफ़ेद रंग की सतह पर हैं. आइए, प्रॉडक्ट की ओर लोगों का ध्यान खींचने के लिए ज़्यादा ज़ोर देते हैं.
प्रॉडक्ट ग्रिड की ऊंचाई बदलना
आइए, सबसे ऊपर मौजूद ऐप्लिकेशन बार और कॉन्टेंट की ऊंचाई में इस तरह से बदलाव करते हैं कि ऐसा लगता है कि कॉन्टेंट ऊपर वाले ऐप्लिकेशन बार के ऊपर फ़्लोट कर रहा है. अपने AppBarLayout में app:elevation एट्रिब्यूट जोड़ें, और shr_product_grid_fragment.xml में अपने NestedScrollView एक्सएमएल कॉम्पोनेंट में android:elevation एट्रिब्यूट इस तरह जोड़ें:
shr_product_grid_fragment.xml
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/shr_menu"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:paddingStart="@dimen/shr_product_grid_spacing"
android:paddingEnd="@dimen/shr_product_grid_spacing"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.appcompat.app.AlertController.RecycleListView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>कार्ड की ऊंचाई (और रंग) बदलना
आप shr_product_card.xml में मौजूद app:cardElevation की जानकारी को 2dp से 0dp में बदलकर, हर कार्ड की ऊंचाई में बदलाव कर सकते हैं. app:cardBackgroundColor को @android:color/transparent में भी बदलें.
shr_product_card.xml
<com.google.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@android:color/transparent"
app:cardElevation="0dp"
app:cardPreventCornerOverlap="true">एक बार देख लें! आपने #39;प्रॉडक्ट ग्रिड पेज पर, हर कार्ड की ऊंचाई में बदलाव किया है.
अगले बटन की ऊंचाई बदलें
styles.xml में, अपनी Widget.Shrine.Button स्टाइल में यह प्रॉपर्टी जोड़ें:
styles.xml
<item name="android:stateListAnimator" tools:ignore="NewApi">
@animator/shr_next_button_state_list_anim
</item>Button और #39;s स्टाइल में android:stateListAnimator को सेट करने पर 'आगे बढ़ें' बटन सेट होता है. इस बटन से, हमारे दिए गए ऐनिमेटर का इस्तेमाल किया जाता है.
बनाएं और चलाएं. आपकी लॉगिन स्क्रीन अब कुछ ऐसी दिखेगी:
कार्ड को अलग-अलग आसपेक्ट रेशियो और साइज़ में दिखाने के लिए, लेआउट को बदलें, ताकि हर कार्ड दूसरे कार्ड से अलग दिखे.
RecyclerView अडैप्टर का इस्तेमाल करना
हमने #39;staggeredgridlayout पैकेज में एक नया RecyclerView अडैप्टर दिया है, जिसमें कार्ड का लेआउट बहुत मुश्किल है और यह एक हॉरिज़ॉन्टल तरीके से स्क्रोल होता है. आप इस कोड को खुद देख सकते हैं. हालांकि, हम यहां इसे लागू करने का तरीका नहीं जान पाएंगे.
इस नए अडैप्टर का इस्तेमाल करने के लिए, ProductGridFragment.java में onCreateView() के तरीके में बदलाव करें. &RecyclerView को कोट करने के बाद कोड ब्लॉक को बदलें; टिप्पणी को निम्न के साथ बदलें:
ProductGridFragment.java
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return position % 3 == 2 ? 2 : 1;
}
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));हमें अपनी NestedScrollView में पैडिंग (जगहें) हटाने के लिए, product_grid_fragment.xml में एक छोटा सा बदलाव करना होगा:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:elevation="6dp">आखिर में, हम ProductGridItemDecoration.java में बदलाव करके भी RecyclerView में अपने कार्ड पैडिंग में बदलाव करेंगे. ProductGridItemDecoration.java के getItemOffsets() तरीके को इस तरह बदलें:
ProductGridItemDecoration.java
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
outRect.left = smallPadding;
outRect.right = largePadding;
}बनाएं और चलाएं. प्रॉडक्ट ग्रिड आइटम को अब स्थिति में रखा जाना चाहिए:
रंग आपके ब्रैंड को दिखाने का एक असरदार तरीका है और रंग में एक छोटा सा बदलाव करने से आपके उपयोगकर्ता अनुभव पर बड़ा असर पड़ सकता है. इसे टेस्ट करने के लिए, देखें कि कैसे मंदिर की कलर स्कीम पूरी तरह से अलग होती.
स्टाइल और रंगों में बदलाव करना
styles.xml में, ये नई थीम जोड़ें:
styles.xml
<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
<item name="colorPrimary">#FFCF44</item>
<item name="colorPrimaryDark">#FD9725</item>
<item name="colorAccent">#FD9725</item>
<item name="colorOnPrimary">#FFFFFF</item>
<item name="colorError">#FD9725</item>
</style>और AndroidManifest.xml में, अपने ऐप्लिकेशन में इस नई थीम का इस्तेमाल करें:
AndroidManifest.xml
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/shr_app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:name="com.google.codelabs.mdc.java.shrine.application.ShrineApplication"
android:theme="@style/Theme.Shrine.Autumn">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>colors.xml में टूलबार आइकॉन के रंग में बदलाव करें:
colors.xml
<color name="toolbarIconColor">#FFFFFF</color>फिर, मौजूदा थीम का रेफ़रंस देने के लिए हमारी टूलबार शैली का android:theme एट्रिब्यूट सेट करें, न कि हार्ड कोड करने के बजाय "?theme&कोटेशन; एट्रिब्यूट का इस्तेमाल करके:
styles.xml
<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorAccent</item>
<item name="android:theme">?theme</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>इसके बाद, लॉगिन स्क्रीन के टेक्स्ट टेक्स्ट के संकेत वाले टेक्स्ट का रंग हल्का करें. टेक्स्ट फ़ील्ड में यूआरएल android:textColorHint एट्रिब्यूट जोड़ें #39: style:
styles.xml
<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>बनाएं और चलाएं. अब आपको नई थीम दिखेगी, जिसमें आपको झलक दिखेगी.
MDC-104 में जाने से पहले इस सेक्शन में बदला गया कोड वापस लाएं.
अब तक आपने #39;एक ऐसा ऐप्लिकेशन बना लिया है जो आपके डिज़ाइनर के डिज़ाइन की खास बातों से मिलता-जुलता है.
अगले कदम
आपने इन MDC कॉम्पोनेंट का इस्तेमाल किया है: थीम, टाइपोग्राफ़ी, और एलिवेशन. आप MDC-Android कैटलॉग MDC Android के घटक में और भी ज़्यादा घटक एक्सप्लोर कर सकते हैं.
अगर आपके प्लान किए गए ऐप्लिकेशन के डिज़ाइन में ऐसे एलिमेंट हैं जिनमें MDC लाइब्रेरी में कॉम्पोनेंट नहीं हैं, तो क्या होगा? MDC-104: मटीरियल डिज़ाइन ऐडवांस्ड कॉम्पोनेंट में, हम किसी खास लुक को पाने के लिए, MDC लाइब्रेरी का इस्तेमाल करके कस्टम कॉम्पोनेंट बनाने का तरीका जानेंगे.