Kotlin Android Fundamentals 10.3: सभी के लिए डिज़ाइन

यह कोडलैब Android Kotlin के बुनियादी कोर्स में शामिल है. अगर आप कोडलैब के क्रम में काम करते हैं, तो आपको इस कोर्स का ज़्यादा से ज़्यादा फ़ायदा मिलेगा. सभी कोर्स कोडलैब Android Kotlin से जुड़े बेसिक कोडलैब के लैंडिंग पेज पर दिए गए हैं.

यह कोडलैब एक ऐसी सीरीज़ का हिस्सा है जो आपको Android ऐप्लिकेशन के डिज़ाइन की बुनियादी बातें बताती है. साथ ही, आपको Google डेवलपर ग्रुप (GDG) बैठकों का ऐप्लिकेशन बनाने में मदद करती है. इस ऐप्लिकेशन में, आने वाली बैठकों के बारे में जानकारी मिलती है. यह जानकारी आसानी से और आसानी से दी जाती है.

हमारा सुझाव है कि आप इस सीरीज़ में तीनों कोडलैब को इसी क्रम में शामिल करें. ऐसा इसलिए, क्योंकि ये सिलसिलेवार तरीके से काम करते हैं:

• 10.1 स्टाइल और थीम
• 10.2 मटीरियल डिज़ाइन, रोशनी कम करना, और रंग
• 10.3 सभी के लिए डिज़ाइन

परिचय

किसी ऐप्लिकेशन को ज़्यादा से ज़्यादा उपयोगकर्ताओं के लिए इस्तेमाल करने लायक बनाने के लिए, चाहे आप उसके फ़ायदे के लिए काम कर रहे हों या कारोबार के लिए. इसे पूरा करने के लिए कई डाइमेंशन हैं.

• आरटीएल भाषाओं के लिए सहायता. यूरोपियन और कई अन्य भाषाओं को बाईं से दाईं ओर पढ़ा जाता है. साथ ही, उन भाषाओं के ऐप्लिकेशन, आम तौर पर उन भाषाओं के हिसाब से डिज़ाइन किए जाते हैं. कई अन्य भाषाएं जिनमें बड़ी संख्या में स्पीकर को दाईं से बाईं ओर पढ़ते हैं, जैसे कि अरबी. अपनी संभावित ऑडियंस बढ़ाने के लिए, अपने ऐप्लिकेशन को दाएं-से-बाएं (आरटीएल) भाषाओं के साथ काम करें.
• सुलभता के लिए स्कैन करें. यह अंदाज़ा लगाना कि आपके ऐप्लिकेशन में किसी और को कैसा अनुभव हो सकता है, गलतियों के साथ एक विकल्प है. सुलभता जांचने वाला ऐप्लिकेशन ऐप्लिकेशन, लूप से अनुमान लगाता है और आपके ऐप्लिकेशन का विश्लेषण करता है. इससे यह पता चलता है कि कहां से आप इसकी सुलभता में सुधार कर सकते हैं.
• कॉन्टेंट के बारे में जानकारी के साथ टॉकबैक के लिए डिज़ाइन करें. जैसा कि आप देख सकते हैं कि देखने में परेशानी वाले लोग बहुत आम हैं. इस वजह से, कई उपयोगकर्ता सिर्फ़ दृष्टिहीन नहीं, बल्कि स्क्रीन रीडर का इस्तेमाल भी कर सकते हैं. कॉन्टेंट की जानकारी, स्क्रीन रीडर के लिए वाक्यांश होते हैं. इनकी मदद से, यह बताया जाता है कि उपयोगकर्ता स्क्रीन के किसी एलिमेंट से इंटरैक्ट करता है या नहीं.
• नाइट मोड की सुविधा है. दृष्टि बाधित उपयोगकर्ता के लिए, स्क्रीन के रंगों में बदलाव करने से कंट्रास्ट बेहतर होता है और इससे आपके ऐप्लिकेशन के साथ विज़ुअल रूप से काम करने में मदद मिलती है. Android में इसे नाइट मोड के साथ काम करने के लिए आसान बनाया गया है और उपयोगकर्ताओं को डिफ़ॉल्ट स्क्रीन के रंगों के लिए एक आसान विकल्प देने के लिए आपको हमेशा नाइट मोड की सुविधा देनी चाहिए.

इस कोडलैब में, आप इनमें से हर एक विकल्प को एक्सप्लोर करते हैं और GDG Finder ऐप्लिकेशन में इसके लिए मदद जोड़ते हैं.

आप अपने Android ऐप्लिकेशन के साथ चिप इस्तेमाल करने का तरीका भी जानते हैं. चिप का इस्तेमाल करके, आप अपने ऐप्लिकेशन को ज़्यादा दिलचस्प बना सकते हैं. साथ ही, उसे ऐक्सेस कर पाते हैं.

आपको क्या पता होना चाहिए

आपको इनके बारे में पता होना चाहिए:

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

आप इन चीज़ों के बारे में जानेंगे

• सबसे ज़्यादा उपयोगकर्ताओं के लिए अपने ऐप्लिकेशन को इस्तेमाल करने लायक बनाने का तरीका.
• अपने ऐप्लिकेशन को दाएं-से-बाएं (आरटीएल) भाषाओं के लिए कैसे बनाएं.
• अपने ऐप्लिकेशन की सुलभता का मूल्यांकन करने का तरीका.
• स्क्रीन रीडर के साथ अपने ऐप्लिकेशन को बेहतर बनाने के लिए, कॉन्टेंट के ब्यौरे का इस्तेमाल कैसे करें.
• चिप का इस्तेमाल कैसे करें.
• अपने ऐप्लिकेशन को गहरे रंग वाले मोड में इस्तेमाल करने का तरीका.

आप क्या कर पाएंगे!

• आरटीएल भाषाओं के लिए काम करके, सुलभता को बेहतर बनाने के लिए किसी ऐप्लिकेशन का आकलन करें और उसे बढ़ाएं.
• अपने ऐप्लिकेशन को स्कैन करें और जानें कि सुलभता की सुविधा को कहां बेहतर बनाया जा सकता है.
• इमेज के लिए कॉन्टेंट की जानकारी देने वाली सुविधा का इस्तेमाल करें.
• ड्रॉ करने की सुविधा इस्तेमाल करने का तरीका जानें.
• अपने ऐप्लिकेशन में नाइट मोड इस्तेमाल करने की सुविधा जोड़ें.

GDG-फ़ाइंडर स्टार्टर ऐप्लिकेशन उन सभी चीज़ों पर बनता है जिन्हें आपने अब तक इस कोर्स में सीखा है.

यह ऐप्लिकेशन तीन स्क्रीन के लिए ConstraintLayout का इस्तेमाल करता है. इनमें से दो स्क्रीन सिर्फ़ लेआउट फ़ाइलें होती हैं. इनका इस्तेमाल आप Android पर रंगों और टेक्स्ट के बारे में जानने के लिए करते हैं.

तीसरी स्क्रीन GDG फ़ाइंडर है. GDG या Google डेवलपर ग्रुप, ऐसे डेवलपर के समुदाय होते हैं जो Android समेत Google की टेक्नोलॉजी पर ध्यान देते हैं. दुनिया भर के GDG, बैठक, कॉन्फ़्रेंस, स्टडी जैम, और दूसरे इवेंट होस्ट करते हैं.

