MDC-101 Android: मटीरियल कॉम्पोनेंट्स (एमडीसी) बेसिक (Kotlin)

1. परिचय

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

Android के लिए मटीरियल डिज़ाइन और मटीरियल कॉम्पोनेंट क्या हैं?

Material Design, डिजिटल प्रॉडक्ट को बेहतर और खूबसूरत बनाने का एक सिस्टम है. स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत लाकर, प्रॉडक्ट टीमें डिज़ाइन की अपनी पूरी क्षमता का इस्तेमाल कर सकती हैं.

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

इस कोडलैब में, MDC Android के कई कॉम्पोनेंट का इस्तेमाल करके लॉगिन पेज बनाया जाएगा.

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

यह कोडलैब, चार कोडलैब की सीरीज़ का पहला कोडलैब है. इसमें आपको Shrine नाम का ऐप्लिकेशन बनाने के बारे में जानकारी मिलेगी. यह एक ई-कॉमर्स Android ऐप्लिकेशन है, जिसमें कपड़े और घर के सामान बेचे जाते हैं. इसमें यह दिखाया जाएगा कि MDC Android का इस्तेमाल करके, किसी ब्रैंड या स्टाइल को दिखाने के लिए कॉम्पोनेंट को कैसे पसंद के मुताबिक बनाया जा सकता है.

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

दो टेक्स्ट फ़ील्ड, एक उपयोगकर्ता नाम डालने के लिए और दूसरा पासवर्ड डालने के लिए
दो बटन, एक "रद्द करें" के लिए और दूसरा "आगे बढ़ें" के लिए
ऐप्लिकेशन का नाम (Shrine)
श्राइन के लोगो की इमेज

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

टेक्स्ट फ़ील्ड
बटन

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

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

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

शुरुआती

सामान्य

एडवांस

2. डेवलपमेंट एनवायरमेंट सेट अप करना

Android Studio शुरू करना

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

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

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

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

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

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

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

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

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

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

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

app मॉड्यूल की build.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'
}

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

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

हो गया! Shrine के लॉगिन पेज का स्टार्टर कोड, आपके एम्युलेटर में चलना चाहिए. आपको "Shrine" नाम और उसके ठीक नीचे Shrine का लोगो दिखेगा.

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

shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine डायरेक्ट्री में MainActivity.kt खोलें. इसमें यह जानकारी होनी चाहिए:

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

यह ऐक्टिविटी, shr_main_activity.xml में तय की गई R.layout.shr_main_activity लेआउट फ़ाइल दिखाती है.

आपको onCreate(), में दिखेगा कि MainActivity.kt, LoginFragment दिखाने के लिए Fragment लेन-देन शुरू करता है. इस कोडलैब के लिए, हम LoginFragment में बदलाव करेंगे. यह ऐक्टिविटी, navigateTo(Fragment) में तय की गई navigateTo(Fragment) मेथड को भी लागू करती है. इससे कोई भी फ़्रैगमेंट, किसी दूसरे फ़्रैगमेंट पर नेविगेट कर सकता है.NavigationHost

लेआउट फ़ाइल खोलने के लिए, गतिविधि फ़ाइल में Command + Click (या Control + Click) shr_main_activity करें. इसके अलावा, app -> res -> layout -> shr_main_activity.xml में लेआउट फ़ाइल पर जाएं.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

यहां हमें एक सामान्य <FrameLayout> दिखता है. यह एक कंटेनर के तौर पर काम करता है. इसमें वे सभी फ़्रैगमेंट दिखते हैं जो गतिविधि में दिखते हैं.

अब LoginFragment.kt खोलते हैं.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment, shr_login_fragment लेआउट फ़ाइल को बड़ा करता है और उसे onCreateView() में दिखाता है.

अब, आइए shr_login_fragment.xml लेआउट फ़ाइल पर एक नज़र डालें, ताकि पता चल सके कि लॉगिन पेज कैसा दिखता है.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <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:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

यहां, हमें सबसे ऊपर <ImageView> के साथ <LinearLayout> दिख रहा है. यह Shrine का लोगो है.

इसके बाद, <TextView> टैग है. यह लोगो के नीचे मौजूद Shrine लेबल को दिखाता है. इस लेबल का टेक्स्ट, @string/shr_app_name नाम का स्ट्रिंग रिसॉर्स है. अगर आपने स्ट्रिंग रिसॉर्स के नाम पर Command + Click (या Control + Click) किया है या app -> res -> values -> strings.xml खोला है, तो आपको strings.xml फ़ाइल दिखेगी. इसमें स्ट्रिंग रिसॉर्स तय किए जाते हैं. आने वाले समय में, ज़्यादा स्ट्रिंग संसाधन जोड़े जाने पर उन्हें यहां तय किया जाएगा. इस फ़ाइल में मौजूद हर संसाधन में shr_ प्रीफ़िक्स होना चाहिए. इससे पता चलता है कि ये Shrine ऐप्लिकेशन का हिस्सा हैं.

