MDC-104 Android: मटीरियल एडवांस्ड कॉम्पोनेंट (Java)

logo_components_color_2x_web_96dp.png

मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. Google के इंजीनियरों और यूएक्स डिज़ाइनरों की टीम ने MDC बनाया है. इसमें कई सुंदर और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है.

material.io/develop

MDC-103 कोडलैब में, आपने अपने ऐप्लिकेशन को स्टाइल करने के लिए, मटीरियल कॉम्पोनेंट (एमडीसी) के रंग, एलिवेशन, और टाइपोग्राफ़ी को पसंद के मुताबिक बनाया था.

मटीरियल डिज़ाइन सिस्टम में मौजूद कॉम्पोनेंट, पहले से तय किए गए कुछ टास्क पूरे करता है. साथ ही, इसमें कुछ खास बातें होती हैं. जैसे, बटन. हालांकि, बटन सिर्फ़ उपयोगकर्ता के लिए कोई कार्रवाई करने का तरीका नहीं है. यह शेप, साइज़, और रंग का विज़ुअल एक्सप्रेशन भी है. इससे उपयोगकर्ता को पता चलता है कि यह इंटरैक्टिव है और इसे छूने या क्लिक करने पर कुछ होगा.

मटीरियल डिज़ाइन के दिशा-निर्देशों में, कॉम्पोनेंट के बारे में डिज़ाइनर के नज़रिए से बताया गया है. इनमें, अलग-अलग प्लैटफ़ॉर्म पर उपलब्ध बुनियादी फ़ंक्शन के साथ-साथ, हर कॉम्पोनेंट को बनाने वाले ऐनाटॉमिक एलिमेंट के बारे में बताया गया है. उदाहरण के लिए, बैकड्रॉप में बैक लेयर और उसका कॉन्टेंट, फ़्रंट लेयर और उसका कॉन्टेंट, मोशन के नियम, और डिसप्ले के विकल्प शामिल होते हैं. इनमें से हर कॉम्पोनेंट को, हर ऐप्लिकेशन की ज़रूरतों, इस्तेमाल के उदाहरणों, और कॉन्टेंट के हिसाब से पसंद के मुताबिक बनाया जा सकता है. ये ज़्यादातर, आपके प्लैटफ़ॉर्म के एसडीके के पारंपरिक व्यू, कंट्रोल, और फ़ंक्शन होते हैं.

Material Design के दिशा-निर्देशों में कई कॉम्पोनेंट के नाम दिए गए हैं. हालांकि, इनमें से सभी कॉम्पोनेंट, कोड को दोबारा इस्तेमाल करने के लिए सही नहीं हैं. इसलिए, ये MDC में नहीं मिलते. इन अनुभवों को खुद बनाया जा सकता है, ताकि अपने ऐप्लिकेशन को मनमुताबिक स्टाइल दी जा सके. इसके लिए, आपको सिर्फ़ पारंपरिक कोड का इस्तेमाल करना होगा.

आपको क्या बनाने को मिलेगा

इस कोडलैब में, आपको Shrine में बैकड्रॉप जोड़ने का तरीका बताया जाएगा. इससे, एसिमेट्रिकल ग्रिड में दिखाए गए प्रॉडक्ट को कैटगरी के हिसाब से फ़िल्टर किया जाएगा. आपको इनका इस्तेमाल करना होगा:

  • आकार
  • मोशन
  • Android SDK की पारंपरिक क्लास

इस कोडलैब में MDC-Android कॉम्पोनेंट

  • आकार

आपको इन चीज़ों की ज़रूरत होगी

  • Android डेवलपमेंट की बुनियादी जानकारी
  • Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां से डाउनलोड करें)
  • Android एम्युलेटर या डिवाइस (Android Studio के ज़रिए उपलब्ध है)
  • सैंपल कोड (अगला चरण देखें)

Android ऐप्लिकेशन बनाने के अपने अनुभव को आप क्या रेटिंग देंगे?