यह ऐप्लिकेशन डेवलप करने के साथ-साथ आप जीडीजी की असली सूची पर भी काम करते हैं. फ़ाइंडर स्क्रीन, डिवाइस की जगह का इस्तेमाल करके जीडीजी को दूरी के मुताबिक क्रम में लगाती है.

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

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

कॉन्टेंट में दिखाए गए कॉन्टेंट की दिशा, बाएं से दाएं (एलटीआर) और दाएं से बाएं (आरटीएल) भाषाओं के बीच का मुख्य अंतर है. जब यूज़र इंटरफ़ेस (यूआई) निर्देश को LTR से RTL (या इसके उलटा बदला जाता है) को कहा जाता है. स्क्रीन शेयर करने की सुविधा पर, टेक्स्ट, टेक्स्ट फ़ील्ड के आइकॉन, लेआउट, और दिशा-निर्देशों (जैसे कि ऐरो) वाले ज़्यादातर आइकॉन का असर पड़ता है. अन्य आइटम मिरर नहीं किए जाते, जैसे नंबर (घड़ी, फ़ोन नंबर), दिशा-निर्देश नहीं होने वाले आइकन (हवाई जहाज़ मोड, वाई-फ़ाई), प्लेबैक कंट्रोल, और ज़्यादातर चार्ट और ग्राफ़.

दाएं से बाएं टेक्स्ट दिशा का इस्तेमाल करने वाली भाषाओं को दुनिया भर के एक अरब से ज़्यादा लोग इस्तेमाल करते हैं. दुनिया भर में Android डेवलपर हैं, इसलिए GDG Finder ऐप्लिकेशन के लिए RTL भाषाओं का इस्तेमाल करना ज़रूरी है.

पहला चरण: RTL सहायता जोड़ें

इस कदम में, आप GDG Finder ऐप्लिकेशन को आरटीएल भाषाओं में काम करते हैं.

1. GDGFinderMaterial ऐप्लिकेशन डाउनलोड करके चलाएं, जो इस कोडलैब के स्टार्टर का ऐप्लिकेशन है या पिछले कोडलैब के आखिरी कोड से जारी रखें.
2. Android मेनिफ़ेस्ट खोलें.
3. <application> सेक्शन में, नीचे दिया गया कोड जोड़ें और बताएं कि ऐप्लिकेशन, RTL के साथ काम करता है या नहीं.

<application
        ...
        android:supportsRtl="true">

4. डिज़ाइन टैब में activity_main.xml खोलें.
5. झलक के लिए स्थान-भाषा ड्रॉपडाउन मेन्यू से, दाएं से बाएं झलक देखें चुनें. (अगर आपको यह मेन्यू नहीं दिखता है, तो पैनल को बड़ा करें या उसे देखने के लिए विशेषता पैनल को बंद करें.)

सलाह: आपको अपने डिवाइस पर भाषाएं बदलने की ज़रूरत नहीं है, ताकि आप यह देख सकें कि आपका ऐप्लिकेशन RTL में विज़ुअल तौर पर कैसे दिखता है.

6. झलक देखें में, आपने देखा कि हेडर &GDG Finder&कोटेशन दाईं ओर चला गया है. बाकी की स्क्रीन में कोई बदलाव नहीं हुआ है. कुल मिलाकर, यह स्क्रीन पास की जा सकती है. लेकिन टेक्स्ट व्यू में अलाइनमेंट अब गलत है, क्योंकि यह दाईं ओर के बजाय बाईं ओर अलाइन हो गया है.

7. इसे अपने डिवाइस पर काम करने के लिए, डिवाइस या एम्युलेटर सेटिंग में जाकर, डेवलपर के लिए सेटिंग और टूल में जाकर, ज़बरदस्ती आरटीएल लेआउट चुनें. (अगर आपको डेवलपर के विकल्प चालू करना हो, तो बिल्ड नंबर ढूंढें और तब तक क्लिक करें, जब तक कि आपको यह बताने वाला टोस्ट न मिल जाए कि आप डेवलपर हैं. यह डिवाइस और Android सिस्टम के वर्शन के हिसाब से अलग-अलग हो सकता है.)

8. ऐप्लिकेशन चलाएं और डिवाइस की पुष्टि करें कि मुख्य स्क्रीन झलक जैसी ही दिखती है. ध्यान दें कि एफ़एबी को अब बाईं ओर, और दाईं ओर मौजूद हैमबर्गर मेन्यू में बदल दिया गया है!
9. ऐप्लिकेशन में, नेविगेशन पैनल खोलें और खोजें स्क्रीन पर जाएं. जैसा कि नीचे दिखाया गया है, आइकॉन अब भी बाईं ओर हैं और कोई टेक्स्ट नहीं दिख रहा. यह पता चलता है कि टेक्स्ट, आइकॉन के बाईं ओर स्क्रीन से बाहर है. ऐसा इसलिए है, क्योंकि कोड, व्यू प्रॉपर्टी और लेआउट कंस्ट्रेंट में बाईं/दाईं स्क्रीन के रेफ़रंस का इस्तेमाल करता है.

दूसरा चरण: बाएं और दाएं के बजाय स्टार्ट और एंड का इस्तेमाल करना

स्क्रीन पर (&बाएं) (और जब आप स्क्रीन का सामना करते हैं) && \u>. उदाहरण के लिए, layout_constraintLeft_toLeftOf हमेशा एलिमेंट के बाईं ओर स्क्रीन के बाएं हिस्से को रोकता है. जैसा कि ऊपर स्क्रीनशॉट में दिखाया गया है, आपके ऐप्लिकेशन के #39 केस में, यह टेक्स्ट आरटीएल भाषाओं में स्क्रीन पर बंद है.

इसे ठीक करने के लिए, "left" और &kot;right,&कोटेशन के बजाय; Start और End शब्दावली का इस्तेमाल करें. यह शब्दावली मौजूदा भाषा में टेक्स्ट की दिशा के लिए टेक्स्ट की शुरुआत और टेक्स्ट के आखिर में सही तरीके से सेट करती है, ताकि मार्जिन और लेआउट स्क्रीन के सही क्षेत्रों में हों.

1. Open list_item.xml.
2. Left और Right के किसी भी रेफ़रंस को Start और End के रेफ़रंस से बदलें.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. ImageView और #39; के layout_marginLeft को layout_marginStart से बदलें. यह मार्जिन को स्क्रीन के किनारे से दूर ले जाने के लिए सही जगह पर ले जाता है.

<ImageView
android:layout_marginStart="
?

4. fragment_gdg_list.xml खोलें. झलक देखें पैनल में जीडीजी की सूची देखें. ध्यान दें कि आइकॉन अब भी गलत दिशा में ले जा रहा है, क्योंकि यह डुप्लीकेट है (अगर आइकॉन मिरर नहीं किया जा रहा, तो पक्का करें कि आप अब भी दाईं से बाईं ओर झलक देख रहे हैं). मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक, आइकॉन डुप्लीकेट नहीं होने चाहिए.
5. res/drawable/ic_gdg.xml खोलें.
6. एक्सएमएल कोड की पहली लाइन में, मिररिंग बंद करने के लिए android:autoMirrored="true" को ढूंढें और मिटाएं.
7. झलक देखें देखें या ऐप्लिकेशन को फिर से चलाएं और Search GDG स्क्रीन खोलें. लेआउट अब ठीक हो जाना चाहिए!