अब आपको स्टार्टर कोड के बारे में पता चल गया है. इसलिए, आइए अपना पहला कॉम्पोनेंट लागू करें.

3. टेक्स्ट फ़ील्ड जोड़ना

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

Material Design के टेक्स्ट फ़ील्ड को बेहतर बनाया गया है, ताकि आपको अपने ब्रैंड के हिसाब से ज़्यादा विकल्प मिल सकें. साथ ही, इन्हें इस्तेमाल करना आसान हो और इनका विज़ुअल डिज़ाइन बेहतर हो. इसके लिए, यूज़र एक्सपीरियंस (यूएक्स) पर काफ़ी रिसर्च की गई है.

मटीरियल डिज़ाइन के दिशा-निर्देशों के लेख में, नए टेक्स्ट फ़ील्ड के बारे में ज़्यादा जानें.

एक्सएमएल जोड़ना

shr_login_fragment.xml में, दो TextInputLayout एलिमेंट जोड़ें. इनमें से एक एलिमेंट में <LinearLayout> के अंदर TextInputEditText चाइल्ड एलिमेंट होना चाहिए. साथ ही, "SHRINE" लेबल <TextView> के नीचे होना चाहिए:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

ऊपर दिए गए स्निपेट में दो टेक्स्ट फ़ील्ड दिखाए गए हैं. इनमें से हर फ़ील्ड में एक <TextInputLayout> एलिमेंट और एक <TextInputEditText> चाइल्ड शामिल है. हर टेक्स्ट फ़ील्ड के लिए हिंट टेक्स्ट, android:hint एट्रिब्यूट में दिया जाता है.

हमने टेक्स्ट फ़ील्ड के लिए दो नए स्ट्रिंग संसाधन शामिल किए हैं – @string/shr_hint_username और @string/shr_hint_password. इन स्ट्रिंग संसाधनों को देखने के लिए, strings.xml खोलें.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

इनपुट की पुष्टि करने की सुविधा जोड़ना

TextInputLayout कॉम्पोनेंट में, गड़बड़ी के बारे में जानकारी देने की सुविधा पहले से मौजूद होती है.

गड़बड़ी के बारे में जानकारी दिखाने के लिए, shr_login_fragment.xml में ये बदलाव करें:

पासवर्ड TextInputLayout एलिमेंट पर, app:errorEnabled एट्रिब्यूट को true पर सेट करें. इससे टेक्स्ट फ़ील्ड के नीचे मौजूद गड़बड़ी के मैसेज के लिए, अतिरिक्त पैडिंग जुड़ जाएगी.
Password TextInputEditText एलिमेंट पर, android:inputType एट्रिब्यूट को "textPassword" पर सेट करें. इससे पासवर्ड फ़ील्ड में डाला गया टेक्स्ट छिप जाएगा.

इन बदलावों के बाद, shr_login_fragment.xml में मौजूद टेक्स्ट फ़ील्ड कुछ इस तरह दिखने चाहिए:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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>

अब ऐप्लिकेशन चलाकर देखें. आपको "उपयोगकर्ता नाम" और "पासवर्ड" के लिए दो टेक्स्ट फ़ील्ड वाला पेज दिखेगा!

फ़्लोटिंग लेबल ऐनिमेशन देखें:

एमडीसी टेक्स्ट फ़ील्ड में ये सुविधाएं शामिल हैं:

पहले से मौजूद गड़बड़ी की जानकारी दिखाने की सुविधा
app:passwordToggleEnabled का इस्तेमाल करके, पासवर्ड दिखने की सेटिंग को टॉगल करने की सुविधा
app:helperText का इस्तेमाल करके, पहले से मौजूद हेल्पर टेक्स्ट की सुविधा देना
app:counterEnabled और app:counterMaxLength का इस्तेमाल करके, वर्णों की कुल और ज़्यादा से ज़्यादा संख्या दिखाना

4. बटन जोड़ना

इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें". हम MDC Button कॉम्पोनेंट का इस्तेमाल करेंगे. इसमें आइकॉनिक मटीरियल डिज़ाइन इंक रिपल इफ़ेक्ट पहले से मौजूद होता है.

