MDC-102 Android: मटीरियल स्ट्रक्चर और लेआउट (Java)

MDC-102 Android:
मटीरियल स्ट्रक्चर और लेआउट (Java)

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

subjectपिछली बार अक्टू॰ 12, 2020 को अपडेट किया गया
account_circleAvigail Fohrman, Nick Rout ने लिखा

1. परिचय

logo_components_color_2x_web_96dp.png

मटीरियल कॉम्पोनेंट (एमडीसी), मटीरियल डिज़ाइन लागू करने में डेवलपर की मदद करते हैं. Google के इंजीनियरों और UX डिज़ाइनर की टीम ने बनाया है. एमडीसी में दर्जनों खूबसूरत और काम करने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट हैं. यह Android, iOS, वेब, और Flutter.material.io/प्रॉडक्ट के लिए उपलब्ध है

कोडलैब MDC-101 में, आपने लॉगिन पेज बनाने के लिए दो मटीरियल कॉम्पोनेंट (एमडीसी) का इस्तेमाल किया: टेक्स्ट फ़ील्ड और बटन. आइए, अब नेविगेशन, स्ट्रक्चर, और डेटा जोड़कर इस बुनियाद के बारे में और जानें.

आपको क्या बनाना होगा

इस कोडलैब में, Shरीन नाम के ऐप्लिकेशन की होम स्क्रीन बनाई जा सकती है. यह एक ई-कॉमर्स ऐप्लिकेशन है जो कपड़े और घर का सामान बेचता है. इसमें ये चीज़ें शामिल होंगी:

  • टॉप ऐप्लिकेशन बार
  • प्रॉडक्ट की ग्रिड लिस्ट

249db074eff043f4.png

इस कोडलैब में मौजूद MDC-Android कॉम्पोनेंट

  • AppBarLayout
  • MaterialCardView

आपको इन चीज़ों की ज़रूरत होगी

  • Android डेवलपमेंट की बुनियादी जानकारी
  • Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां डाउनलोड करें)
  • Android Emulator या डिवाइस (Android Studio में उपलब्ध)
  • सैंपल कोड (अगला चरण देखें)

Android ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

2. अपना डेवलपमेंट एनवायरमेंट सेट अप करें

क्या MDC-101 से आगे बढ़ना है?

अगर आपने MDC-101 पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. तीसरे चरण पर जाएं: सबसे ऊपर मौजूद ऐप्लिकेशन बार जोड़ना.

क्या आपको नए सिरे से शुरुआत करनी है?

स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना

स्टार्टर ऐप्लिकेशन, material-components-android-codelabs-102-starter/java डायरेक्ट्री में मौजूद है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.

...या GitHub से क्लोन करें

GitHub से इस कोडलैब को क्लोन करने के लिए, ये कमांड चलाएं:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 102-starter

Android Studio में स्टार्टर कोड लोड करना

  1. सेटअप विज़र्ड पूरा होने और Android Studio में आपका स्वागत है विंडो दिखने के बाद, Android Studio का कोई मौजूदा प्रोजेक्ट खोलें पर क्लिक करें. उस डायरेक्ट्री पर जाएं जहां आपने सैंपल कोड इंस्टॉल किया था. इसके बाद, श्राइन प्रोजेक्ट खोलने के लिए java -> मंदिर या अपने कंप्यूटर पर श्राइन खोजें.
  2. प्रोजेक्ट को बनाने और सिंक करने के लिए, Android Studio को कुछ समय इंतज़ार करें. इस प्रोजेक्ट को Android Studio की विंडो में सबसे नीचे, गतिविधि की जानकारी देने वाले इंडिकेटर में दिखाया गया है.
  3. इस दौरान, Android Studio में कुछ बिल्ड गड़बड़ियां दिख सकती हैं. ऐसा इसलिए होता है, क्योंकि आपके पास Android SDK या बिल्ड टूल नहीं हैं. जैसे, यहां दिखाया गया टूल. इन्हें इंस्टॉल/अपडेट करने और अपने प्रोजेक्ट को सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें.