सलाह: Android Studio का इस्तेमाल करके, आप पीले रंग की हाइलाइट से जुड़ी सलाह दे सकते हैं. इससे आप शुरू और खत्म होने वाले एट्रिब्यूट को बेहतर तरीके से इस्तेमाल कर पाएंगे.

अपने एक्सएमएल लेआउट में Left और Right के सभी इंस्टेंस देखने के लिए, केस-मैचिंग के साथ 'खोजें और बदलें' का इस्तेमाल करें.

तीसरा चरण: Android Studio को अपने सभी काम करने देना

इससे पहले की कसरत में, आपने आरटीएल भाषाओं के इस्तेमाल की अनुमति देने के लिए, पहला कदम उठाया. सबसे अच्छी बात यह है कि Android Studio आपके ऐप्लिकेशन को स्कैन कर सकता है और आपके लिए कई बुनियादी बातें सेट अप कर सकता है.

1. list_item.xml में, TextView में, layout_marginStart को वापस layout_marginLeft में बदलें, ताकि स्कैनर को ढूंढने के लिए कुछ मिल जाए.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. Android Studio में, जहां संभव हो वहां RTL सहायता जोड़ें चुनें और मेनिफ़ेस्ट को अपडेट करने के लिए, बॉक्स के साथ-साथ स्टार्ट और एंड प्रॉपर्टी का इस्तेमाल करने के लिए लेआउट फ़ाइलें चुनें.

3. रीफ़ैक्चरिंग की झलक पैनल में, ऐप्लिकेशन फ़ोल्डर ढूंढें और इसे तब तक बड़ा करें, जब तक कि यह सभी जानकारी के लिए खुला न रहे.
4. ऐप्लिकेशन फ़ोल्डर में यह देखें कि आपने अभी जो layout_marginLeft बदला है वह रीफ़ैक्टर के लिए कोड के रूप में दिया गया है.

5. ध्यान दें कि झलक में सिस्टम और लाइब्रेरी की फ़ाइलें भी शामिल होती हैं. लेआउट और yout-watch-v20 और उन सभी फ़ोल्डर पर दायां क्लिक करें जो ऐप्लिकेशन का हिस्सा नहीं हैं. साथ ही, संदर्भ मेन्यू से शामिल न करें चुनें.

6. आगे बढ़ें और रीफ़ैक्टर अभी करें. (अगर आपको सिस्टम फ़ाइलों के बारे में पॉप-अप मिलता है, तो पक्का करें कि आपने उन सभी फ़ोल्डर को निकाल दिया है जो आपके ऐप्लिकेशन कोड का हिस्सा नहीं हैं.)

7. ध्यान दें कि layout_marginLeft को वापस layout_marginStart में बदल दिया गया है.

ध्यान दें: कुछ View कॉम्पोनेंट को RTL के साथ सही तरीके से काम करने के लिए, ज़्यादा कस्टमाइज़ेशन की ज़रूरत होती है. यूज़र इंटरफ़ेस (यूआई) पर ज़्यादा सटीक कंट्रोल पाने के लिए, चार अलग-अलग एपीआई हैं जिनका इस्तेमाल किया जा सकता है:

• कॉम्पोनेंट के दिशा-निर्देश सेट करने के लिए, android:layoutDirection.
• कॉम्पोनेंट के दिशा-निर्देश सेट करने के लिए, android:textDirection.
• किसी कॉम्पोनेंट के टेक्स्ट का अलाइनमेंट सेट करने के लिए, android:textAlignment.
• getLayoutDirectionFromLocale() निर्देश के ज़रिए निर्देश देने वाली स्थान-भाषा को प्रोग्राम के हिसाब से तैयार करने का तरीका है.

तीसरा चरण: स्थानीय भाषाओं के फ़ोल्डर एक्सप्लोर करना

अब तक आपने #39;ऐप्लिकेशन के लिए इस्तेमाल की जाने वाली डिफ़ॉल्ट भाषा की दिशा बदल दी है. किसी प्रोडक्शन ऐप्लिकेशन के लिए, आप strings.xml फ़ाइल का अनुवाद किसी अनुवादक को भेजेंगे, ताकि उसका नई भाषा में अनुवाद किया जा सके. इस कोडलैब के लिए, यह ऐप्लिकेशन स्पैनिश में strings.xml फ़ाइल देता है (हमने अनुवाद जनरेट करने के लिए, Google Translate का इस्तेमाल किया, इसलिए ये #39;पूरी तरह सही नहीं हैं).

1. Android Studio में, प्रोजेक्ट व्यू को Project Files में बदलें.
2. res फ़ोल्डर को बड़ा करें और res/values और res/values-es के लिए फ़ोल्डर देखें. फ़ोल्डर के नाम में &koteses&kot; स्पैनिश के लिए भाषा कोड है. values-&quat;language code" फ़ोल्डर में हर भाषा के लिए वैल्यू मौजूद है. बिना एक्सटेंशन वाले values फ़ोल्डर में डिफ़ॉल्ट रूप से ऐसे संसाधन शामिल होते हैं जो एक साथ लागू होते हैं.

3. values-es में, strings.xml खोलें और ध्यान दें कि सभी स्ट्रिंग स्पैनिश में हैं.
4. Android Studio में, डिज़ाइन टैब में activity_main.xml खोलें.
5. झलक के लिए स्थान-भाषा ड्रॉपडाउन में स्पैनिश चुनें. अब आपका टेक्स्ट स्पैनिश में होना चाहिए.

6. [ज़रूरी नहीं] अगर आप आरटीएल भाषा में माहिर हैं, तो उस भाषा में values फ़ोल्डर और strings.xml बनाएं और उसकी जांच करें कि वे आपके डिवाइस पर कैसे दिखते हैं.
7. [ज़रूरी नहीं] अपने डिवाइस की भाषा सेटिंग बदलें और ऐप्लिकेशन चलाएं. पक्का करें कि आप अपने डिवाइस को किसी ऐसी भाषा से न बदलें जो आप नहीं पढ़ सकते हैं. इस वजह से, इस सुविधा को पहले जैसा करना मुश्किल होता है!

पिछले टास्क में, मैन्युअल तरीके से ऐप्लिकेशन में बदलाव किया जाता था. इसके बाद, Android Studio का इस्तेमाल करके, आरटीएल में किए जाने वाले सुधारों के बारे में जाना जाता था.

जब बात आपके ऐप्लिकेशन को सुलभ बनाने की हो, तो सुलभता जांचने वाला ऐप्लिकेशन आपका सबसे अच्छा सहायक है. यह ऐप्लिकेशन, आपके टारगेट डिवाइस पर ऐप्लिकेशन को स्कैन करता है. साथ ही, टच टारगेट को बड़ा करने, कंट्रास्ट को बढ़ाने, और इमेज के बारे में जानकारी देने जैसे सुधार करने के सुझाव देता है, ताकि आपके ऐप्लिकेशन को ज़्यादा सुलभ बनाया जा सके. सुलभता जांचने वाला ऐप, Google ने बनाया है और आप इसे Play Store से इंस्टॉल कर सकते हैं.

