मटीरियल कॉम्पोनेंट (एमडीसी) डेवलपर को मटीरियल डिज़ाइन लागू करने में मदद करता है. Google के इंजीनियर और UX डिज़ाइनर की टीम ने, MDC में दर्जनों खूबसूरत और फ़ंक्शनल यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बनाए हैं. यह Android, iOS, वेब, और Fluter के लिए उपलब्ध है. material.io/develop |
कोडलैब MDC-103 में, अपने ऐप्लिकेशन को स्टाइल देने के लिए, मटीरियल कॉम्पोनेंट (एमडीसी) के रंग, ऊंचाई, और टाइपोग्राफ़ी को पसंद के मुताबिक बनाया गया था.
मटीरियल डिज़ाइन का एक कॉम्पोनेंट, पहले से तय किए गए टास्क का सेट इस्तेमाल करता है. साथ ही, इसमें बटन जैसी कुछ विशेषताएं भी होती हैं. हालांकि, बटन एक उपयोगकर्ता के लिए कोई कार्रवाई करने का एक ज़रिया नहीं है. यह भी साइज़, साइज़, और रंग का एक विज़ुअल एक्सप्रेशन होता है, जो उपयोगकर्ता को यह बताता है कि यह इंटरैक्टिव है और छूकर या क्लिक करके ऐसा हो सकता है.
मटीरियल डिज़ाइन के दिशा-निर्देश, डिज़ाइनर के नज़रिए से बताते हैं. वे सभी प्लैटफ़ॉर्म पर उपलब्ध बुनियादी सुविधाओं के साथ-साथ हर कॉम्पोनेंट के बारे में जानकारी देने वाले एलिमेंट के बारे में बताते हैं. उदाहरण के लिए, किसी बैकग्राउंड में एक बैक लेयर और उसका कॉन्टेंट, सामने वाली लेयर और उसका कॉन्टेंट, मोशन के नियम, और डिसप्ले के विकल्प होते हैं. इनमें से हर कॉम्पोनेंट, हर ऐप्लिकेशन की ज़रूरतों, इस्तेमाल के उदाहरणों, और कॉन्टेंट के हिसाब से बनाया जा सकता है. ये हिस्से, आपके प्लैटफ़ॉर्म के SDK टूल की मदद से बनाए गए ज़्यादातर व्यू, पारंपरिक व्यू, कंट्रोल, और फ़ंक्शन हैं.
हालांकि, मटीरियल डिज़ाइन के दिशा-निर्देश कई कॉम्पोनेंट को नाम देते हैं, लेकिन सभी का फिर से इस्तेमाल किए जा सकने वाले कोड सही नहीं हैं, इसलिए वे MDC में नहीं मिलते. अपने ऐप्लिकेशन के लिए पसंद के मुताबिक स्टाइल पाने के लिए, आप खुद ये अनुभव बना सकते हैं. इसके लिए आपको पारंपरिक कोड का इस्तेमाल करना होगा.
आप क्या बनाते हैं
इस कोडलैब में आप 31 को बैकग्राउंड में जोड़ेंगे. ऐसा करने से, प्रॉडक्ट के कैटगरी के हिसाब से, मुश्किल ग्रिड में दिखाए गए प्रॉडक्ट को फ़िल्टर किया जाएगा. आप इनका इस्तेमाल कर पाएंगे:
- आकार
- गति
- परंपरागत Android SDK क्लास
इस कोडलैब में MDC-Android कॉम्पोनेंट
- आकार
आपको क्या चाहिए
- Android डेवलपमेंट की बुनियादी जानकारी
- Android Studio (अगर आपके पास पहले से #39 नहीं है, तो इसे यहां डाउनलोड करें)
- Android एम्युलेटर या डिवाइस (Android Studio से उपलब्ध)
- सैंपल कोड (अगला चरण देखें)
आप Android ऐप्लिकेशन बनाने के अपने अनुभव को क्या रेटिंग देंगे?
क्या आप 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 -> मंदिर (या srin ) खोजें.
- Android Studio के विंडो में सबसे नीचे दिए गए गतिविधि इंडिकेटर की मदद से, प्रोजेक्ट को बनाने और सिंक करने के लिए Android Studio को थोड़ा इंतज़ार करें.
- इस समय, Android Studio कुछ बिल्ड गड़बड़ियों को बढ़ा सकता है, क्योंकि इनमें Android SDK टूल या बिल्ड टूल मौजूद नहीं है, जैसा कि नीचे दिखाया गया है. इन्हें इंस्टॉल/अपडेट करने और अपना प्रोजेक्ट सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.
प्रोजेक्ट डिपेंडेंसी जोड़ना
प्रोजेक्ट को MDC Android सहायता लाइब्रेरी पर निर्भर करना होगा. आपने जो सैंपल कोड डाउनलोड किया है उसमें यह डिपेंडेंसी पहले से शामिल होनी चाहिए. हालांकि, बेहतर होगा कि आप इन तरीकों को अपनाएं.
appमॉड्यूल'sbuild.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'
}
स्टार्टर ऐप्लिकेशन चलाना
|
खाता ट्रांसफ़र हो गया है! आपको अपने डिवाइस पर धार्मिक ऐप्लिकेशन चल रहा होगा.
बैकग्राउंड में, ऐप्लिकेशन का सबसे पीछे वाला हिस्सा होता है जो अन्य कॉन्टेंट और कॉम्पोनेंट के पीछे दिखता है. इसमें दो प्लैटफ़ॉर्म हैं: पीछे की लेयर (जो कार्रवाइयां और फ़िल्टर दिखाती है) और सामने की लेयर (जो कॉन्टेंट दिखाती है). नेविगेशन या कॉन्टेंट फ़िल्टर जैसी इंटरैक्टिव जानकारी और कार्रवाइयां दिखाने के लिए, बैकग्राउंड का इस्तेमाल किया जा सकता है.
ग्रिड कॉन्टेंट छिपाएं
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>बहुत खूब! आपने मंदिर के बैकग्राउंड में एक खूबसूरत बैकग्राउंड जोड़ा है. इसके बाद, हम एक मेन्यू जोड़ेंगे.
मेन्यू जोड़ना
मेन्यू, टेक्स्ट बटन की एक सूची होती है. हम यहां #39;जोड़ेंगे.
अपनी 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>बनाएं और चलाएं. आपकी होम स्क्रीन कुछ ऐसी दिखेगी:
अब हमने अपना बैकग्राउंड सेट अप कर लिया है. आइए, वह कॉन्टेंट वापस लाएं जिसे हमने पहले छिपाया था.
इससे पहले कि हमने इस कोडलैब में मंदिर में कोई भी बदलाव किया हो, मुख्य प्रॉडक्ट कॉन्टेंट सबसे पीछे के प्लैटफ़ॉर्म पर मौजूद था. एक बैकग्राउंड जोड़कर, इस कॉन्टेंट को अब ज़्यादा अहमियत दी जाती है, क्योंकि यह उस बैकग्राउंड के सामने दिखता है.
नई लेयर जोड़ना
हमें प्रॉडक्ट ग्रिड लेयर फिर से दिखाना चाहिए. अपने 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 और इसके बाद के वर्शन पर सही तरीके से दिखता है. हम आपके NestedScrollView पर सिर्फ़ Android Marshmallow और इसके बाद के वर्शन के लिए, 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>बनाएं और चलाएं:
हमने मंदिर को इसकी मुख्य सतह पर पसंद के मुताबिक स्टाइल दिया है. सतह पर ऊंचाई होने की वजह से, उपयोगकर्ता देख सकते हैं कि सामने के हिस्से की सफ़ेद लेयर के पीछे कुछ खास है. आइए मोशन जोड़ें, ताकि उपयोगकर्ता यह देख सकें कि मेन्यू में क्या है.
Motion एक ऐसा तरीका है जिससे आप अपने ऐप्लिकेशन में बदलाव कर सकते हैं. मोशन बड़ी और नाटकीय, मामूली, और कम से कम या बीच में कहीं भी हो सकता है. आप जिस तरह की हलचल इस्तेमाल करते हैं वह स्थिति के हिसाब से सही हो. नियमित तौर पर की जाने वाली कार्रवाइयों पर लागू की गई मोशन, छोटी और बारीक होनी चाहिए. इसलिए, वे नियमित तौर पर ज़्यादा समय नहीं लेती हैं. दूसरी स्थितियां, जैसे कि उपयोगकर्ता के पहली बार ऐप्लिकेशन खोलने पर, वह ज़्यादा ध्यान खींच सकता है. साथ ही, यह उपयोगकर्ता को आपके ऐप्लिकेशन के इस्तेमाल के बारे में जानकारी देने में मदद कर सकता है.
मेन्यू बटन में मोशन फ़ोटो जोड़ना
मोशन का मतलब है कि सामने का आकार सीधे नीचे की ओर ले जा रहा है. हमने पहले ही आपको एक क्लिक लिसनर दिया है, जो NavigationIconClickListener.kt में शीट के लिए अनुवाद ऐनिमेशन को पूरा करेगा. टूलबार को सेट अप करने के लिए ज़िम्मेदार सेक्शन में, हम इस क्लिक लिसनर को ProductGridFragement's 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 में अपने क्लिक लिसनर को अपडेट करें और #39; क्लिक लिसनर का इस्तेमाल इस तरह करें:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
इससे एक अलग असर पड़ता है, क्या यह' नहीं है?
ब्रैंडेड आइकॉनोग्राफ़ी, जाने-पहचाने आइकॉन पर भी लागू होती है. आइए, यूआरएल को देखने का आइकॉन अपनी पसंद के मुताबिक बनाते हैं और इसे एक खास, ब्रैंडेड लुक के लिए हमारे शीर्षक के साथ मर्ज करते हैं.
मेन्यू बटन आइकॉन बदलना
मेन्यू बटन बदलकर, वह आइकॉन दिखाएं जिसमें हीरे का डिज़ाइन शामिल है. 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
बनाएं और चलाएं:
बढ़िया! जब बैकग्राउंड दिखाया जा सकता है, तो हीरे के मेन्यू का आइकॉन दिखता है. मेन्यू को छिपाने पर, इसके बजाय 'बंद करें' आइकॉन दिखता है.
इन चार कोडलैब के दौरान, आपने देखा है कि कैसे मटीरियल कॉम्पोनेंट इस्तेमाल करके, उपयोगकर्ता के ब्रैंड की खासियत और स्टाइल के बारे में बताया जाता है.
अगले कदम
यह कोडलैब, MDC-104, कोडलैब के इस क्रम को पूरा करता है. आप MDC-Android कॉम्पोनेंट कैटलॉग पर जाकर, MDC-Android में और भी कॉम्पोनेंट देख सकते हैं.
इस कोडलैब के साथ और चुनौती पाने के लिए, अपने मठ के ऐप्लिकेशन में बदलाव करें. इससे, बैकग्राउंड मेन्यू से कोई कैटगरी चुनने पर, आपको प्रॉडक्ट की इमेज दिखेंगी.
काम करने वाले बैकएंड के लिए, इस ऐप्लिकेशन को Firebase से कनेक्ट करने का तरीका जानने के लिए, Firebase Android कोडलैब देखें.