इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

material.io/develop

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

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

Android ऐप्लिकेशन के लिए, 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 ऐप्लिकेशन बनाने के अपने अनुभव को आप क्या रेटिंग देंगे?

शुरुआती स्तर

सामान्य स्तर

एडवांस लेवल

Android Studio शुरू करना

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

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

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

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

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

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

प्रोजेक्ट में 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.java.shrine डायरेक्ट्री में MainActivity.java खोलें. इसमें यह जानकारी होनी चाहिए:

MainActivity.java

package com.google.codelabs.mdc.java.shrine;

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

public class MainActivity extends AppCompatActivity implements NavigationHost {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.shr_main_activity);

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

   /**
    * Navigate to the given fragment.
    *
    * @param fragment       Fragment to navigate to.
    * @param addToBackstack Whether or not the current fragment should be added to the backstack.
    */
   @Override
   public void navigateTo(Fragment fragment, boolean addToBackstack) {
       FragmentTransaction transaction =
               getSupportFragmentManager()
                       .beginTransaction()
                       .replace(R.id.container, fragment);

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

       transaction.commit();
   }
}

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

आपको onCreate(), में दिखेगा कि MainActivity.java, 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.java खोलते हैं.

LoginFragment.java

package com.google.codelabs.mdc.java.shrine;

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

/**
* Fragment representing the login screen for Shrine.
*/
public class LoginFragment extends Fragment {

   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment
       View view = inflater.inflate(R.layout.shr_login_fragment, container, false);

       // Snippet from "Navigate to the next Fragment" section goes here.

       return view;
   }

   // "isPasswordValid" from "Navigate to the next Fragment" section method goes here
}

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" />

       <!-- Snippet from "Add text fields" section goes here. -->

       <!-- Snippet from "Add buttons" section goes here. -->

   </LinearLayout>
</ScrollView>

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

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

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

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

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

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

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

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

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"
       android:inputType="text"
       android:maxLines="1" />
</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 एट्रिब्यूट को सही पर सेट करें. इससे टेक्स्ट फ़ील्ड के नीचे मौजूद गड़बड़ी के मैसेज के लिए अतिरिक्त पैडिंग जुड़ जाएगी.
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"
       android:inputType="text"
       android:maxLines="1" />
</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 का इस्तेमाल करके, वर्णों की कुल और ज़्यादा से ज़्यादा संख्या दिखाना

इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें". हम 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>

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

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

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

LoginFragment.java

/*
   In reality, this will have more complex logic including, but not limited to, actual
   authentication of the username and password.
*/
private boolean isPasswordValid(@Nullable Editable text) {
   return text != null && text.length() >= 8;
}

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

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

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

LoginFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   // Inflate the layout for this fragment
   View view = inflater.inflate(R.layout.shr_login_fragment, container, false);
   final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
   final TextInputEditText passwordEditText = view.findViewById(R.id.password_edit_text);
   MaterialButton nextButton = view.findViewById(R.id.next_button);

   // Set an error if the password is less than 8 characters.
   nextButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           if (!isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(getString(R.string.shr_error_password));
           } else {
               passwordTextInput.setError(null); // Clear the error
           }
       }
   });

   // Clear the error once more than 8 characters are typed.
   passwordEditText.setOnKeyListener(new View.OnKeyListener() {
       @Override
       public boolean onKey(View view, int i, KeyEvent keyEvent) {
           if (isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(null); //Clear the error
           }
           return false;
       }
   });
   return view;
}

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

LoginFragment.java

...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...

आपका क्लिक लिसनर अब ऐसा दिखेगा:

LoginFragment.java

...
MaterialButton nextButton = view.findViewById(R.id.next_button);

// Set an error if the password is less than 8 characters.
nextButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       if (!isPasswordValid(passwordEditText.getText())) {
           passwordTextInput.setError(getString(R.string.shr_error_password));
       } else {
           passwordTextInput.setError(null); // Clear the error
           ((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
       }
   }
});
...

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

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

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

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

अगले चरण

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

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

पूरी तरह सहमत

सहमत

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

असहमत

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

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

पूरी तरह सहमत

सहमत

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

असहमत

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