F5H6srsw_5xOPGFpKrm1RwgewatxA_HUbDI1PWoQUAoJcT6DpfBOkAYwq3S-2vUHvweUaFgAmG7BtUKkGouUbhTwXQh53qec8tO5eVecdlo7QIoLc8rNxFEBb8l7RlS-KzBbZOzVhA

प्रोजेक्ट की डिपेंडेंसी जोड़ना

प्रोजेक्ट के लिए, एमडीसी Android सपोर्ट लाइब्रेरी पर निर्भर होना ज़रूरी है. आपने जो सैंपल कोड डाउनलोड किया है उसमें यह डिपेंडेंसी पहले से मौजूद होनी चाहिए. हालांकि, पक्का करने के लिए यहां दिया गया तरीका अपनाएं.

  1. app मॉड्यूल की build.gradle फ़ाइल पर जाएं और पक्का करें कि dependencies ब्लॉक में MDC Android पर डिपेंडेंसी शामिल हो:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (ज़रूरी नहीं) अगर ज़रूरी हो, तो नीचे दी गई डिपेंडेंसी जोड़ने और प्रोजेक्ट को सिंक करने के लिए, 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'
}

स्टार्टर ऐप्लिकेशन चलाएं

  1. पक्का करें कि Run / Play बटन के बाईं ओर मौजूद बिल्ड कॉन्फ़िगरेशन app हो.
  2. ऐप्लिकेशन बनाने और चलाने के लिए, हरे रंग के चालू करें / चलाएं बटन को दबाएं.
  3. अगर आपके डिवाइसों की सूची में पहले से ही कोई Android डिवाइस मौजूद है, तो डिप्लॉयमेंट टारगेट चुनें विंडो में जाकर, आठवें चरण पर जाएं. अगर ऐसा नहीं है, तो नया वर्चुअल डिवाइस बनाएं पर क्लिक करें.
  4. हार्डवेयर चुनें स्क्रीन पर, कोई फ़ोन डिवाइस चुनें, जैसे कि Pixel 2. इसके बाद, आगे बढ़ें पर क्लिक करें.
  5. सिस्टम इमेज स्क्रीन पर, Android का सबसे नया वर्शन चुनें. हमारा सुझाव है कि एपीआई लेवल का सबसे नया वर्शन चुनें. अगर उसे इंस्टॉल नहीं किया गया है, तो दिखने वाले डाउनलोड करें लिंक पर क्लिक करें और डाउनलोड पूरा करें.
  6. आगे बढ़ें पर क्लिक करें.
  7. Android वर्चुअल डिवाइस (AVD) स्क्रीन पर, सेटिंग में कोई बदलाव न करें और पूरा करें पर क्लिक करें.
  8. डिप्लॉयमेंट टारगेट डायलॉग से कोई Android डिवाइस चुनें.
  9. ठीक है पर क्लिक करें.
  10. Android Studio, ऐप्लिकेशन बनाता है, उसे डिप्लॉय करता है, और टारगेट किए गए डिवाइस पर अपने-आप खोलता है.

हो गया! आपको MDC-101 कोडलैब से, Shrine का लॉगिन पेज दिखेगा.

4cb0c218948144b4.png

अब जब लॉगिन स्क्रीन अच्छी लग रही है, ऐप्लिकेशन को कुछ प्रॉडक्ट से पॉप्युलेट करते हैं.

3. सबसे ऊपर ऐप्लिकेशन बार जोड़ना

लॉगिन पेज को बंद करने पर, होम स्क्रीन दिखती है. साथ ही, स्क्रीन पर "हो गया!" मैसेज दिखता है. बहुत बढ़िया! हालांकि, अब हमारे उपयोगकर्ता के पास कोई कार्रवाई करने या यह जानने की सुविधा नहीं है कि वे ऐप्लिकेशन में कहां हैं. इसमें मदद करने के लिए, आइए नेविगेशन जोड़ें.