शुरुआती स्तर सामान्य स्तर एडवांस लेवल

क्या आपको MDC-103 से आगे बढ़ना है?

अगर आपने MDC-103 पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. तीसरे चरण पर जाएं.

क्या आपको नए सिरे से शुरुआत करनी है?

स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना

स्टार्टर ऐप्लिकेशन डाउनलोड करें

स्टार्टर ऐप्लिकेशन, material-components-android-codelabs-104-starter/java डायरेक्ट्री में मौजूद होता है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.

...या इसे GitHub से क्लोन करें

इस कोडलैब को GitHub से क्लोन करने के लिए, ये कमांड चलाएं:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-starter

Android Studio में स्टार्टर कोड लोड करना

  1. सेटअप विज़र्ड पूरा होने और Android Studio में आपका स्वागत है विंडो दिखने के बाद, मौजूदा Android Studio प्रोजेक्ट खोलें पर क्लिक करें. उस डायरेक्ट्री पर जाएं जहां आपने सैंपल कोड इंस्टॉल किया था. इसके बाद, Shrine प्रोजेक्ट खोलने के लिए java -> shrine चुनें. इसके अलावा, अपने कंप्यूटर पर shrine खोजकर भी Shrine प्रोजेक्ट खोला जा सकता है.
  2. Android Studio को प्रोजेक्ट बनाने और सिंक करने में कुछ समय लगेगा. Android Studio विंडो में सबसे नीचे मौजूद गतिविधि इंडिकेटर से पता चलता है कि प्रोजेक्ट बनाया जा रहा है और सिंक किया जा रहा है.
  3. इस समय, Android Studio कुछ बिल्ड गड़बड़ियां दिखा सकता है. ऐसा इसलिए, क्योंकि आपके पास Android SDK या बिल्ड टूल नहीं हैं. जैसे, यहां दिखाया गया है. इन्हें इंस्टॉल/अपडेट करने और अपने प्रोजेक्ट को सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.

प्रोजेक्ट की डिपेंडेंसी जोड़ना

प्रोजेक्ट में MDC Android support library की डिपेंडेंसी होनी चाहिए. आपने जो सैंपल कोड डाउनलोड किया है उसमें यह डिपेंडेंसी पहले से ही मौजूद होनी चाहिए. हालांकि, यह पक्का करने के लिए कि ऐसा हो, आपको यहां दिया गया तरीका अपनाना चाहिए.

  1. app मॉड्यूल की build.gradle फ़ाइल पर जाएं और पक्का करें कि dependencies ब्लॉक में MDC Android पर डिपेंडेंसी शामिल हो:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (ज़रूरी नहीं) अगर ज़रूरी हो, तो 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'
}

स्टार्टर ऐप्लिकेशन चलाना

  1. पक्का करें कि रन / प्ले बटन के बाईं ओर मौजूद बिल्ड कॉन्फ़िगरेशन app हो.
  2. ऐप्लिकेशन बनाने और उसे चलाने के लिए, हरे रंग के चलाएं / चलाएं बटन को दबाएं.
  3. अगर डिप्लॉयमेंट का टारगेट चुनें विंडो में, आपके पास पहले से ही कोई Android डिवाइस उपलब्ध है, तो आठवां चरण पर जाएं. इसके अलावा, नया वर्चुअल डिवाइस बनाएं पर क्लिक करें.
  4. हार्डवेयर चुनें स्क्रीन पर, कोई फ़ोन डिवाइस चुनें. जैसे, Pixel 2. इसके बाद, आगे बढ़ें पर क्लिक करें.
  5. सिस्टम इमेज स्क्रीन में, Android का नया वर्शन चुनें. हमारा सुझाव है कि आप सबसे ज़्यादा एपीआई लेवल वाला वर्शन चुनें. अगर यह इंस्टॉल नहीं है, तो डाउनलोड करें लिंक पर क्लिक करें और डाउनलोड पूरा करें.
  6. आगे बढ़ें पर क्लिक करें.
  7. Android Virtual Device (AVD) स्क्रीन पर, सेटिंग को डिफ़ॉल्ट रूप से सेट रहने दें. इसके बाद, Finish पर क्लिक करें.
  8. डिप्लॉयमेंट टारगेट डायलॉग से, कोई Android डिवाइस चुनें.
  9. ठीक है पर क्लिक करें.
  10. Android Studio, ऐप्लिकेशन को बनाता है, उसे डिप्लॉय करता है, और टारगेट डिवाइस पर उसे अपने-आप खोल देता है.

