1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. MDC को Google के इंजीनियरों और यूज़र एक्सपीरियंस (यूएक्स) डिज़ाइनर की टीम ने बनाया है. इसमें कई शानदार और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter.material.io/develop के लिए उपलब्ध है |
Material Components for Android (MDC Android) कोई नया सिस्टम या फ़्रेमवर्क नहीं है. इसके लिए, आपको अपने ऐप्लिकेशन में कोई बड़ा बदलाव करने की ज़रूरत नहीं है. MDC Android को उन्हीं क्लास और एपीआई पर बनाया गया है जिनके बारे में आपको Android में पहले से पता है. जैसे, AppCompat बटन और टेक्स्ट फ़ील्ड. MDC Android से मिले कॉम्पोनेंट का इस्तेमाल, ज़रूरत के हिसाब से किया जा सकता है. इससे आपके मौजूदा ऐप्लिकेशन के डिज़ाइन में तुरंत सुधार होता है.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको MDC की मदद से फ़ॉर्म में मौजूद कुछ कॉम्पोनेंट को नए कॉम्पोनेंट से बदलना होगा.
इस कोडलैब में MDC-Android कॉम्पोनेंट
- टेक्स्ट फ़ील्ड
- बटन
- मेन्यू
आपको इन चीज़ों की ज़रूरत होगी
- Android डेवलपमेंट की बुनियादी जानकारी
- Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां से डाउनलोड करें)
- Android एम्युलेटर या डिवाइस (Android Studio के ज़रिए उपलब्ध है)
- सैंपल कोड (अगला चरण देखें)
Android ऐप्लिकेशन बनाने के अपने अनुभव को आप क्या रेटिंग देंगे?
2. डेवलपमेंट एनवायरमेंट सेट अप करना
स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन, material-components-android-codelabs-111-starter/kotlin डायरेक्ट्री में मौजूद होता है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.
...या इसे GitHub से क्लोन करें
इस कोडलैब को GitHub से क्लोन करने के लिए, यहां दिए गए निर्देश चलाएं:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Android Studio में स्टार्टर कोड लोड करना
- सेटअप विज़र्ड के पूरा होने और Android Studio में आपका स्वागत है विंडो दिखने के बाद, कोई मौजूदा Android Studio प्रोजेक्ट खोलें पर क्लिक करें. उस डायरेक्ट्री पर जाएं जहां आपने सैंपल कोड इंस्टॉल किया था. इसके बाद, शिपिंग प्रोजेक्ट खोलने के लिए kotlin -> shipping चुनें या अपने कंप्यूटर पर shipping खोजें.
- Android Studio को प्रोजेक्ट बनाने और सिंक करने में कुछ समय लगेगा. Android Studio विंडो में सबसे नीचे मौजूद गतिविधि इंडिकेटर से पता चलता है कि प्रोजेक्ट बनाया जा रहा है और सिंक किया जा रहा है.
- इस समय, Android Studio कुछ बिल्ड गड़बड़ियां दिखा सकता है. ऐसा इसलिए, क्योंकि आपके पास Android SDK या बिल्ड टूल नहीं हैं. जैसे, यहां दिखाया गया है. इन्हें इंस्टॉल/अपडेट करने और अपने प्रोजेक्ट को सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.
स्टार्टर ऐप्लिकेशन चलाना
|
|
हो गया! आपको ऐप्लिकेशन और उसका फ़ॉर्म दिखेगा.
3. टेक्स्ट फ़ील्ड अपडेट करना
Material Design वाले टेक्स्ट फ़ील्ड, सामान्य टेक्स्ट फ़ील्ड की तुलना में इस्तेमाल करने में ज़्यादा आसान होते हैं. आउटलाइन या बैकग्राउंड फ़िल की मदद से हिट ज़ोन तय करने पर, उपयोगकर्ताओं के आपके फ़ॉर्म के साथ इंटरैक्ट करने या ज़्यादा जटिल कॉन्टेंट में टेक्स्ट फ़ील्ड की पहचान करने की संभावना बढ़ जाती है.
MDC-Android इंपोर्ट करें
app मॉड्यूल की build.gradle फ़ाइल पर जाएं और पक्का करें कि dependencies ब्लॉक में MDC Android पर डिपेंडेंसी शामिल हो:
api 'com.google.android.material:material:1.1.0-alpha05'
टेक्स्ट फ़ील्ड की स्टाइल बदलना
shipping_info_activity.xml में, सभी TextInputLayout एक्सएमएल कॉम्पोनेंट में यह स्टाइल जोड़ें:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
हर TextInputLayout ऐसा दिखना चाहिए:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
बनाएं और चलाएं:
एमडीसी में नए डिज़ाइन इस्तेमाल करने के लिए, सभी टेक्स्ट फ़ील्ड अपडेट किए गए हैं.
कोई गड़बड़ी जोड़ना
एमडीसी के टेक्स्ट फ़ील्ड में, गड़बड़ी की जानकारी देने की सुविधा पहले से मौजूद होती है. एमडीसी, आपके टेक्स्ट फ़ील्ड के नीचे लाल रंग का टेक्स्ट जोड़ता है. साथ ही, डेकोरेशन को भी लाल रंग में अपडेट करता है.
ShippingInfoActivity.kt में, onCreate() को अपडेट करें, ताकि टेक्स्ट इनपुट की जांच की जा सके और गड़बड़ियों को सही तरीके से सेट किया जा सके. यह कुछ ऐसा दिखना चाहिए:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
बनाएं और चलाएं. सेव करें पर क्लिक करें. हालांकि, कम से कम एक टेक्स्ट फ़ील्ड को खाली छोड़ दें:
खाली टेक्स्ट फ़ील्ड लाल रंग के होते हैं और उनके नीचे गड़बड़ी का मैसेज लिखा होता है.
4. बटन को अपडेट करना
एमडीसी में ये बटन होते हैं:
- इंक रिपल
- गोल कोने
- थीम बनाने की सुविधा
- पूरी तरह से सटीक लेआउट और टाइपोग्राफ़ी
- इन्हें AppCompatButton (Android की स्टैंडर्ड बटन क्लास) पर बनाया गया है, ताकि आपको अपने कोड में इनका इस्तेमाल करने का तरीका पता हो.
बटन क्लास को बदलना (ज़रूरी नहीं)
डिफ़ॉल्ट रूप से, Material लाइब्रेरी सामान्य बटन को अपने-आप MDC बटन में बदल देती है. हालांकि, आपके पास Button के सभी रेफ़रंस को MaterialButton से बदलने का विकल्प होता है. इससे आपको ऐसे अतिरिक्त तरीकों का ऐक्सेस मिल सकता है जो सिर्फ़ MaterialButton में उपलब्ध हैं. जैसे, कॉर्नर रेडियस बदलना. MDC बटन, प्लग-एंड-प्ले कॉम्पोनेंट होते हैं. आपको सिर्फ़ एक्सएमएल कॉम्पोनेंट के नाम Button को MaterialButton से बदलना है. इसके बाद, MaterialButton पर डिफ़ॉल्ट MaterialButton स्टाइल लागू करनी है.
shipping_info_activity.xml में, बटन को इससे बदलें:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
इन्हें भेजें:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
बनाएं और चलाएं:
5. कार्ड जोड़ें
MaterialCardView, CardView पर बनाया गया एक कॉम्पोनेंट है. इसमें ये शामिल हैं:
- ऊंचाई और स्टाइलिंग की सही जानकारी
- स्ट्रोक की चौड़ाई और रंग एट्रिब्यूट
कॉन्टेंट को कार्ड में रैप करना
अपने कॉन्टेंट वाले LinearLayout को shipping_info_activity.xml में MaterialCardView कॉम्पोनेंट के साथ रैप करें. ऐसा इस तरह करें:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
बनाएं और चलाएं. पूरे फ़ॉर्म को कार्ड में रैप किया जाना चाहिए:
Material CardView कॉम्पोनेंट, आपके कॉन्टेंट को कार्ड में आसानी से रैप करने का एक जाना-पहचाना, लेकिन नया तरीका है.
6. रीकैप
आपने कुछ सामान्य कॉम्पोनेंट बदलकर, तुरंत वैल्यू दिखाई है: टेक्स्ट फ़ील्ड, बटन, कार्ड. इसके लिए, आपको अपने ऐप्लिकेशन को पूरी तरह से रीडिज़ाइन नहीं करना पड़ा. अन्य कॉम्पोनेंट भी काफ़ी फ़र्क़ डाल सकते हैं. जैसे, टॉप ऐप्लिकेशन बार और TabLayout.
अगले चरण
MDC-Android में और भी कॉम्पोनेंट देखे जा सकते हैं. इसके लिए, Android विजेट कैटलॉग पर जाएं.