Material Design में नेविगेशन पैटर्न उपलब्ध होते हैं, जिनसे यह पक्का होता है कि ऐप्लिकेशन को आसानी से इस्तेमाल किया जा सकता है. सबसे अहम नेविगेशन कॉम्पोनेंट में से एक, टॉप ऐप्लिकेशन बार है.

नेविगेशन की सुविधा देने और उपयोगकर्ताओं को अन्य कार्रवाइयों का तुरंत ऐक्सेस देने के लिए, सबसे ऊपर ऐप्लिकेशन बार जोड़ें.

AppBar विजेट जोड़ना

shr_product_grid_fragment.xml में, "आपने यह कर लिया!" वाले <LinearLayout> टैग को मिटाएं TextView को हटाकर, इसे इनसे बदलें:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   
android:layout_width="match_parent"
   
android:layout_height="wrap_content">

   
<androidx.appcompat.widget.Toolbar
       
android:id="@+id/app_bar"
       
style="@style/Widget.Shrine.Toolbar"
       
android:layout_width="match_parent"
       
android:layout_height="?attr/actionBarSize"
       
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

आपका shr_product_grid_fragment.xml ऐसा दिखना चाहिए:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   
tools:context=".ProductGridFragment">

   
<com.google.android.material.appbar.AppBarLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content">

       
<androidx.appcompat.widget.Toolbar
           
android:id="@+id/app_bar"
           
style="@style/Widget.Shrine.Toolbar"
           
android:layout_width="match_parent"
           
android:layout_height="?attr/actionBarSize"
           
app:title="@string/shr_app_name" />
   
</com.google.android.material.appbar.AppBarLayout>
 
</FrameLayout>

कई ऐप्लिकेशन बार में टाइटल के आगे एक बटन होता है. आइए, हम अपने मेन्यू में एक आइकॉन जोड़ते हैं.

नेविगेशन आइकॉन जोड़ना

shr_product_grid_fragment.xml में रहते हुए, Toolbar एक्सएमएल कॉम्पोनेंट (जिसे आपने अभी-अभी अपने लेआउट में जोड़ा है) में यह जानकारी जोड़ें:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

आपका shr_product_grid_fragment.xml ऐसा दिखना चाहिए:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   
tools:context=".ProductGridFragment">
 
   
<com.google.android.material.appbar.AppBarLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content">

       
<androidx.appcompat.widget.Toolbar
           
android:id="@+id/app_bar"
           
style="@style/Widget.Shrine.Toolbar"
           
android:layout_width="match_parent"
           
android:layout_height="?attr/actionBarSize"
           
app:navigationIcon="@drawable/shr_menu"
           
app:title="@string/shr_app_name" />
   
</com.google.android.material.appbar.AppBarLayout>
 
</FrameLayout>

कार्रवाई के बटन जोड़ना और सबसे ऊपर मौजूद ऐप्लिकेशन बार को स्टाइल करना

ऐप्लिकेशन बार के आखिर में भी बटन जोड़े जा सकते हैं. Android में, इन्हें ऐक्शन बटन कहा जाता है.

हम सबसे ऊपर मौजूद ऐप्लिकेशन बार को स्टाइल करेंगे और प्रोग्राम के हिसाब से उसके मेन्यू में ऐक्शन बटन जोड़ेंगे.

सबसे पहले, टूलबार सेट अप करने का तरीका बनाते हैं. इस तरीके को id का इस्तेमाल करके, टूलबार का रेफ़रंस मिलना चाहिए. साथ ही, getActivity() का इस्तेमाल करके, गतिविधि का रेफ़रंस भी मिलना चाहिए. अगर गतिविधि खाली नहीं है, तो setSupportActionBar का इस्तेमाल करके, Toolbar को ActionBar के तौर पर इस्तेमाल करने के लिए सेट करें:

ProductGridFragment.java