हो गया! आपको अपने डिवाइस पर Shrine ऐप्लिकेशन चलता हुआ दिखेगा.

बैकड्रॉप, ऐप्लिकेशन का सबसे पीछे वाला हिस्सा होता है. यह अन्य सभी कॉन्टेंट और कॉम्पोनेंट के पीछे दिखता है. इसमें दो लेयर होती हैं: बैक लेयर (जिसमें कार्रवाइयां और फ़िल्टर दिखते हैं) और फ़्रंट लेयर (जिसमें कॉन्टेंट दिखता है). बैकड्रॉप का इस्तेमाल, इंटरैक्टिव जानकारी और कार्रवाइयां दिखाने के लिए किया जा सकता है. जैसे, नेविगेशन या कॉन्टेंट फ़िल्टर.

ग्रिड का कॉन्टेंट छिपाना

प्रॉडक्ट के कॉन्टेंट को कुछ समय के लिए हटाने के लिए, shr_product_grid_fragment.xml में जाकर अपने NestedScrollView में android:visibility="gone" एट्रिब्यूट जोड़ें:

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"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

हम इस इलाके में एक बैकड्रॉप इंस्टॉल करेंगे. बैकड्रॉप पर दिखने वाले मेन्यू कॉन्टेंट और टॉप ऐप्लिकेशन बार के बीच कोई अंतर न दिखे, इसके लिए हम बैकड्रॉप को टॉप ऐप्लिकेशन बार के रंग में बदल देंगे.

shr_product_grid_fragment.xml में, AppBarLayout से पहले, अपने रूट FrameLayout में पहले एलिमेंट के तौर पर यह जोड़ें:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

styles.xml में यह जोड़ें:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

बहुत खूब! आपने Shrine के यूज़र इंटरफ़ेस (यूआई) में एक शानदार बैकड्रॉप जोड़ा है. इसके बाद, हम एक मेन्यू जोड़ेंगे.

मेन्यू जोड़ना

मेन्यू, टेक्स्ट बटन की एक सूची होती है. हम यहां एक जोड़ देंगे.

अपनी res -> layout डायरेक्ट्री में shr_backdrop.xml नाम का नया लेआउट बनाएं और इसमें यह कॉन्टेंट जोड़ें:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

इसके बाद, इस सूची को <include> टैग का इस्तेमाल करके, LinearLayout में जोड़ें. LinearLayout को आपने अभी shr_product_grid_fragment.xml में जोड़ा है:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

बनाएं और चलाएं. आपकी होम स्क्रीन ऐसी दिखनी चाहिए:

आपका बैकड्रॉप तैयार हो गया है. आइए, उस कॉन्टेंट को वापस लाएं जिसे हमने पहले छिपाया था.

इस कोडलैब में Shrine में कोई भी बदलाव करने से पहले, इसका मुख्य प्रॉडक्ट कॉन्टेंट सबसे पीछे वाले प्लैटफ़ॉर्म पर मौजूद था. बैकड्रॉप जोड़ने से, इस कॉन्टेंट पर अब ज़्यादा ज़ोर दिया गया है, क्योंकि यह बैकड्रॉप के सामने दिखता है.

नई लेयर जोड़ना

हमें प्रॉडक्ट ग्रिड लेयर को फिर से दिखाना चाहिए. अपने NestedScrollView से android:visibility="gone" एट्रिब्यूट की वैल्यू हटाएं:

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"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

