1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. MDC को Google के इंजीनियरों और यूज़र एक्सपीरियंस (यूएक्स) डिज़ाइनर की टीम ने बनाया है. इसमें कई शानदार और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter.material.io/develop के लिए उपलब्ध है |
MDC-103 कोडलैब में, आपने अपने ऐप्लिकेशन को स्टाइल करने के लिए, मटीरियल कॉम्पोनेंट (एमडीसी) के रंग, एलिवेशन, और टाइपोग्राफ़ी को पसंद के मुताबिक बनाया था.
मटीरियल डिज़ाइन सिस्टम में मौजूद कॉम्पोनेंट, पहले से तय किए गए कुछ टास्क पूरे करता है. साथ ही, इसमें कुछ खास विशेषताएं होती हैं. जैसे, बटन. हालांकि, बटन सिर्फ़ उपयोगकर्ता के लिए कोई कार्रवाई करने का तरीका नहीं है. यह शेप, साइज़, और रंग का विज़ुअल एक्सप्रेशन भी है. इससे उपयोगकर्ता को पता चलता है कि यह इंटरैक्टिव है और इसे छूने या क्लिक करने पर कुछ होगा.
मटीरियल डिज़ाइन के दिशा-निर्देशों में, कॉम्पोनेंट के बारे में डिज़ाइनर के नज़रिए से बताया गया है. इनमें, अलग-अलग प्लैटफ़ॉर्म पर उपलब्ध बुनियादी फ़ंक्शन के साथ-साथ, हर कॉम्पोनेंट को बनाने वाले ऐनाटॉमिक एलिमेंट के बारे में बताया गया है. उदाहरण के लिए, बैकड्रॉप में बैक लेयर और उसका कॉन्टेंट, फ़्रंट लेयर और उसका कॉन्टेंट, मोशन के नियम, और डिसप्ले के विकल्प शामिल होते हैं. इनमें से हर कॉम्पोनेंट को, हर ऐप्लिकेशन की ज़रूरतों, इस्तेमाल के उदाहरणों, और कॉन्टेंट के हिसाब से पसंद के मुताबिक बनाया जा सकता है. ये ज़्यादातर, आपके प्लैटफ़ॉर्म के एसडीके के पारंपरिक व्यू, कंट्रोल, और फ़ंक्शन होते हैं.
Material Design के दिशा-निर्देशों में कई कॉम्पोनेंट के नाम दिए गए हैं. हालांकि, इनमें से सभी कॉम्पोनेंट, दोबारा इस्तेमाल किए जा सकने वाले कोड के लिए सही नहीं हैं. इसलिए, ये MDC में नहीं मिलते. इन अनुभवों को खुद बनाया जा सकता है, ताकि अपने ऐप्लिकेशन को मनमुताबिक स्टाइल दी जा सके. इसके लिए, आपको सिर्फ़ पारंपरिक कोड का इस्तेमाल करना होगा.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको Shrine में बैकड्रॉप जोड़ने का तरीका बताया जाएगा. इससे, एसिमेट्रिकल ग्रिड में दिखाए गए प्रॉडक्ट को कैटगरी के हिसाब से फ़िल्टर किया जाएगा. इनका इस्तेमाल किया जाएगा:
- आकार
- मोशन
- Android SDK की पारंपरिक क्लास
इस कोडलैब में MDC-Android कॉम्पोनेंट
- आकार
आपको इन चीज़ों की ज़रूरत होगी
- Android डेवलपमेंट की बुनियादी जानकारी
- Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां से डाउनलोड करें)
- Android एम्युलेटर या डिवाइस (Android Studio के ज़रिए उपलब्ध है)
- सैंपल कोड (अगला चरण देखें)
Android ऐप्लिकेशन बनाने के अपने अनुभव को आप क्या रेटिंग देंगे?
2. डेवलपमेंट एनवायरमेंट सेट अप करना
क्या आपको MDC-103 से आगे बढ़ना है?
अगर आपने MDC-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 में दिए गए निर्देशों का पालन करें.
प्रोजेक्ट की डिपेंडेंसी जोड़ना
प्रोजेक्ट को 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 ऐप्लिकेशन चलता हुआ दिखेगा.
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 में, AppBarLayout से पहले, अपने रूट FrameLayout में पहले एलिमेंट के तौर पर यह जोड़ें:
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> टैग का इस्तेमाल करके, LinearLayout में जोड़ें. LinearLayout को आपने अभी shr_product_grid_fragment.xml में जोड़ा है:
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 और इसके बाद के वर्शन पर, shr_product_grid_background_shape को आपके NestedScrollView के बैकग्राउंड के तौर पर सेट कर सकते हैं. सबसे पहले, अपने 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() के आखिर में सेट करने के लिए, यहां दिया गया लॉजिक जोड़ें. यह लॉजिक, return स्टेटमेंट से ठीक पहले जोड़ें:
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_branded_menu). इसका इस्तेमाल करने के लिए, shr_product_grid_fragment.xml में जाकर टूलबार को अपडेट करें. साथ ही, 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" />
हम onCreateView() में ProductGridFragment.kt में मौजूद क्लिक लिसनर को फिर से अपडेट करेंगे, ताकि मेन्यू खुला होने और बंद होने पर टूलबार के लिए ड्रॉएबल शामिल किए जा सकें. इसके लिए, यह तरीका अपनाएं:
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. रीकैप
इन चार कोडलैब के दौरान, आपने देखा कि Material Components का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) को खास और बेहतरीन कैसे बनाया जा सकता है. इससे ब्रैंड की पहचान और स्टाइल को दिखाया जा सकता है.
अगले चरण
यह कोडलैब, MDC-104, कोडलैब की इस सीरीज़ को पूरा करता है. MDC-Android कॉम्पोनेंट कैटलॉग पर जाकर, MDC-Android में मौजूद अन्य कॉम्पोनेंट के बारे में भी जाना जा सकता है.
इस कोडलैब में आगे बढ़ने के लिए, अपने Shrine ऐप्लिकेशन में बदलाव करें. इससे बैकड्रॉप मेन्यू से कोई कैटगरी चुनने पर, प्रॉडक्ट की इमेज बदल जाएंगी.
बैकएंड को काम करने के लिए, इस ऐप्लिकेशन को Firebase से कनेक्ट करने का तरीका जानने के लिए, Firebase Android Codelab देखें.