1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन को लागू कर सकते हैं. एमडीसी को Google में इंजीनियरों और यूएक्स डिज़ाइनर की एक टीम ने बनाया है. इसमें यूज़र इंटरफ़ेस (यूआई) के कई शानदार और काम के कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है.material.io/develop |
एमडीसी-103 कोडलैब में, आपने अपने ऐप्लिकेशन को स्टाइल देने के लिए, मटीरियल कॉम्पोनेंट (एमडीसी) के रंग, एलिवेशन, और टाइपोग्राफ़ी को पसंद के मुताबिक बनाया था.
मटीरियल डिज़ाइन सिस्टम में मौजूद कोई कॉम्पोनेंट, पहले से तय किए गए टास्क का सेट पूरा करता है. साथ ही, उसमें कुछ खास खूबियां होती हैं. जैसे, बटन. हालांकि, बटन सिर्फ़ उपयोगकर्ता के लिए कोई कार्रवाई करने का तरीका नहीं है. यह आकार, साइज़, और रंग का विज़ुअल एक्सप्रेशन भी है. इससे उपयोगकर्ता को पता चलता है कि यह इंटरैक्टिव है और इस पर टैप या क्लिक करने पर कुछ होगा.
मटीरियल डिज़ाइन के दिशा-निर्देशों में, कॉम्पोनेंट के बारे में डिज़ाइनर के नज़रिए से बताया गया है. इनमें, प्लैटफ़ॉर्म पर उपलब्ध बुनियादी फ़ंक्शन के साथ-साथ, हर कॉम्पोनेंट को बनाने वाले ऐनाटॉमिक एलिमेंट के बारे में बताया गया है. उदाहरण के लिए, बैकड्रॉप में बैक लेयर और उसका कॉन्टेंट, फ़्रंट लेयर और उसका कॉन्टेंट, मोशन के नियम, और डिसप्ले के विकल्प शामिल होते हैं. इनमें से हर कॉम्पोनेंट को, हर ऐप्लिकेशन की ज़रूरत, इस्तेमाल के उदाहरण, और कॉन्टेंट के हिसाब से पसंद के मुताबिक बनाया जा सकता है. ये कॉम्पोनेंट, ज़्यादातर आपके प्लैटफ़ॉर्म के एसडीके से लिए गए पारंपरिक व्यू, कंट्रोल, और फ़ंक्शन होते हैं.
मटीरियल डिज़ाइन के दिशा-निर्देशों में कई कॉम्पोनेंट के नाम दिए गए हैं. हालांकि, इनमें से सभी कॉम्पोनेंट, फिर से इस्तेमाल किए जा सकने वाले कोड के लिए सही नहीं होते. इसलिए, ये एमडीसी में नहीं मिलते. अपने ऐप्लिकेशन के लिए, पारंपरिक कोड का इस्तेमाल करके, अपनी पसंद के मुताबिक स्टाइल वाले ये कॉम्पोनेंट बनाए जा सकते हैं.
इस कोडलैब में क्या बनाया जाएगा
इस कोडलैब में, Shrine में बैकड्रॉप जोड़ा जाएगा. इससे, एसिमेट्रिकल ग्रिड में दिखने वाले प्रॉडक्ट को कैटगरी के हिसाब से फ़िल्टर किया जा सकेगा. इसमें इनका इस्तेमाल किया जाएगा:
- आकार
- मोशन
- पारंपरिक Android SDK क्लास
इस कोडलैब में एमडीसी-Android कॉम्पोनेंट
- आकार
आपको इन चीज़ों की ज़रूरत होगी
- Android डेवलपमेंट की बुनियादी जानकारी
- Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां से डाउनलोड करें)
- Android एम्युलेटर या डिवाइस (Android Studio के ज़रिए उपलब्ध)
- सैंपल कोड (अगला चरण देखें)
Android ऐप्लिकेशन बनाने के अपने अनुभव को आप क्या रेटिंग देंगे?
2. अपना डेवलपमेंट एनवायरमेंट सेट अप करने का तरीका
क्या आपने एमडीसी-103 कोडलैब पूरा कर लिया है?
अगर आपने एमडीसी-103 कोडलैब पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होगा. तीसरे चरण पर जाएं.
क्या आपने एमडीसी-103 कोडलैब पूरा नहीं किया है?
स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन, material-components-android-codelabs-104-starter/kotlin डायरेक्ट्री में मौजूद है. शुरू करने से पहले, पक्का करें कि आपने 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 में स्टार्टर कोड लोड करना
- सेटअप विज़र्ड पूरा होने के बाद, Android Studio में आपका स्वागत है विंडो दिखने पर, Android Studio का कोई मौजूदा प्रोजेक्ट खोलें पर क्लिक करें. उस डायरेक्ट्री पर जाएं जहां आपने सैंपल कोड इंस्टॉल किया था. इसके बाद, शिपिंग प्रोजेक्ट खोलने के लिए kotlin -> shrine को चुनें. इसके अलावा, अपने कंप्यूटर पर shrine खोजें.
- Android Studio विंडो में सबसे नीचे मौजूद, गतिविधि इंडिकेटर से पता चलता है कि Android Studio, प्रोजेक्ट को बिल्ड और सिंक कर रहा है. इसमें कुछ समय लग सकता है.
- इस दौरान, Android Studio कुछ बिल्ड गड़बड़ियां दिखा सकता है, क्योंकि आपके पास Android SDK या बिल्ड टूल नहीं हैं. जैसे, नीचे दिखाई गई गड़बड़ी. इन्हें इंस्टॉल/अपडेट करने और अपने प्रोजेक्ट को सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.
प्रोजेक्ट की डिपेंडेंसी जोड़ना
प्रोजेक्ट के लिए, एमडीसी Android सपोर्ट लाइब्रेरी पर डिपेंडेंसी की ज़रूरत होती है. डाउनलोड किए गए सैंपल कोड में, यह डिपेंडेंसी पहले से मौजूद होनी चाहिए. हालांकि, पक्का करने के लिए, यहां दिया गया तरीका अपनाएं.
appमॉड्यूल कीbuild.gradleफ़ाइल पर जाएं और पक्का करें किdependenciesब्लॉक में, एमडीसी 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 ऐप्लिकेशन चलता हुआ दिखेगा.
3. बैकड्रॉप मेन्यू जोड़ना
बैकड्रॉप, किसी ऐप्लिकेशन की सबसे पीछे वाली सतह होती है. यह अन्य सभी कॉन्टेंट और कॉम्पोनेंट के पीछे दिखती है. यह दो सतहों से बनी होती है: बैक लेयर (जिसमें कार्रवाइयां और फ़िल्टर दिखते हैं) और फ़्रंट लेयर (जिसमें कॉन्टेंट दिखता है). बैकड्रॉप का इस्तेमाल, इंटरैक्टिव जानकारी और कार्रवाइयां दिखाने के लिए किया जा सकता है. जैसे, नेविगेशन या कॉन्टेंट फ़िल्टर.
ग्रिड कॉन्टेंट छिपाना
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 में, अपने रूट FrameLayout में AppBarLayout से पहले, यह कोड जोड़ें:
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> टैग का इस्तेमाल करके, इस सूची को shr_product_grid_fragment.xml में जोड़े गए LinearLayout में जोड़ें:
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>
बिल्ड करें और चलाएं. आपकी होम स्क्रीन ऐसी दिखनी चाहिए:
अब हमने अपना बैकड्रॉप सेट अप कर लिया है. आइए, उस कॉन्टेंट को वापस लाएं जिसे हमने पहले छिपाया था.
4. कोई आकार जोड़ना
इस कोडलैब में 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.kt में प्रोग्राम के ज़रिए बैकग्राउंड सेट करें. onCreateView() के आखिर में, रिटर्न स्टेटमेंट से ठीक पहले, बैकग्राउंड सेट करने के लिए यह लॉजिक जोड़ें:
ProductGridFragment.kt
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}
आखिर में, हम productGridBackgroundColor कलर रिसॉर्स (इसका इस्तेमाल, पसंद के मुताबिक आकार वाले बैकग्राउंड के लिए भी किया जाता है) को इस तरह अपडेट करेंगे:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
बिल्ड करें और चलाएं:
हमने Shrine की मुख्य सतह को, पसंद के मुताबिक स्टाइल वाला आकार दिया है. सतह के एलिवेशन की वजह से, उपयोगकर्ताओं को दिख सकता है कि सामने वाली सफ़ेद लेयर के ठीक पीछे कुछ है. आइए, मोशन जोड़ें, ताकि उपयोगकर्ताओं को पता चल सके कि वहां क्या है: मेन्यू.
5. मोशन जोड़ना
मोशन, आपके ऐप्लिकेशन को दिलचस्प बनाने का एक तरीका है. मोशन, बड़ा और नाटकीय, हल्का और कम, या इन दोनों के बीच का हो सकता है. आपको जिस तरह का मोशन इस्तेमाल करना है वह स्थिति के हिसाब से सही होना चाहिए. बार-बार की जाने वाली सामान्य कार्रवाइयों पर लागू होने वाला मोशन छोटा और हल्का होना चाहिए, ताकि ये कार्रवाइयां नियमित तौर पर ज़्यादा समय न लें. अन्य स्थितियों में, जैसे कि पहली बार कोई उपयोगकर्ता ऐप्लिकेशन खोलता है, तो मोशन ज़्यादा आकर्षक हो सकता है. साथ ही, इससे उपयोगकर्ता को आपके ऐप्लिकेशन का इस्तेमाल करने का तरीका सिखाने में मदद मिल सकती है.
मेन्यू बटन में, दिखने वाला मोशन जोड़ना
मोशन, सामने मौजूद आकार का सीधे नीचे की ओर जाना है. हमने आपके लिए पहले से ही एक क्लिक लिसनर दिया है. इससे शीट के लिए ट्रांसलेशन ऐनिमेशन पूरा होगा. यह लिसनर, NavigationIconClickListener.kt में मौजूद है. हम इस क्लिक लिसनर को ProductGridFragement के onCreateView() में, उस सेक्शन में सेट कर सकते हैं जो टूलबार को सेट अप करने के लिए ज़िम्मेदार है. टूलबार के मेन्यू आइकॉन पर क्लिक लिसनर सेट करने के लिए, यह लाइन जोड़ें:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))
अब यह सेक्शन ऐसा दिखना चाहिए:
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))
बिल्ड करें और चलाएं. मेन्यू बटन दबाएं:
नेविगेशन मेन्यू आइकॉन को फिर से दबाने पर, यह छिप जाना चाहिए.
फ़्रंट लेयर के मोशन में बदलाव करना
मोशन, अपने ब्रैंड को दिखाने का एक शानदार तरीका है. आइए, देखें कि अलग टाइमिंग कर्व का इस्तेमाल करने पर, दिखने वाला ऐनिमेशन कैसा दिखता है.
ProductGridFragment.kt में, अपने क्लिक लिसनर को अपडेट करें, ताकि वह आपके नेविगेशन आइकॉन के क्लिक लिसनर को इंटरपोलेटर पास कर सके. इसके लिए, यह तरीका अपनाएं:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
इससे अलग इफ़ेक्ट मिलता है, है न?
6. ब्रैंड वाला आइकॉन
ब्रैंड वाले आइकॉनोग्राफ़ी, जाने-पहचाने आइकॉन पर भी लागू होती है. आइए, दिखने वाले आइकॉन को पसंद के मुताबिक बनाएं और उसे अपने टाइटल के साथ मर्ज करें, ताकि यह ब्रैंड वाला और अलग दिखे.
मेन्यू बटन का आइकॉन बदलना
मेन्यू बटन को बदलकर, ऐसा आइकॉन दिखाएं जिसमें डायमंड डिज़ाइन शामिल हो. shr_product_grid_fragment.xml में, अपने टूलबार को अपडेट करें, ताकि वह ब्रैंड वाले नए आइकॉन (shr_branded_menu) का इस्तेमाल कर सके. यह आइकॉन हमने आपके लिए दिया है. साथ ही, 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" />
हम ProductGridFragment.kt में, onCreateView() में मौजूद अपने क्लिक लिसनर को एक बार फिर से अपडेट करेंगे, ताकि मेन्यू खुलने और बंद होने पर, टूलबार के लिए ड्रॉएबल लिए जा सकें. इसके लिए, यह तरीका अपनाएं:
ProductGridFragment .kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
activity!!,
view.product_grid,
AccelerateDecelerateInterpolator(),
ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon
बिल्ड करें और चलाएं:
बढ़िया! जब बैकड्रॉप को दिखाया जा सकता है, तब डायमंड मेन्यू आइकॉन दिखता है. जब मेन्यू को छिपाया जा सकता है, तब इसकी जगह बंद करें आइकॉन दिखता है.
7. रीकैप
इन चार कोडलैब के दौरान, आपने देखा कि मटीरियल कॉम्पोनेंट का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) के ऐसे शानदार अनुभव कैसे बनाए जा सकते हैं जो किसी ब्रैंड की पहचान और स्टाइल को दिखाते हैं.
अगले चरण
यह कोडलैब, एमडीसी-104, कोडलैब की इस सीरीज़ को पूरा करता है. एमडीसी-Android कॉम्पोनेंट कैटलॉग पर जाकर, एमडीसी-Android में मौजूद अन्य कॉम्पोनेंट के बारे में भी जाना जा सकता है.
इस कोडलैब के साथ एक और चुनौती के लिए, अपने Shrine ऐप्लिकेशन में बदलाव करें, ताकि बैकड्रॉप मेन्यू से कोई कैटगरी चुनने पर, प्रॉडक्ट की इमेज बदल जाएं.
काम करने वाले बैकएंड के लिए, इस ऐप्लिकेशन को Firebase से कनेक्ट करने का तरीका जानने के लिए, Firebase Android कोडलैब देखें.