आइए, सबसे ऊपर वाली लेयर को स्टाइल करें. इसके लिए, सबसे ऊपर बाएं कोने में नॉच का इस्तेमाल करें. मटीरियल डिज़ाइन में, इस तरह के बदलाव को शेप कहा जाता है. मटेरियल के कॉम्पोनेंट को अलग-अलग शेप में दिखाया जा सकता है. आकृतियों से, सतहों को हाइलाइट किया जा सकता है और उन्हें स्टाइल किया जा सकता है. साथ ही, इनका इस्तेमाल ब्रैंडिंग के लिए किया जा सकता है. मटीरियल शेप के कोने और किनारे घुमावदार या कोण वाले हो सकते हैं. साथ ही, इनकी कितनी भी साइड हो सकती हैं. ये एक जैसे या अलग-अलग हो सकते हैं.

कोई शेप जोड़ना

ग्रिड के आकार में बदलाव करें. हमने कस्टम शेप बैकग्राउंड दिया है. हालांकि, यह शेप सिर्फ़ Android Marshmallow और इसके बाद के वर्शन पर सही तरीके से दिखता है. हम सिर्फ़ Android Marshmallow और इसके बाद के वर्शन पर, NestedScrollView के लिए shr_product_grid_background_shape बैकग्राउंड सेट कर सकते हैं. सबसे पहले, अपने NestedScrollView में एक id जोड़ें, ताकि हम इसे कोड में इस तरह से रेफ़रंस कर सकें:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

इसके बाद, ProductGridFragment.java में प्रोग्राम के हिसाब से बैकग्राउंड सेट करें. बैकग्राउंड को onCreateView() के आखिर में सेट करने के लिए, यहां दिया गया लॉजिक जोड़ें. यह लॉजिक, return स्टेटमेंट से ठीक पहले जोड़ना है:

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

आखिर में, हम productGridBackgroundColor कलर रिसॉर्स (इसका इस्तेमाल कस्टम शेप के बैकग्राउंड के लिए भी किया जाता है) को इस तरह अपडेट करेंगे:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

बनाएं और चलाएं:

हमने Shrine के मुख्य प्लैटफ़ॉर्म को कस्टम स्टाइल वाला आकार दिया है. सरफ़ेस एलिवेशन की वजह से, उपयोगकर्ताओं को यह पता चलता है कि सामने वाली सफ़ेद लेयर के ठीक पीछे कुछ है. आइए, इसमें मोशन जोड़ते हैं, ताकि उपयोगकर्ता मेन्यू देख सकें.

मोशन, आपके ऐप्लिकेशन को दिलचस्प बनाने का एक तरीका है. मोशन, ज़्यादा और नाटकीय, कम और सामान्य या इन दोनों के बीच का हो सकता है. मोशन का टाइप, स्थिति के हिसाब से होना चाहिए. बार-बार की जाने वाली सामान्य कार्रवाइयों में मोशन को छोटा और हल्का होना चाहिए, ताकि वे नियमित तौर पर ज़्यादा समय न लें. अन्य स्थितियों में, जैसे कि जब कोई उपयोगकर्ता पहली बार ऐप्लिकेशन खोलता है, तो विज्ञापन ज़्यादा ध्यान खींचने वाला हो सकता है. इससे उपयोगकर्ता को यह जानने में मदद मिलती है कि आपके ऐप्लिकेशन का इस्तेमाल कैसे किया जाए.

मेन्यू बटन में दिखने वाली मोशन इफ़ेक्ट जोड़ना

मोशन ग्राफ़िक में, सामने मौजूद शेप को सीधे नीचे की ओर जाते हुए दिखाया गया है. हमने आपके लिए पहले से ही एक क्लिक लिसनर उपलब्ध कराया है. इससे, NavigationIconClickListener.java में मौजूद शीट के लिए अनुवाद ऐनिमेशन पूरा किया जा सकेगा. हम इस क्लिक लिसनर को ProductGridFragment.java के setupToolbar() तरीके में सेट कर सकते हैं:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