पहला चरण: सुलभता जांचने वाला ऐप इंस्टॉल करना और उसे चलाना

1. Play Store खोलें और अगर ज़रूरी हो, तो साइन इन करें. आप अपने डिवाइस या एम्युलेटर पर ऐसा कर सकते हैं. यह कोडलैब एम्युलेटर का इस्तेमाल करता है.
   

ध्यान दें: अगर आपके एम्युलेटर पर Play Store # नहीं है, तो आपको नया एम्युलेटर बनाना पड़ सकता है. एम्युलेटर बनाते समय पक्का करें कि आपने वह विकल्प चुना हो जिसमें & &tt>Play Store" आइकॉन चालू है.

अहम जानकारी: एम्युलेटर से Play Store का इस्तेमाल करने के लिए, आपको किसी खाते से लॉग इन करना होगा. आप अपने सामान्य खाते का उपयोग कर सकते हैं, या केवल एम्युलेटर के साथ परीक्षण करने के लिए खाता बना सकते हैं. आपका बनाया हुआ कोई भी खाता असली होता है और आप असली Play सेवाओं से कनेक्ट हो रहे हैं, न कि उसका कोई एम्युलेट किया गया वर्शन!

अहम जानकारी: आप बिलिंग विकल्पों को सेट अप करने की प्रोसेस अभी नहीं कर सकते हैं!

2. Play Store में, Google LLC का Accessibility स्कैनर खोजें. पक्का करें कि आपको सही ऐप्लिकेशन मिला हो, जिसे Google ने जारी किया हो. ऐसा इसलिए, क्योंकि स्कैन करने के लिए कई अनुमतियों की ज़रूरत होती है!

3. स्कैनर को एम्युलेटर पर इंस्टॉल करें.
4. इंस्टॉल होने के बाद, खोलें पर क्लिक करें.
5. शुरू करें पर क्लिक करें.
6. सेटिंग में सुलभता जांचने वाला ऐप्लिकेशन सेट अप करने के लिए, ठीक है पर क्लिक करें.

7. डिवाइस की #सुलभता सेटिंग पर जाने के लिए, सुलभता जांचने वाले ऐप्लिकेशन पर क्लिक करें.

8. इसे चालू करने के लिए, सेवा का इस्तेमाल करें पर क्लिक करें.

9. स्क्रीन पर दिए गए निर्देशों के मुताबिक आगे बढ़ें और सभी अनुमतियां दें.
10. इसके बाद, ठीक है पर क्लिक करें और होम स्क्रीन पर वापस जाएं. आपको स्क्रीन पर किसी जगह पर सही के निशान वाला नीला बटन दिख सकता है. इस बटन पर क्लिक करने से फ़ोरग्राउंड में ऐप्लिकेशन की जांच ट्रिगर हो जाती है. आप बटन को खींचकर उसकी जगह बदल सकते हैं. यह बटन किसी भी ऐप्लिकेशन के ऊपर रहता है, ताकि आप किसी भी समय जांच करना शुरू कर सकें.

स्कैनर बंद करने के लिए, सेटिंग पर जाएं और सुलभता जांचने वाला ऐप बंद करें.

11. अपना ऐप्लिकेशन खोलें या चलाएं.
12. नीले बटन पर क्लिक करें और सुरक्षा से जुड़ी दूसरी चेतावनियां और अनुमतियां स्वीकार करें.

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

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

अहम जानकारी: इस अनुमति को चालू करने से पहले, यह पक्का कर लें कि आपने जो ऐप्लिकेशन इंस्टॉल किया है वह Google LLC का सुलभता स्कैनर है.

13. नीले बटन पर क्लिक करें और विश्लेषण पूरा होने तक इंतज़ार करें. आपको नीचे स्क्रीनशॉट की तरह कुछ दिखेगा, जिसके शीर्षक और एफ़एबी के बॉक्स में लाल रंग का बॉक्स दिखेगा. यह इस स्क्रीन पर सुलभता सुधार के लिए दो सुझाव दिखाता है.

14. GDG Finder के आस-पास मौजूद बॉक्स पर क्लिक करें. इससे, ज़्यादा जानकारी के साथ एक पैनल खुलता है, जैसा कि नीचे दिखाया गया है. इससे पता चलता है कि इमेज कंट्रास्ट में समस्याएं हैं.
15. इमेज कंट्रास्ट जानकारी को बड़ा करें. साथ ही, यह टूल बता रहा है कि उपाय कैसे किया जा रहा है.
16. अगले आइटम की जानकारी पाने के लिए दाईं ओर वाले तीर पर क्लिक करें.

17. अपने ऐप्लिकेशन में, GDG के लिए आवेदन करें स्क्रीन पर जाएं और सुलभता जांचने वाले ऐप्लिकेशन से उसे स्कैन करें. यह कुछ सुझाव देता है, जैसा कि नीचे बाईं ओर दिखाया गया है. 12. निष्पक्ष होने के लिए, इनमें से कुछ मिलते-जुलते आइटम के डुप्लीकेट हैं.
18. सभी सुझावों की सूची देखने के लिए, सबसे नीचे मौजूद टूलबार में जाकर, कोटेशन और स्टैक आइकॉन पर क्लिक करें. जैसा कि नीचे दिए गए स्क्रीनशॉट में दिखाया गया है. आप इस कोडलैब में इन सभी समस्याओं को ठीक कर रहे हैं.

Google के ऐप्लिकेशन के कलेक्शन Android Accessibility Suite में ऐसे टूल शामिल हैं जिनसे ऐप्लिकेशन को ज़्यादा सुलभ बनाया जा सकता है. इसमें टॉकबैक जैसे टूल शामिल हैं. टॉकबैक एक ऐसा स्क्रीन रीडर है जिसकी मदद से ऑडियो, हैप्टिक, और बोलकर जवाब दिया जा सकता है. इसकी मदद से, उपयोगकर्ता बिना आंखों के ही अपने डिवाइस पर कॉन्टेंट को नेविगेट और इस्तेमाल कर सकते हैं.

यह पता चलता है कि टॉकबैक का इस्तेमाल सिर्फ़ दृष्टिहीन लोग नहीं करते, बल्कि कई ऐसे लोग भी करते हैं जिन्हें देखने में परेशानी होती है. या ऐसे लोग भी जो सिर्फ़ अपनी आंखों को आराम देना चाहते हैं!

इसलिए, सुलभता सबके लिए है! इस टास्क में, आप टॉकबैक की सुविधा को आज़माते हैं और अपने ऐप्लिकेशन को उसके साथ अच्छी तरह काम करने के लिए अपडेट करते हैं.

पहला चरण: Accessibility Suite इंस्टॉल करना और चलाना

टॉकबैक की सुविधा कई अलग-अलग डिवाइसों पर पहले से इंस्टॉल होती है. हालांकि, एम्युलेटर पर आपको इसे इंस्टॉल करना होगा.