private void setUpToolbar(View view) {
   
Toolbar toolbar = view.findViewById(R.id.app_bar);
   
AppCompatActivity activity = (AppCompatActivity) getActivity();
   
if (activity != null) {
       activity
.setSupportActionBar(toolbar);
   
}
}

इसके बाद, टूलबार में shr_toolbar_menu.xml के कॉन्टेंट को शामिल करने के लिए, setUpToolbar के ठीक नीचे मौजूद onCreateOptionsMenu को बदलें:

ProductGridFragment.java

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
   menuInflater
.inflate(R.menu.shr_toolbar_menu, menu);
   
super.onCreateOptionsMenu(menu, menuInflater);
}

अब setUpToolbar तरीके में कॉल जोड़ें, जिसे हमने onCreateView() तरीके के कॉन्टेंट में जोड़ा था. इसके लिए, यह तरीका अपनाएं:

ProductGridFragment.java

@Override
public View onCreateView(
       
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   
// Inflate the layout for this fragment with the ProductGrid theme
   
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

   
// Set up the toolbar
   setUpToolbar
(view);

   
return view;
}

आखिर में, ProductGridFragment.java में onCreate() तरीका जोड़ें. मेथड के मुख्य हिस्से में, setHasOptionMenu के पैरामीटर को true के तौर पर सेट करें.

तरीका कुछ ऐसा दिखना चाहिए:

ProductGridFragment.java

@Override
public void onCreate(Bundle savedInstanceState) {
   
super.onCreate(savedInstanceState);
   setHasOptionsMenu
(true);
}

ऊपर दिया गया कोड, हमारे एक्सएमएल लेआउट से ऐप्लिकेशन बार को इस गतिविधि के लिए ऐक्शन बार के तौर पर सेट करता है. कॉलबैक onCreateOptionsMenu, गतिविधि को बताता है कि मेन्यू के तौर पर किसका इस्तेमाल करना है. ऐसे मामले में, यह R.menu.shr_toolbar_menu के मेन्यू आइटम को ऐप्लिकेशन बार में डाल देगा.

मेन्यू फ़ाइल में दो आइटम होते हैं: "खोजें" और "फ़िल्टर करें".

shr_toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto">
   
<item
       
android:id="@+id/search"
       
android:icon="@drawable/shr_search"
       
android:title="@string/shr_search_title"
       
app:showAsAction="always" />
   
<item
       
android:id="@+id/filter"
       
android:icon="@drawable/shr_filter"
       
android:title="@string/shr_filter_title"
       
app:showAsAction="always" />
</menu>

ये बदलाव करने के बाद, आपकी ProductGridFragment.java फ़ाइल इस तरह दिखनी चाहिए:

ProductGridFragment.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;


public class ProductGridFragment extends Fragment {

   
@Override
   
public void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
       setHasOptionsMenu
(true);
   
}
 
   
@Override
   
public View onCreateView(
           
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       
// Inflate the layout for this fragment with the ProductGrid theme
       
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

       
// Set up the toolbar
       setUpToolbar
(view);

       
return view;
   
}
 
   
private void setUpToolbar(View view) {
       
Toolbar toolbar = view.findViewById(R.id.app_bar);
       
AppCompatActivity activity = (AppCompatActivity) getActivity();
       
if (activity != null) {
           activity
.setSupportActionBar(toolbar);
       
}
   
}

   
@Override
   
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
       menuInflater
.inflate(R.menu.shr_toolbar_menu, menu);
       
super.onCreateOptionsMenu(menu, menuInflater);
   
}

}

बनाएं और चलाएं. आपकी होम स्क्रीन कुछ इस तरह दिखेगी:

d04e8aa3b27f4754.png

अब टूलबार में दाईं ओर एक नेविगेशन आइकॉन, एक टाइटल, और दो ऐक्शन आइकॉन हैं. टूलबार एक बारीक शैडो का इस्तेमाल करके भी एलिवेशन दिखाता है, जिससे पता चलता है कि यह कॉन्टेंट से अलग लेयर पर है.