अब आपका setUpToolbar() तरीका ऐसा दिखना चाहिए:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

बनाएं और चलाएं. मेन्यू बटन दबाएं:

नेविगेशन मेन्यू आइकॉन को फिर से दबाने पर, मेन्यू छिप जाना चाहिए.

सबसे आगे वाली लेयर की मोशन में बदलाव करना

मोशन, अपने ब्रैंड को दिखाने का एक शानदार तरीका है. आइए, देखते हैं कि टाइमिंग कर्व का इस्तेमाल करने पर, ऐनिमेशन कैसा दिखता है.

अपने कोड को setupToolbar() में ProductGridFragment.java में अपडेट करें, ताकि नेविगेशन आइकॉन के क्लिक लिसनर को इंटरपोलेटर पास किया जा सके. इसके लिए, यह तरीका अपनाएं:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator()));
}

इससे अलग इफ़ेक्ट मिलता है, है न?

ब्रैंड के आइकॉन, जाने-पहचाने आइकॉन के साथ भी काम करते हैं. आइए, 'दिखाएं' आइकॉन को पसंद के मुताबिक बनाएं और उसे अपने टाइटल के साथ मर्ज करें, ताकि उसे ब्रैंड के हिसाब से यूनीक लुक दिया जा सके.

मेन्यू बटन का आइकॉन बदलना

मेन्यू बटन को बदलकर, ऐसा आइकॉन दिखाएं जिसमें डायमंड डिज़ाइन शामिल हो. हमने आपको ब्रैंड के हिसाब से नया आइकॉन (shr_branded_menu) उपलब्ध कराया है. इसका इस्तेमाल करने के लिए, shr_product_grid_fragment.xml में जाकर अपना टूलबार अपडेट करें. साथ ही, app:contentInsetStart और android:padding एट्रिब्यूट सेट करें, ताकि टूलबार आपके डिज़ाइनर की खास बातों से बेहतर तरीके से मेल खाए:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

मेन्यू खुला होने और बंद होने पर, टूलबार के लिए ड्रॉएबल लेने के लिए, setupToolbar() में ProductGridFragment.java में मौजूद क्लिक लिसनर को फिर से अपडेट करें. इसके लिए, यह तरीका अपनाएं:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

बनाएं और चलाएं:

बढ़िया! जब बैकड्रॉप दिखाया जा सकता है, तब डायमंड मेन्यू आइकॉन दिखता है. जब मेन्यू को छिपाया जा सकता है, तो उसकी जगह बंद करें आइकॉन दिखता है.

इन चार कोडलैब के दौरान, आपने देखा कि Material Components का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) को खास और बेहतरीन कैसे बनाया जाता है. इससे ब्रैंड की पर्सनैलिटी और स्टाइल को दिखाया जा सकता है.

अगले चरण

यह कोडलैब, MDC-104, कोडलैब की इस सीरीज़ को पूरा करता है. Android विजेट कैटलॉग पर जाकर, MDC-Android में मौजूद अन्य कॉम्पोनेंट के बारे में भी जाना जा सकता है.

इस कोडलैब में आगे बढ़ने के लिए, अपने Shrine ऐप्लिकेशन में बदलाव करें. इससे बैकड्रॉप मेन्यू से कोई कैटगरी चुनने पर, प्रॉडक्ट की इमेज बदल जाएंगी.

बैकएंड को काम करने के लिए, इस ऐप्लिकेशन को Firebase से कनेक्ट करने का तरीका जानने के लिए, Firebase Android Codelab देखें.

मैंने इस कोडलैब को कम समय और कम मेहनत में पूरा कर लिया

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमत पूरी तरह असहमत

मुझे आने वाले समय में Material Components का इस्तेमाल जारी रखना है

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमत पूरी तरह असहमत