1. Play Store खोलें.
2. सुलभता सुइट ढूंढें. पक्का करें कि Google का ऐप्लिकेशन सही हो.
3. अगर यह इंस्टॉल नहीं किया गया है, तो सुलभता सुइट को इंस्टॉल करें.
4. डिवाइस पर टॉकबैक चालू करने के लिए, सेटिंग > सुलभता पर जाएं. इसके बाद, सेवा इस्तेमाल करें चुनकर टॉकबैक चालू करें. सुलभता जांचने वाले ऐप्लिकेशन की तरह ही, स्क्रीन पर मौजूद सामग्री पढ़ने के लिए टॉकबैक को अनुमतियां चाहिए. जब आप अनुमति के अनुरोध स्वीकार कर लेते हैं, तो टॉकबैक आपको ट्यूटोरियल की एक सूची दिखाता है. इसमें आपको टॉकबैक को बेहतर तरीके से इस्तेमाल करने का तरीका बताया जाता है.
5. अगर आपके डिवाइस पर टॉकबैक की सुविधा बंद करने का तरीका नहीं है, तो यहां ट्यूटोरियल रोकें और ट्यूटोरियल पढ़ें.
6. ट्यूटोरियल छोड़ने के लिए, 'वापस जाएं' बटन पर क्लिक करके उसे चुनें, फिर स्क्रीन पर कहीं भी दो बार टैप करें.

सलाह: अगर आपको कुछ भी सुनाई नहीं दे रहा है, तो #39...आवाज़ चालू करो!

सलाह: किसी आइटम पर क्लिक करने के लिए उस पर दो बार टैप करें. स्क्रोल करने या खींचें और छोड़ें. इसके बाद, उस पर दो बार टैप करें और खींचें और छोड़ें.

7. टॉकबैक के साथ GDG Finder ऐप्लिकेशन का इस्तेमाल करके एक्सप्लोर करें. उन जगहों पर ध्यान दें जहां टॉकबैक आपको स्क्रीन या कंट्रोल के बारे में कोई काम की जानकारी नहीं देता है. अगली कसरत में आप इसे ठीक कर देंगे.

दूसरा चरण: कॉन्टेंट की जानकारी जोड़ना

कॉन्टेंट डिस्क्रिप्टर, ऐसे लेबल होते हैं जो वीडियो को देखे जाने का मतलब बताते हैं. आपके ज़्यादातर व्यू में कॉन्टेंट की जानकारी होनी चाहिए.

1. GDG Finder ऐप्लिकेशन के चालू होने और टॉलबैक की सुविधा चालू होने पर, GDG चलाने के लिए लागू करें स्क्रीन पर जाएं.
2. मुख्य इमेज पर टैप करें ... और कुछ नहीं होता.
3. add_gdg_fragment.xml खोलें.
4. ImageView में, नीचे दिए गए तरीके से कॉन्टेंट की जानकारी देने वाला एट्रिब्यूट जोड़ें. आपको stage_image_description स्ट्रिंग strings.xml में दी जाती है.

android:contentDescription="@string/stage_image_description"

5. अपना ऐप्लिकेशन चलाएं.
6. GDG चलाने के लिए लागू करें पर जाएं और इमेज पर क्लिक करें. अब आपको इमेज के बारे में कम शब्दों में जानकारी सुननी चाहिए.
7. [ज़रूरी नहीं] इस ऐप्लिकेशन में मौजूद दूसरी इमेज के लिए कॉन्टेंट की जानकारी जोड़ें. प्रोडक्शन ऐप्लिकेशन में, सभी इमेज में कॉन्टेंट की जानकारी होनी चाहिए.

तीसरा चरण: बदलाव किए जा सकने वाले टेक्स्ट फ़ील्ड में संकेत जोड़ना

एक्सएमएल में बदलाव करने लायक एलिमेंट, जैसे कि EditText के लिए, आप android:hint का इस्तेमाल कर सकते हैं. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि किस तरह का कॉन्टेंट टाइप करना है. एक संकेत हमेशा यूज़र इंटरफ़ेस (यूआई) में दिखता है, क्योंकि यह इनपुट फ़ील्ड में डिफ़ॉल्ट टेक्स्ट होता है.

1. add_gdg_fragment.xml में अब भी है.
2. नीचे दिए गए कोड का इस्तेमाल करके, दिशा-निर्देश और कॉन्टेंट के बारे में बताएं.

textViewIntro में जोड़ें:

android:contentDescription="@string/add_gdg"

टेक्स्ट में बदलाव करने के लिए, क्रम से जोड़ें:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. labelTextWhy में कॉन्टेंट की जानकारी जोड़ें.

android:contentDescription="@string/motivation" 

4. EditTextWhy के लिए संकेत जोड़ें. एडिट बॉक्स पर लेबल लगाने के बाद, लेबल में कॉन्टेंट की जानकारी जोड़ें. साथ ही, बॉक्स में संकेत भी जोड़ें.

android:hint="@string/enter_motivation"

5. 'सबमिट करें' बटन के लिए कॉन्टेंट की जानकारी जोड़ें. सभी बटन में यह बताया जाना चाहिए कि अगर बटन दबाए जाते हैं, तो क्या होता है.

android:contentDescription="@string/submit_button_description"

6. टैलबैक चालू करके अपना ऐप्लिकेशन चलाएं और GDG चलाने के लिए आवेदन करने के लिए फ़ॉर्म भरें.

चौथा चरण: कॉन्टेंट ग्रुप बनाना

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

यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का ग्रुप बनाने के लिए, उन्हें ViewGroup में शामिल करें, जैसे कि LinearLayout. GDG Finder ऐप्लिकेशन में, labelTextWhy और editTextWhy एलिमेंट का ग्रुप बनाने के लिए सबसे बढ़िया विकल्प होते हैं, क्योंकि वे एक-दूसरे से जुड़े होते हैं.

1. add_gdg_fragment.xml खोलें.
2. कॉन्टेंट ग्रुप बनाने के लिए, LabelTextWhy और EditTextWhy के आस-पास LinearLayout को रैप करें. कोड को कॉपी करके नीचे चिपकाएं. LinearLayout में आपकी पसंद की कुछ स्टाइलिंग पहले से मौजूद हैं. (पक्का करें कि button, LinearLayout से बाहर का हो.)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. सभी कोड को सही तरीके से इंडेंट करने के लिए, Code > Reformat code चुनें.
4. labelTextWhy और editTextWhy से सभी लेआउट मार्जिन हटाएं.
5. labelTextWhy में, layout_constraintTop_toTopOf कंस्ट्रेंट को contentGroup में बदलें.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. editTextWhy में layout_constraintBottom_toBottomOf कंस्ट्रेंट को contentGroup में बदलें.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. गड़बड़ियों से बचने के लिए, EditTextRegion और Button को contentGroup पर सेट करें.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. LinearLayout में मार्जिन जोड़ें. विकल्प के तौर पर, इस मार्जिन को डाइमेंशन के तौर पर निकालें.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

अगर आपको मदद चाहिए, तो समाधान कोड में अपने कोड add_gdg_fragment.xml के लिए जांच करें.

9. अपना ऐप्लिकेशन चलाएं और टॉकबैक की मदद से GDG चलाने के लिए आवेदन करें स्क्रीन पर एक्सप्लोर करें.

पांचवां चरण: लाइव फ़ील्ड जोड़ना

फ़िलहाल, 'सबमिट करें' बटन पर लेबल ठीक है है. बेहतर होगा अगर फ़ॉर्म सबमिट करने से पहले बटन में एक लेबल और ब्यौरा हो और उपयोगकर्ता के क्लिक करने और फ़ॉर्म सबमिट करने के बाद डाइनैमिक तौर पर किसी दूसरे लेबल और कॉन्टेंट के ब्यौरे में बदल जाए. ऐसा करने के लिए, आप लाइव इलाका इस्तेमाल कर सकते हैं.

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