4. कार्ड जोड़ें

अब हमारे ऐप्लिकेशन का स्ट्रक्चर तैयार हो गया है, तो चलिए कार्ड में कॉन्टेंट जोड़कर उसे व्यवस्थित करते हैं.

कार्ड की जानकारी जोड़ना

चलिए, सबसे ऊपर ऐप्लिकेशन बार के नीचे एक कार्ड जोड़कर शुरुआत करते हैं. कार्ड में इमेज के लिए कोई क्षेत्र, टाइटल, और सेकंडरी टेक्स्ट के लिए लेबल होना चाहिए.

shr_product_grid_fragment.xml में, AppBarLayout के नीचे यह जोड़ें:

shr_product_grid_fragment.xml

<com.google.android.material.card.MaterialCardView
   
android:layout_width="160dp"
   
android:layout_height="180dp"
   
android:layout_marginBottom="16dp"
   
android:layout_marginLeft="16dp"
   
android:layout_marginRight="16dp"
   
android:layout_marginTop="70dp"
   
app:cardBackgroundColor="?attr/colorPrimaryDark"
   
app:cardCornerRadius="4dp">

   
<LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_gravity="bottom"
       
android:background="#FFFFFF"
       
android:orientation="vertical"
       
android:padding="8dp">

       
<TextView
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:padding="2dp"
           
android:text="@string/shr_product_title"
           
android:textAppearance="?attr/textAppearanceHeadline6" />

       
<TextView
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:padding="2dp"
           
android:text="@string/shr_product_description"
           
android:textAppearance="?attr/textAppearanceBody2" />
   
</LinearLayout>
</com.google.android.material.card.MaterialCardView>

बिल्ड और चलाएं:

f6184a55ccb5f920.png

इस झलक में, यह देखा जा सकता है कि कार्ड को स्क्रीन के बाएं किनारे से इनसेट किया गया है. साथ ही, इसमें गोल कोने और एक छाया है, जो कार्ड की ऊंचाई दिखाती है. इस पूरे हिस्से को "कंटेनर" कहा जाता है. कंटेनर के अलावा, इसमें मौजूद सभी एलिमेंट ज़रूरी नहीं हैं.

कंटेनर में ये एलिमेंट जोड़े जा सकते हैं: हेडर टेक्स्ट, थंबनेल या अवतार, subhead टेक्स्ट, डिवाइडर, और यहां तक कि बटन और आइकॉन. उदाहरण के लिए, हमने अभी जो कार्ड बनाया है उसमें LinearLayout में दो TextView हैं. एक टाइटल के लिए और दूसरा सेकंडरी टेक्स्ट के लिए. ये दोनों TextView, कार्ड के सबसे नीचे अलाइन किए गए हैं.

आम तौर पर, कार्ड किसी संग्रह में दूसरे कार्ड के साथ दिखाए जाते हैं. इस कोडलैब के अगले सेक्शन में, हम उन्हें ग्रिड में कलेक्शन के तौर पर दिखाएंगे.

5. कार्ड का ग्रिड बनाना

जब एक स्क्रीन में एक से ज़्यादा कार्ड मौजूद होते हैं, तो उन्हें एक या उससे ज़्यादा कलेक्शन में एक साथ रखा जाता है. ग्रिड में मौजूद कार्ड एक ही प्लैटफ़ॉर्म पर होते हैं. इसका मतलब है कि जब तक उन्हें उठाया या खींचा नहीं जाता, तब तक वे एक ही ऊंचाई पर होते हैं. हालांकि, हम इस कोडलैब में इस बारे में नहीं बताएंगे.

कार्ड का ग्रिड सेट अप करना

हमने आपके लिए जो shr_product_card.xml फ़ाइल उपलब्ध कराई है उसे देखें:

shr_product_card.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
android:layout_width="match_parent"
   
android:layout_height="wrap_content"
   
app:cardBackgroundColor="@android:color/white"
   
app:cardElevation="2dp"
   
