मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. 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/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 में दिए गए निर्देशों का पालन करें.
प्रोजेक्ट की डिपेंडेंसी जोड़ना
प्रोजेक्ट में 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'
}स्टार्टर ऐप्लिकेशन चलाना
|
हो गया! 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()
}
}यह गतिविधि, R.layout.shr_main_activity में तय की गई shr_main_activity.xml लेआउट फ़ाइल दिखाती है.
आपको 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 ऐप्लिकेशन का हिस्सा हैं.
अब आपको स्टार्टर कोड के बारे में पता चल गया है. इसलिए, आइए अपना पहला कॉम्पोनेंट लागू करें.
शुरुआत में, हम अपने लॉगिन पेज पर दो टेक्स्ट फ़ील्ड जोड़ेंगे, ताकि लोग अपना उपयोगकर्ता नाम और पासवर्ड डाल सकें. हम MDC टेक्स्ट फ़ील्ड कॉम्पोनेंट का इस्तेमाल करेंगे. इसमें पहले से मौजूद ऐसी सुविधाएं शामिल हैं जो फ़्लोटिंग लेबल और गड़बड़ी के मैसेज दिखाती हैं.
एक्सएमएल जोड़ना
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" />
</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>अब ऐप्लिकेशन चलाकर देखें. आपको "उपयोगकर्ता नाम" और "पासवर्ड" के लिए दो टेक्स्ट फ़ील्ड वाला पेज दिखेगा!
फ़्लोटिंग लेबल ऐनिमेशन देखें:
इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें". हम 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.kt में कुछ Kotlin कोड जोड़ेंगे, ताकि "अगला" बटन को दूसरे फ़्रैगमेंट में ट्रांज़िशन करने के लिए हुक किया जा सके.
आइए, onCreateView() के नीचे LoginFragment.kt में एक प्राइवेट बूलियन isPasswordValid तरीका जोड़ते हैं. इसमें यह तय करने का लॉजिक होगा कि पासवर्ड मान्य है या नहीं. इस डेमो के लिए, हम सिर्फ़ यह पक्का करेंगे कि पासवर्ड कम से कम आठ वर्णों का हो:
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 में काम करना होगा.
Android लाइब्रेरी के लिए उपलब्ध मटीरियल कॉम्पोनेंट की मदद से, आपने बुनियादी एक्सएमएल मार्कअप और Kotlin की करीब 30 लाइनों का इस्तेमाल करके, एक शानदार लॉगिन पेज बनाया है. यह पेज, मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक है. साथ ही, यह सभी डिवाइसों पर एक जैसा दिखता है और एक जैसा काम करता है.
अगले चरण
टेक्स्ट फ़ील्ड और बटन, MDC Android लाइब्रेरी के दो मुख्य कॉम्पोनेंट हैं. हालांकि, इसमें और भी कई कॉम्पोनेंट शामिल हैं! MDC Android में मौजूद अन्य कॉम्पोनेंट के बारे में जानें. इसके अलावा, MDC 102: Material Design Structure and Layout पर जाकर, टॉप ऐप्लिकेशन बार, कार्ड व्यू, और ग्रिड लेआउट के बारे में जानें. Material Components आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!