1. add_gdg_fragment.xml खोलें.
2. दिए गए submit स्ट्रिंग रिसॉर्स का इस्तेमाल करके, बटन और #39; टेक्स्ट असाइनमेंट को सबमिट करें में बदलें.

android:text="@string/submit"

3. android:accessibilityLiveRegion एट्रिब्यूट सेट करके, बटन में लाइव क्षेत्र जोड़ें. आपके पास लिखते हुए, आपके पास उसके मान के कई विकल्प होते हैं. बदलाव की अहमियत के आधार पर, आप यह तय कर सकते हैं कि उपयोगकर्ता के काम में रुकावट डालनी है या नहीं. वैल्यू &कोटेशन की वजह से, सुलभता सेवाएं इस व्यू में तुरंत बदलावों की सूचना देने के लिए मौजूदा बातचीत को बाधित कर देती हैं. अगर आप वैल्यू को "none" पर सेट करते हैं, तो किसी बदलाव की सूचना नहीं दी जाती. सुलभता की नीतियों की सेटिंग में बदलाव करके, उन्हें सुलभता नीति के मुताबिक सेट करें. वैल्यू को &कोटेशन, कोटेशन पर सेट करें.

android:accessibilityLiveRegion="polite"

4. Add पैकेज में, AddGdgFragment.kt खोलें.
5. showSnackBarEvent Observer के अंदर, SnackBar दिखने के बाद, बटन के लिए नया कॉन्टेंट ब्यौरा और टेक्स्ट सेट करें.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. अपना ऐप्लिकेशन चलाएं और बटन पर क्लिक करें. माफ़ करें, बटन और फ़ॉन्ट बहुत छोटे हैं!

छठा चरण: बटन की स्टाइलिंग से जुड़ी समस्या ठीक करना

1. add_gdg_fragment.xml में बटन's width और height को wrap_content में बदलें, ताकि पूरा लेबल दिखे और बटन अच्छा आकार में हो.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. बटन से backgroundTint, textColor, और textSize एट्रिब्यूट मिटाएं, ताकि ऐप्लिकेशन बेहतर थीम स्टाइल का इस्तेमाल कर सके.
3. textViewIntro से textColor एट्रिब्यूट मिटाएं. थीम के रंगों का कंट्रास्ट अच्छा होना चाहिए.
4. ऐप्लिकेशन चलाएं. ज़्यादा इस्तेमाल होने लायक सबमिट करें बटन पर ध्यान दें. सबमिट करें पर क्लिक करें और ध्यान दें कि यह हो गया में कैसे बदलता है.

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

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

चिप, ड्रॉ करने की सुविधा का इस्तेमाल करते हैं. Android के ड्रॉ करने लायक चीज़ों से आप स्क्रीन पर इमेज, आकार, और ऐनिमेशन बना सकते हैं. साथ ही, उनका आकार पहले से तय हो सकता है या वे डायनैमिक तरीके से आकार में बदल सकते हैं. आप ड्रॉ करने लायक बनाने के लिए इमेज का इस्तेमाल कर सकते हैं, जैसे कि GDG ऐप्लिकेशन में मौजूद इमेज. आप वेक्टर ड्रॉइंग का इस्तेमाल करके ऐसा कुछ भी बना सकते हैं जिसकी आप कल्पना कर सकते हैं. एक 9-पैच ड्रॉ करने लायक नाम का एक ड्रॉ करने लायक भी है, जिसे इस कोडलैब में शामिल नहीं किया गया है. Dawawable/ic_gdg.xml में GDG के लोगो को आसानी से पहचाना जा सकता है.

ड्रॉ करने लायक व्यू नहीं होते हैं, इसलिए आप ड्रॉ करने लायक को सीधे ConstraintLayout में नहीं रख सकते. आपको उसे ImageView के अंदर रखना होगा. आप टेक्स्ट व्यू या बटन के लिए बैकग्राउंड देने के लिए, ड्रॉ करने की सुविधा का इस्तेमाल कर सकते हैं. साथ ही, बैकग्राउंड में टेक्स्ट बनाने के लिए भी ड्रॉ कर सकते हैं.

पहला चरण: जीडीजी की सूची में चिप जोड़ना

नीचे दी गई जांची गई चिप में तीन ड्रॉ करने लायक चीज़ें इस्तेमाल की गई हैं. बैकग्राउंड और चेक मार्क को ड्रॉ किया जा सकता है. चिप को छूने पर एक तेज़ उछाल आता है, जो एक खास RipbleDrawable के ज़रिए किया जाता है. यह स्थिति, किए गए बदलावों की वजह से तेज़ लहर दिखाती है.

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

1. fragment_gdg_list.xml खोलें.
2. com.google.android.material.chip.ChipGroup HorizontalScrollView.singleLine की प्रॉपर्टी को true के अंदर सेट करें, ताकि सभी चिप हॉरिज़ॉन्टल तरीके से स्क्रोल की जा सकने वाली एक लाइन में सेट हो जाएं. singleSelection प्रॉपर्टी को true पर सेट करें, ताकि ग्रुप में एक बार में एक ही चिप को चुना जा सके. यह रहा कोड.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. लेआउट फ़ोल्डर में, एक Chip के लिए लेआउट तय करने के लिए, region.xml नाम की एक नई लेआउट रिसॉर्स फ़ाइल बनाएं.
4. eegion.xml में, नीचे दिए गए तरीके से सभी कोड को एक Chip के लेआउट से बदलें. ध्यान दें कि यह Chip एक मटीरियल कॉम्पोनेंट है. यह भी ध्यान रखें कि app:checkedIconVisible प्रॉपर्टी को सेट करके, आपको सही का निशान मिलता है. जो selected_highlight रंग मौजूद नहीं है उसके लिए, आपको गड़बड़ी का मैसेज मिलेगा.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. गायब selected_highlight रंग बनाने के लिए, कर्सर को selected_highlight पर रखें, इंटेंट मेन्यू लाएं, और चुने गए हाइलाइट के लिए रंग का संसाधन बनाएं. डिफ़ॉल्ट विकल्प ठीक होते हैं, इसलिए ठीक है पर क्लिक करें. फ़ाइल res/color फ़ोल्डर में बनाई गई है.
6. res/color/selected_highlight.xml खोलें. <selector> के तौर पर एन्कोड किए गए इस कलर स्टेट सूची में आप अलग-अलग राज्यों के लिए अलग-अलग कलर उपलब्ध करा सकते हैं. हर राज्य और उससे जुड़े रंग को <item> के तौर पर एन्कोड किया जाता है. इन रंगों के बारे में ज़्यादा जानने के लिए, रंग थीम पर जाएं.

7. <selector> के अंदर, राज्य सूची में डिफ़ॉल्ट रंग colorOnSurface वाला कोई आइटम जोड़ें. राज्य सूचियों में, सभी राज्यों को हमेशा शामिल करना ज़रूरी होता है. ऐसा करने का एक तरीका डिफ़ॉल्ट रंग होना है.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. डिफ़ॉल्ट रंग के ऊपर, colorPrimaryVariant रंग के साथ item जोड़ें, और उसका इस्तेमाल सिर्फ़ तब करें, जब चुनी गई स्थिति true हो. राज्य की सूचियों पर ऊपर से नीचे की ओर काम किया जाता है, जैसे कि केस स्टेटमेंट. अगर कोई भी राज्य मेल नहीं खाता है, तो डिफ़ॉल्ट स्थिति लागू होती है.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