app:cardPreventCornerOverlap="true">

   
<LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:orientation="vertical">

       
<com.android.volley.toolbox.NetworkImageView
           
android:id="@+id/product_image"
           
android:layout_width="match_parent"
           
android:layout_height="@dimen/shr_product_card_image_height"
           
android:background="?attr/colorPrimaryDark"
           
android:scaleType="centerCrop" />

       
<LinearLayout
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:orientation="vertical"
           
android:padding="16dp">

           
<TextView
               
android:id="@+id/product_title"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:text="@string/shr_product_title"
               
android:textAppearance="?attr/textAppearanceHeadline6" />

           
<TextView
               
android:id="@+id/product_price"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:text="@string/shr_product_description"
               
android:textAppearance="?attr/textAppearanceBody2" />
       
</LinearLayout>
   
</LinearLayout>
</com.google.android.material.card.MaterialCardView>

इस कार्ड लेआउट में, एक इमेज वाला कार्ड (यहां NetworkImageView, जो हमें किसी यूआरएल से इमेज शामिल करने की अनुमति देता है) और दो TextViews शामिल हैं.

इसके बाद, हमने आपके लिए जो ProductCardRecyclerViewAdapter दिया है उसे देखें. यह ProductGridFragment के साथ एक ही पैकेज में है.

ProductCardRecyclerViewAdapter.java

package com.google.codelabs.mdc.java.shrine;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;

import java.util.List;

/**
* Adapter used to show a simple grid of products.
*/

public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter<ProductCardViewHolder> {

   
private List<ProductEntry> productList;
   
private ImageRequester imageRequester;

   
ProductCardRecyclerViewAdapter(List<ProductEntry> productList) {
       
this.productList = productList;
       imageRequester
= ImageRequester.getInstance();
   
}

   
@NonNull
   
@Override
   
public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
       
return new ProductCardViewHolder(layoutView);
   
}

   
@Override
   
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
       
// TODO: Put ViewHolder binding code here in MDC-102
   
}

   
@Override
   
public int getItemCount() {
       
return productList.size();
   
}
}

ऊपर दी गई अडैप्टर क्लास, हमारे ग्रिड का कॉन्टेंट मैनेज करती है. यह तय करने के लिए कि हर व्यू को उसके कॉन्टेंट का क्या करना चाहिए, हम जल्द ही onBindViewHolder() का कोड लिखेंगे.

उसी पैकेज में, ProductCardViewHolder को भी देखा जा सकता है. इस क्लास में उन व्यू को सेव किया जाता है जो हमारे कार्ड लेआउट पर असर डालते हैं, ताकि हम बाद में उनमें बदलाव कर सकें.

ProductCardViewHolder.java

package com.google.codelabs.mdc.java.shrine;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;

public class ProductCardViewHolder extends RecyclerView.ViewHolder {

   
public ProductCardViewHolder(@NonNull View itemView) {
       
super(itemView);
       
// TODO: Find and store views from itemView
   
}
}

ग्रिड को सेट अप करने के लिए, पहले हमें shr_product_grid_fragment.xml से MaterialCardView प्लेसहोल्डर को हटाना होगा. इसके बाद, आपको हमारे कार्ड के ग्रिड को दिखाने वाला कॉम्पोनेंट जोड़ना चाहिए. इस मामले में, अपने AppBarLayout एक्सएमएल कॉम्पोनेंट के नीचे, अपने shr_product_grid_fragment.xml में RecyclerView कॉम्पोनेंट जोड़ें:

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:paddingStart="@dimen/shr_product_grid_spacing"
   
android:paddingEnd="@dimen/shr_product_grid_spacing"
   
app:layout_behavior="@string/appbar_scrolling_view_behavior">

   
<androidx.recyclerview.widget.RecyclerView
       
android:id="@+id/recycler_view"
       
android:layout_width="match_parent"
       
android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

आपका shr_product_grid_fragment.xml ऐसा दिखना चाहिए:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   
tools:context=".ProductGridFragment">

   
<com.google.android.material.appbar.AppBarLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content">

       
<androidx.appcompat.widget.Toolbar
           