एक्सएमएल जोड़ना

shr_login_fragment.xml में, TextInputLayout एलिमेंट के नीचे मौजूद <LinearLayout> में <RelativeLayout> जोड़ें. इसके बाद, <RelativeLayout> में दो <MaterialButton> एलिमेंट जोड़ें.

इससे मिलने वाली एक्सएमएल फ़ाइल कुछ ऐसी दिखनी चाहिए:

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"
       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.MaterialComponents.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>

हो गया! ऐप्लिकेशन चलाने पर, हर बटन को टैप करने पर इंक रिपल दिखेगा.

5. अगले फ़्रैगमेंट पर जाएं

आखिर में, हम LoginFragment.kt में कुछ Kotlin कोड जोड़ेंगे, ताकि "अगला" बटन को दूसरे फ़्रैगमेंट में ट्रांज़िशन करने के लिए हुक किया जा सके.

आइए, onCreateView() के नीचे LoginFragment.kt में एक प्राइवेट बूलियन isPasswordValid तरीका जोड़ते हैं. इसमें यह तय करने का लॉजिक होगा कि पासवर्ड मान्य है या नहीं. इस डेमो के लिए, हम सिर्फ़ यह पक्का करेंगे कि पासवर्ड कम से कम 8 वर्णों का हो:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

इसके बाद, "अगला" बटन में एक क्लिक लिसनर जोड़ें. यह लिसनर, अभी बनाए गए isPasswordValid() तरीके के आधार पर गड़बड़ी को सेट और साफ़ करता है. onCreateView() में, इस क्लिक लिसनर को इन्फ़्लेटर लाइन और return view लाइन के बीच में रखा जाना चाहिए.

अब पासवर्ड TextInputEditText में एक की लिसनर जोड़ते हैं, ताकि उन मुख्य इवेंट को सुना जा सके जिनसे गड़बड़ी ठीक हो जाएगी. इस लिसनर को भी isPasswordValid() का इस्तेमाल करना चाहिए, ताकि यह पता चल सके कि पासवर्ड मान्य है या नहीं. इसे सीधे तौर पर onCreateView() में क्लिक लिसनर के नीचे जोड़ा जा सकता है.

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

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

अब हम दूसरे फ़्रैगमेंट पर जा सकते हैं. onCreateView() में, गड़बड़ी की पुष्टि होने पर किसी दूसरे फ़्रैगमेंट पर जाने के लिए, OnClickListener को अपडेट करें. आपका clickListener कोड अब ऐसा दिखना चाहिए:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

हमने क्लिक लिसनर के else केस में, (activity as NavigationHost).navigateTo(ProductGridFragment(), false) लाइन जोड़ी है. यह लाइन, MainActivity से navigateTo() वाले तरीके को कॉल करती है, ताकि नए फ़्रैगमेंट – ProductGridFragment पर नेविगेट किया जा सके. फ़िलहाल, यह एक खाली पेज है. आपको MDC-102 में इस पर काम करना होगा.

अब ऐप्लिकेशन बनाएं. इसके लिए, आगे बढ़ें बटन दबाएं.

आपने कर दिखाया! यह स्क्रीन, हमारे अगले कोडलैब की शुरुआती स्क्रीन होगी. इस पर आपको MDC-102 में काम करना होगा.

6. सब हो गया

Android के लिए Material Components लाइब्रेरी की मदद से, बुनियादी एक्सएमएल मार्कअप और Kotlin की करीब 30 लाइनों का इस्तेमाल करके, एक शानदार लॉगिन पेज बनाया जा सकता है. यह पेज, Material Design के दिशा-निर्देशों के मुताबिक होता है. साथ ही, यह सभी डिवाइसों पर एक जैसा दिखता है और एक जैसा काम करता है.

अगले चरण

टेक्स्ट फ़ील्ड और बटन, MDC Android लाइब्रेरी के दो मुख्य कॉम्पोनेंट हैं. हालांकि, इसमें और भी कई कॉम्पोनेंट मौजूद हैं! MDC Android में मौजूद अन्य कॉम्पोनेंट के बारे में जानें. इसके अलावा, MDC 102: Material Design Structure and Layout पर जाकर, टॉप ऐप्लिकेशन बार, कार्ड व्यू, और ग्रिड लेआउट के बारे में जानें. Material Components आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!

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

पूरी तरह सहमत

सहमत

न तो सहमत, न ही असहमत

असहमत

पूरी तरह असहमत

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

पूरी तरह सहमत

सहमत

न तो सहमत, न ही असहमत

असहमत

पूरी तरह असहमत