दूसरा चरण: चिप की पंक्ति दिखाएं

GDG ऐप्लिकेशन, GDG वाले इलाके दिखाने वाले चिप की सूची बनाता है. जब कोई चिप चुना जाता है, तो वह ऐप्लिकेशन सिर्फ़ उस इलाके के जीडीजी नतीजे दिखाने के लिए नतीजे फ़िल्टर करता है.

ध्यान दें: यह सूची कैसे बनाई जाती है और नतीजे कैसे फ़िल्टर किए जाते हैं, यह इस कोडलैब का हिस्सा नहीं है. अगर आप जानना चाहते हैं कि GDG की सूची कैसे ली जाती है और फ़िल्टर कैसे किया जाता है, तो सर्च और नेटवर्क पैकेज में फ़ाइलें देखें. खास तौर पर, GdgListViewModel की जांच करें.

1. search पैकेज में, GdgListFragment.kt खोलें.
2. onCreateView() में, return स्टेटमेंट के ठीक ऊपर, viewModel.regionList पर ऑब्ज़र्वर जोड़ें और onChanged() को बदलें. जब व्यू मॉडल से दिए गए क्षेत्रों की सूची बदलती है, तब चिप को फिर से बनाना होगा. अगर दिया गया data null है, तो तुरंत लौटने के लिए स्टेटमेंट जोड़ें.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. onChanged() के अंदर, शून्य के टेस्ट के नीचे, regionList को कैश मेमोरी में सेव करने के लिए, chipGroup नाम के नए वैरिएबल को binding.regionList असाइन करें.

val chipGroup = binding.regionList

4. नीचे, chipGroup.context से चिप बढ़ाने के लिए नया layoutInflator बनाएं.

val inflator = LayoutInflater.from(chipGroup.context)

5. डेटाबाइंडिंग गड़बड़ी से बचने के लिए अपने प्रोजेक्ट को साफ़ करें और फिर से बनाएं.

इनफ़्लटर के नीचे, अब आप वास्तविक चिप बना सकते हैं, यानी regionList में हर इलाके के लिए एक.

6. सभी चिप को होल्ड करने के लिए, children वैरिएबल बनाएं. हर चिप को बनाने और दिखाने के लिए, data में पास किया गया मैपिंग फ़ंक्शन असाइन करें.

val children = data.map {} 