android:id="@+id/app_bar"
           
style="@style/Widget.Shrine.Toolbar"
           
android:layout_width="match_parent"
           
android:layout_height="?attr/actionBarSize"
           
app:navigationIcon="@drawable/shr_menu"
           
app:title="@string/shr_app_name" />
   
</com.google.android.material.appbar.AppBarLayout>

   
<androidx.core.widget.NestedScrollView
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
android:layout_marginTop="56dp"
       
android:background="@color/productGridBackgroundColor"
       
android:paddingStart="@dimen/shr_product_grid_spacing"
       
android:paddingEnd="@dimen/shr_product_grid_spacing"
       
app:layout_behavior="@string/appbar_scrolling_view_behavior">

       
<androidx.recyclerview.widget.RecyclerView
           
android:id="@+id/recycler_view"
           
android:layout_width="match_parent"
           
android:layout_height="match_parent" />

   
</androidx.core.widget.NestedScrollView>

</FrameLayout>

आखिर में, onCreateView() में setUpToolbar(view) को कॉल करने के बाद और return स्टेटमेंट से पहले, ProductGridFragment.java में RecyclerView इनिशिएलाइज़ेशन कोड जोड़ें:

ProductGridFragment.java

@Override
public View onCreateView(
       
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   
...
   setUpToolbar
(view);

   
// Set up the RecyclerView
   
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
   recyclerView
.setHasFixedSize(true);
   recyclerView
.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
   
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
           
ProductEntry.initProductEntryList(getResources()));
   recyclerView
.setAdapter(adapter);
   
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
   
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
   recyclerView
.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

   
return view;
}

ऊपर दिए गए कोड स्निपेट में, RecyclerView सेट अप करने के लिए शुरू करने के ज़रूरी चरण शामिल हैं. इसमें RecyclerView के लेआउट मैनेजर को सेट करना शामिल है. साथ ही, RecyclerView के अडैप्टर को शुरू करना और सेट करना भी शामिल है.

आपकी ProductGridFragment.java फ़ाइल अब कुछ ऐसी दिखेगी:

ProductGridFragment.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;


import com.google.codelabs.mdc.java.shrine.network.ProductEntry;

public class ProductGridFragment extends Fragment {

   
@Override
   
public void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
       setHasOptionsMenu
(true);
   
}

   
@Override
   
public View onCreateView(
           
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       
// Inflate the layout for this fragment with the ProductGrid theme
       
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

       
// Set up the toolbar
       setUpToolbar
(view);

       
// Set up the RecyclerView
       
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
       recyclerView
.setHasFixedSize(true);
       recyclerView
.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
       
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
               
ProductEntry.initProductEntryList(getResources()));
       recyclerView
.setAdapter(adapter);
       
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
       
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
       recyclerView
.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

       
return view;
   
}

   
private void setUpToolbar(View view) {
       
Toolbar toolbar = view.findViewById(R.id.app_bar);
       
AppCompatActivity activity = (AppCompatActivity) getActivity();
       
if (activity != null) {
           activity
.setSupportActionBar(toolbar);
       
}
   
}

   
@Override
   
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
       menuInflater
.inflate(R.menu.shr_toolbar_menu, menu);
       
super.onCreateOptionsMenu(menu, menuInflater);
   
}

}

बनाएं और चलाएं.

f9aeab846fc3bb4c.png

कार्ड अब दिख रहे हैं! चलिए, अभी कुछ प्रॉडक्ट डेटा नहीं दिखाते हैं. इसलिए, आइए कुछ प्रॉडक्ट डेटा जोड़ें.

इमेज और टेक्स्ट जोड़ना

हर कार्ड के लिए, एक इमेज, प्रॉडक्ट का नाम, और कीमत जोड़ें. हमारे ViewHolder ऐब्स्ट्रैक्ट में, हर कार्ड के व्यू होते हैं. हमारे ViewHolder में, ये तीन व्यू इस तरह जोड़ें:

ProductCardViewHolder.java

package com.google.codelabs.mdc.java.shrine;

import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;

import com.android.volley.toolbox.NetworkImageView;

public class ProductCardViewHolder extends RecyclerView.ViewHolder {

   
public NetworkImageView productImage;
   
public TextView productTitle;
   
public TextView productPrice;

   
public ProductCardViewHolder(@NonNull View itemView) {
       
super(itemView);
       productImage
= itemView.findViewById(R.id.product_image);
       productTitle
= itemView.findViewById(R.id.product_title);
       productPrice
= itemView.findViewById(R.id.product_price);
   
}
}

हमारे RecyclerView के अडैप्टर में, ViewHolder, में हर व्यू पर जानकारी सेट करने के लिए onBindViewHolder() का तरीका अपडेट करें:

ProductCardRecyclerViewAdapter.java

@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
   
if (productList != null && position < productList.size()) {
       
ProductEntry product = productList.get(position);
       holder
.productTitle.setText(product.title);
       holder
.productPrice.setText(product.price);
       imageRequester
.setImageFromUrl(holder.productImage, product.url);
   
}
}

ऊपर दिया गया कोड, हमारे RecyclerView के अडैप्टर को बताता है कि ViewHolder का इस्तेमाल करके, हर कार्ड के साथ क्या करना है.

यहां यह ViewHolder के हर TextView पर टेक्स्ट डेटा सेट करता है और यूआरएल से इमेज पाने के लिए ImageRequester को कॉल करता है. ImageRequester एक ऐसी क्लास है जिसे हमने आपकी सुविधा के लिए उपलब्ध कराया है. यह Volley लाइब्रेरी का इस्तेमाल करती है. यह विषय इस कोडलैब के दायरे से बाहर है, लेकिन कोड को खुद ही एक्सप्लोर करें.

बिल्ड और चलाएं:

249db074eff043f4.png

हमारे प्रॉडक्ट अब ऐप्लिकेशन में दिख रहे हैं!

6. रीकैप

हमारे ऐप्लिकेशन में एक बुनियादी फ़्लो है, जो लोगों को लॉगिन स्क्रीन से होम स्क्रीन पर ले जाता है, जहां प्रॉडक्ट देखे जा सकते हैं. कोड की कुछ लाइनों में ही, हमने अपने ऐप्लिकेशन का कॉन्टेंट दिखाने के लिए सबसे ऊपर मौजूद ऐप्लिकेशन बार जोड़ा है. इसमें एक टाइटल, तीन बटन, और कार्ड का ग्रिड शामिल है. हमारी होम स्क्रीन बुनियादी संरचना और कार्रवाई करने लायक कॉन्टेंट के साथ अब आसान और फ़ंक्शनल हो गई है.

अगले चरण

अब हमने टॉप ऐप्लिकेशन बार, कार्ड, टेक्स्ट फ़ील्ड, और बटन के साथ, MDC-Android लाइब्रेरी के चार मुख्य Material Design कॉम्पोनेंट का इस्तेमाल किया है! एमडीसी-Android कैटलॉग एमडीसी Android के कॉम्पोनेंट में और भी कॉम्पोनेंट देखे जा सकते हैं.

हमारा ऐप्लिकेशन पूरी तरह से काम करता है, लेकिन इसमें अभी तक किसी ब्रैंड का नाम नहीं दिया गया है. MDC-103: मटीरियल डिज़ाइन थीमिंग के साथ रंग, आकार, ऊंचाई, और टाइप में, हम चमकीले और मॉर्डन ब्रैंड दिखाने के लिए इन कॉम्पोनेंट की स्टाइल को पसंद के मुताबिक बनाएंगे.

मुझे इस कोडलैब को पूरा करने में ज़्यादा समय और मेहनत नहीं लगी

मुझे आने वाले समय में Material Components का इस्तेमाल जारी रखना है