7. मैप लैम्ब्डा के अंदर, हर एक regionName के लिए चिप बनाएं और उसे बढ़ाएं. पूरा हो चुका कोड नीचे दिया गया है.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. Lambda के अंदर, chip रिटर्न करने से ठीक पहले, क्लिक लिसनर जोड़ें. chip पर क्लिक होने पर, उसकी स्थिति checked पर सेट करें. viewModel में onFilterChanged() को कॉल करें, जो उन इवेंट के क्रम को ट्रिगर करता है जो इस फ़िल्टर के नतीजे को फ़ेच करते हैं.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. Lamb के आखिर में, chipGroup में मौजूद सभी व्यू को हटाएं. इसके बाद, children से सभी चिप को chipGroup में जोड़ें. (आप चिप को अपडेट नहीं कर सकते इसलिए, आपको chipGroup का कॉन्टेंट हटाना और फिर से बनाना होगा.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

आपका पूरा ऑब्ज़र्वर इस तरह से होना चाहिए:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. अपने नए चिप का इस्तेमाल करने के लिए अपना ऐप्लिकेशन चलाएं और GDGS खोजें, ताकि आप Search स्क्रीन खोल सकें. हर चिप पर क्लिक करने पर ऐप्लिकेशन, उसके नीचे फ़िल्टर ग्रुप दिखाएगा.

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

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

पहला चरण: नाइट मोड की सुविधा चालू करना

अपने ऐप्लिकेशन के लिए गहरे रंग वाली थीम देने के लिए, आपको इसकी थीम Light से बदलकर DayNight नाम वाली थीम करनी होगी. मोड के आधार पर, DayNight थीम हल्के या गहरे रंग की दिखती है.

1. styles.xml, में AppTheme की पैरंट थीम को Light से बदलकर DayNight करें.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. MainActivity और #39 के onCreate() तरीके में, गहरे रंग वाली थीम को प्रोग्रामैटिक तौर पर चालू करने के लिए AppCompatDelegate.setDefaultNightMode() को कॉल करें.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. ऐप्लिकेशन चलाएं और पुष्टि करें कि यह गहरे रंग वाली थीम पर स्विच है.

दूसरा चरण: खुद का गहरे रंग वाला थीम रंग जनरेट करना

गहरे रंग वाली थीम को पसंद के मुताबिक बनाने के लिए, -night क्वालीफ़ायर की मदद से, गहरे रंग वाली थीम का इस्तेमाल करें. उदाहरण के लिए, values-night नाम का फ़ोल्डर बनाकर आप नाइट मोड में खास रंगों का इस्तेमाल कर सकते हैं.

1. material.io कलर पिकर टूल पर जाएं और नाइट थीम वाला रंग पटल बनाएं. उदाहरण के लिए, इसका रंग गहरा नीला हो सकता है.
2. colors.xml फ़ाइल जनरेट और डाउनलोड करें.
3. अपने प्रोजेक्ट में सभी फ़ोल्डर को सूची में शामिल करने के लिए, प्रोजेक्ट फ़ाइल व्यू पर स्विच करें.
4. res फ़ोल्डर ढूंढें और उसे बड़ा करें.
5. res/values-night संसाधन फ़ोल्डर बनाएं.
6. res/values-night संसाधन फ़ोल्डर में नई colors.xml फ़ाइल जोड़ें.
7. नाइट मोड चालू होने पर भी अपना ऐप्लिकेशन चलाएं. ऐप्लिकेशन में res/values-night के लिए तय किए गए नए रंगों का इस्तेमाल करें. ध्यान दें कि चिप नए सेकंडरी कलर का इस्तेमाल करते हैं.

Android Studio प्रोजेक्ट: GDGFinderfinal.

आरटीएल भाषाओं के लिए सहायता

• Android मेनिफ़ेस्ट में, android:supportsRtl="true" सेट करें.
• आप एम्युलेटर में आरटीएल की झलक देख सकते हैं. साथ ही, स्क्रीन लेआउट की जांच करने के लिए, अपनी भाषा का इस्तेमाल कर सकते हैं. किसी डिवाइस या एम्युलेटर पर, सेटिंग खोलें. इसके बाद, डेवलपर के लिए सेटिंग और टूल में, ज़बरदस्ती आरटीएल लेआउट चुनें.
• Left और Right का रेफ़रंस बदलकर Start और End का रेफ़रंस दें.
• android:autoMirrored="true" को ड्रॉ करने के लिए, ड्रॉ करने की सुविधा बंद करें.
• Android Studio को अपने काम की अनुमति देने के लिए, जहां ज़रूरत हो वहां RTL &rt; RTL सहायता जोड़ें चुनें.
• भाषा के हिसाब से संसाधन स्टोर करने के लिए, values-&quat;language code&kot; फ़ोल्डर का इस्तेमाल करें.

सुलभता के लिए स्कैन करना

• 'Play स्टोर' में, Google LLC का सुलभता जांचने वाला ऐप पाएं और इसे स्कैन करके, स्क्रीन एलिमेंट को स्कैन करें, ताकि ऐप्लिकेशन को बेहतर बनाया जा सके.

कॉन्टेंट के ब्यौरे के साथ टॉकबैक के लिए डिज़ाइन करना

• Google का Android Accessibility Suite इंस्टॉल करें. इसमें टॉकबैक की सुविधा भी शामिल है.
• सभी यूज़र इंटरफ़ेस (यूआई) एलिमेंट में कॉन्टेंट की जानकारी जोड़ें. उदाहरण के लिए:
  android:contentDescription="@string/stage_image_description"
• EditText जैसे बदलाव करने लायक एलिमेंट के लिए, एक्सएमएल में android:hint एट्रिब्यूट का इस्तेमाल करें. इससे उपयोगकर्ता को यह संकेत देने में मदद मिलती है कि टाइप करने के लिए क्या करना ज़रूरी है.
• व्यू ग्रुप में मिलते-जुलते एलिमेंट को रैप करके कॉन्टेंट ग्रुप बनाएं.
• उपयोगकर्ताओं को android:accessibilityLiveRegion के बारे में ज़्यादा सुझाव देने के लिए, लाइव क्षेत्र बनाएं.

फ़िल्टर लागू करने के लिए, चिप का इस्तेमाल करना

• चिप, छोटे एलिमेंट होते हैं, जो किसी एट्रिब्यूट, टेक्स्ट, इकाई या कार्रवाई को दिखाते हैं.
• चिप का ग्रुप बनाने के लिए, com.google.android.material.chip.ChipGroup का इस्तेमाल करें.
• एक com.google.android.material.chip.Chip के लिए लेआउट तय करें.
• अगर आप अपने चिप का रंग बदलना चाहते हैं, तो <selector> के तौर पर रंग की सूची दें और स्थिति के रंग के बारे में बताएं:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• व्यू मॉडल में डेटा के लिए ऑब्ज़र्वर जोड़कर, चिप को लाइव डेटा से बाइंड करें.
• चिप दिखाने के लिए, चिप ग्रुप में इनफ़्लेटर बनाएं:
  LayoutInflater.from(chipGroup.context)
• चिप बनाएं, क्लिक लिसनर जोड़ें, जो मनचाहे कार्रवाई को ट्रिगर करता है और चिप को चिप ग्रुप में जोड़ें.

गहरे रंग वाले मोड के इस्तेमाल की सुविधा

• गहरे रंग वाले मोड का इस्तेमाल करने के लिए, DayNight AppTheme का इस्तेमाल करें.
• आप गहरे रंग वाले मोड को प्रोग्रामैटिक तरीके से सेट कर सकते हैं:
  AppCompatDelegate.setDefaultNightMode()
• गहरे रंग वाले मोड में अपने हिसाब से रंग और वैल्यू देने के लिए, res/values-night संसाधन फ़ोल्डर बनाएं.

Android डेवलपर दस्तावेज़:

• LayoutDirection (आरटीएल)
• दोतरफ़ा
• सुलभता जांचने वाले ऐप्लिकेशन का इस्तेमाल शुरू करना
• टॉकबैक
• टॉकबैक जेस्चर
• ड्रॉ करने लायक खास जानकारी देने वाले दस्तावेज़
• कॉन्टेंट डिस्क्रिप्टर
• कॉन्टेंट ग्रुपिंग
• लाइव रीजन
• NinePatch ड्रॉ करने लायक
• नौ-पैच वाला टूल ड्रॉ करना
• चिप
• ChipGroup
• गहरे रंग वाली थीम
• रंग भरने की सुविधा
• कलर टूल
• ड्रॉ करने लायक ग्राफ़िक

अन्य संसाधन:

• Kotlin के साथ Android ऐप्लिकेशन डेवलप करना (Udacity कोर्स)
• प्रोग्रामर के लिए Kotlin बूटकैंप (Udacity कोर्स)
• प्रोग्रामर कोडलैब (कोड बनाना सीखना) के लिए Kotlin बूटकैंप

इस सेक्शन में उन छात्र-छात्राओं के लिए गृहकार्य की असाइनमेंट की सूची दी गई है जो इस कोडलैब के ज़रिए एक शिक्षक की देखरेख में कोर्स में काम कर रहे हैं. यह क्रिएटर का काम #33 पर निर्भर करता है:

• अगर ज़रूरी हो, तो होमवर्क असाइन करें.
• छात्र-छात्राओं को होमवर्क के असाइनमेंट सबमिट करने के तरीके के बारे में बताएं.
• होमवर्क असाइनमेंट को ग्रेड दें.

शिक्षक इन सुझावों का इस्तेमाल जितनी चाहें उतनी कम या ज़्यादा कर सकते हैं. साथ ही, उन्हें अपने हिसाब से कोई भी होमवर्क असाइन करना चाहिए.

अगर आप इस कोडलैब के ज़रिए खुद काम कर रहे हैं, तो बेझिझक इन होमवर्क असाइनमेंट का इस्तेमाल करें.

पहला सवाल

दाएं से बाएं भाषा का इस्तेमाल करने के लिए इनमें से कौनसा विकल्प ज़रूरी है?

▢ Start और End वाली प्रॉपर्टी में Left और Right को बदलें

▢ आरटीएल भाषा पर स्विच करें

▢ पक्का करें कि सभी आइकॉन android:autoMirrored="true" का इस्तेमाल करते हैं

▢ कॉन्टेंट के बारे में जानकारी दें

दूसरा सवाल

ज़्यादातर Android डिवाइस में, इनमें से कौनसा सुलभता टूल पहले से मौजूद है?

▢टॉकबैक

▢ सुलभता स्कैनर

▢ Android Studio में, जहां संभव हो वहां RACTOR सहायता जोड़ें

▢ लिंट

तीसरा सवाल

चिप के बारे में इनमें से कौनसी बात सही नहीं है?

▢ आप ChipGroup के तौर पर चिप दिखाते हैं.

▢ आप ChipGroup के लिए रंग की स्थिति बता सकते हैं.

▢ चिप छोटे एलिमेंट होते हैं, जो इनपुट, एट्रिब्यूट या ऐक्शन दिखाते हैं.

▢ अगर आपका ऐप्लिकेशन चिप का इस्तेमाल करता है, तो आपको हमेशा DarkTheme चालू करना होगा.

चौथा सवाल

कौनसी थीम आपको गहरे और हल्के रंग वाले मोड के लिए स्टाइल करती है?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

पांचवां सवाल

लाइव क्षेत्र क्या है?

▢ नोड जिसमें उपयोगकर्ता के लिए ज़रूरी जानकारी होती है

▢स्क्रीन का वह इलाका जो आकार से जुड़े दिशा-निर्देशों के मुताबिक आकार में बदलाव करता है

▢ ऐसा व्यू जो वीडियो स्ट्रीम करने की सुविधा देता हो

▢ ऐनिमेट किया जा सकने वाला ड्रॉ करने लायक गेम