Kotlin Android Fundamentals 10.3: Design for everyone

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

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

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

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

परिचय

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

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

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

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

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

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

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

आपको क्या सीखने को मिलेगा

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

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

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

GDG-finder starter ऐप्लिकेशन, इस कोर्स में अब तक सीखी गई सभी चीज़ों पर आधारित है.

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

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

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

अगर आपके इलाके में कोई GDG है, तो उसकी वेबसाइट पर जाकर उसके इवेंट के लिए साइन अप करें! GDG इवेंट, अन्य Android डेवलपर से मिलने और इंडस्ट्री के सबसे सही तरीकों के बारे में जानने का एक बेहतरीन तरीका है. इस कोर्स में शामिल नहीं किए गए तरीकों के बारे में भी यहां जाना जा सकता है.

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

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

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

पहला चरण: आरटीएल की सुविधा जोड़ना

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

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

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

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

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

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

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

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

दूसरा चरण: बाएं और दाएं के बजाय शुरू और खत्म होने की जानकारी का इस्तेमाल करना

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

इस समस्या को ठीक करने के लिए, "बाएं" और "दाएं" के बजाय, 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 के layout_marginLeft को layout_marginStart से बदलें. इससे मार्जिन सही जगह पर चला जाता है, ताकि आइकॉन को स्क्रीन के किनारे से दूर ले जाया जा सके.

<ImageView
android:layout_marginStart="
?

4. fragment_gdg_list.xml खोलें. Preview पैनल में, GDG की सूची देखें. ध्यान दें कि आइकॉन अब भी गलत दिशा में दिख रहा है, क्योंकि यह मिरर किया गया है. अगर आइकॉन मिरर नहीं किया गया है, तो पक्का करें कि आपने दाईं से बाईं ओर की झलक देखी हो. Material Design के दिशा-निर्देशों के मुताबिक, आइकॉन को मिरर नहीं किया जाना चाहिए.
5. res/drawable/ic_gdg.xml खोलें.
6. मिररिंग की सुविधा बंद करने के लिए, एक्सएमएल कोड की पहली लाइन में जाकर android:autoMirrored="true" ढूंढें और उसे मिटाएं.
7. झलक देखें या ऐप्लिकेशन को फिर से चलाएं और 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 में, Refactor > Add RTL support where possible को चुनें. इसके बाद, मेनिफ़ेस्ट और लेआउट फ़ाइलों को अपडेट करने के लिए बॉक्स पर सही का निशान लगाएं, ताकि स्टार्ट और एंड प्रॉपर्टी का इस्तेमाल किया जा सके.

3. Refactoring Preview पैनल में, app फ़ोल्डर ढूंढें और उसे तब तक बड़ा करें, जब तक उसकी पूरी जानकारी न दिख जाए.
4. ऐप्लिकेशन फ़ोल्डर में, ध्यान दें कि आपने अभी-अभी जिस layout_marginLeft को बदला है उसे रिफ़ैक्टर करने के लिए कोड के तौर पर लिस्ट किया गया है.

5. ध्यान दें कि झलक में सिस्टम और लाइब्रेरी फ़ाइलें भी दिखती हैं. layout, layout-watch-v20, और app फ़ोल्डर के अलावा अन्य फ़ोल्डर पर राइट क्लिक करें. इसके बाद, संदर्भ मेन्यू से शामिल न करें को चुनें.

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

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

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

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

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

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

1. Android Studio में, प्रोजेक्ट व्यू को प्रोजेक्ट फ़ाइलें पर स्विच करें.
2. res फ़ोल्डर को बड़ा करें. इसके बाद, res/values और res/values-es के फ़ोल्डर देखें. फ़ोल्डर के नाम में मौजूद "es", स्पैनिश का भाषा कोड है. values-"भाषा कोड" फ़ोल्डर में, हर उस भाषा के लिए वैल्यू होती हैं जो ऐप्लिकेशन पर काम करती है. एक्सटेंशन के बिना values फ़ोल्डर में, डिफ़ॉल्ट संसाधन होते हैं. ये संसाधन, अन्य स्थितियों में लागू होते हैं.

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

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

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

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

पहला चरण: Accessibility Scanner को इंस्टॉल करके चालू करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TalkBack, कई फ़िज़िकल डिवाइसों पर पहले से इंस्टॉल होता है. हालांकि, एम्युलेटर पर इसे इंस्टॉल करना पड़ता है.

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

अहम जानकारी: अगर आपको कुछ भी सुनाई नहीं दे रहा है, तो आवाज़ बढ़ाएं!

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

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

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

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

1. GDG Finder ऐप्लिकेशन चालू करें और TalkBack की सुविधा चालू करें. इसके बाद, 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. TalkBack की सुविधा चालू करके अपना ऐप्लिकेशन चलाएं. साथ ही, GDG चलाने के लिए आवेदन करने के लिए फ़ॉर्म भरें.

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

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

यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को ग्रुप करने के लिए, उन्हें ViewGroup में रैप करें. जैसे, 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. सभी कोड को सही तरीके से इंडेंट करने के लिए, कोड > कोड को फिर से फ़ॉर्मैट करें चुनें.
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. अपना ऐप्लिकेशन चलाएं और TalkBack की मदद से, GDG चलाने के लिए आवेदन करें स्क्रीन पर जाएं.

पांचवां चरण: लाइव क्षेत्र जोड़ना

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

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

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

android:text="@string/submit"

3. android:accessibilityLiveRegion एट्रिब्यूट सेट करके, बटन में लाइव रीजन जोड़ें. टाइप करते समय, आपके पास इसकी वैल्यू के लिए कई विकल्प होते हैं. बदलाव कितना ज़रूरी है, इसके आधार पर यह तय किया जा सकता है कि उपयोगकर्ता को बीच में रोकना है या नहीं. "assertive" वैल्यू का इस्तेमाल करने पर, ऐक्सेसिबिलिटी सेवाएं, इस व्यू में हुए बदलावों के बारे में तुरंत बताने के लिए, चल रहे भाषण को रोक देती हैं. अगर वैल्यू को "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 में, बटन के 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 ऐप्लिकेशन में मौजूद इमेज. साथ ही, वेक्टर ड्राइंग का इस्तेमाल करके, अपनी पसंद की कोई भी चीज़ बनाई जा सकती है. इसके अलावा, एक और तरह का ड्रॉएबल होता है, जिसे ज़रूरत के हिसाब से छोटा या बड़ा किया जा सकता है. इसे a 9-पैच ड्रॉएबल कहा जाता है. इसके बारे में इस कोडलैब में नहीं बताया गया है. GDG का लोगो, drawable/ic_gdg.xml में मौजूद है. यह एक और ड्रॉएबल है.

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

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

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

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

1. fragment_gdg_list.xml खोलें.
2. HorizontalScrollView. के अंदर com.google.android.material.chip.ChipGroup बनाएं. इसकी 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. layout फ़ोल्डर में, region.xml नाम की नई लेआउट रिसॉर्स फ़ाइल बनाएं. इससे एक Chip के लिए लेआउट तय किया जा सकेगा.
4. egion.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 के नतीजे दिखते हैं.

ध्यान दें: यह सूची कैसे बनाई जाती है और नतीजों को कैसे फ़िल्टर किया जाता है, यह इस कोडलैब का हिस्सा नहीं है. अगर आपको यह जानना है कि GDG की सूची कैसे मिलती है और फ़िल्टर करने की सुविधा कैसे लागू की जाती है, तो search और network पैकेज में मौजूद फ़ाइलें देखें. खास तौर पर, 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() के अंदर, शून्य की जांच के नीचे, binding.regionList को chipGroup नाम के नए वैरिएबल को असाइन करें, ताकि 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. लैंबडा में, chip को वापस लाने से ठीक पहले, क्लिक लिसनर जोड़ें. chip पर क्लिक करने पर, इसकी स्थिति को checked पर सेट करें. onFilterChanged() में onFilterChanged() को कॉल करें. इससे इवेंट का एक ऐसा क्रम ट्रिगर होता है जो इस फ़िल्टर के लिए नतीजा फ़ेच करता है.viewModel

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

9. लंबवत बार के आखिर में, 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 खोजें. इससे खोजें स्क्रीन खुलेगी और नए चिप इस्तेमाल किए जा सकेंगे. हर चिप पर क्लिक करने से, ऐप्लिकेशन में उसके नीचे फ़िल्टर ग्रुप दिखेंगे.

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

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

पहला चरण: नाइट मोड चालू करना

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

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

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

2. MainActivity के 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. नई colors.xml फ़ाइल को res/values-night रिसॉर्स फ़ोल्डर में जोड़ें.
7. अपने ऐप्लिकेशन को नाइट मोड में ही चलाएं. ऐप्लिकेशन को res/values-night के लिए तय किए गए नए रंगों का इस्तेमाल करना चाहिए. ध्यान दें कि चिप में, दूसरे रंग का इस्तेमाल किया गया है.

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

दाएं से बाएं लिखी जाने वाली भाषाओं के लिए सहायता

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

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

• Play Store से, Google LLC का Accessibility Scanner डाउनलोड करें. इसके बाद, इसे चलाकर स्क्रीन के एलिमेंट को बेहतर बनाने के लिए स्कैन करें.

कॉन्टेंट की जानकारी के साथ TalkBack के लिए डिज़ाइन करना

• Google का Android Accessibility Suite इंस्टॉल करें. इसमें TalkBack की सुविधा शामिल होती है.
• सभी यूज़र इंटरफ़ेस (यूआई) एलिमेंट में कॉन्टेंट की जानकारी जोड़ें. उदाहरण के लिए:
  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 (RTL)
• दोनों भाषाओं में काम करने की सुविधा
• Accessibility Scanner का इस्तेमाल शुरू करना
• TalkBack
• TalkBack के जेस्चर
• ड्रॉएबल की खास जानकारी देने वाले दस्तावेज़
• कॉन्टेंट के बारे में जानकारी देने वाले एलिमेंट
• कॉन्टेंट ग्रुपिंग
• लाइव रीजन
• NinePatch drawables
• Draw 9-patch टूल
• चिप्स
• ChipGroup
• गहरे रंग वाली थीम
• रंगों की थीम तय करना
• कलर टूल
• ड्रॉ किए जा सकने वाले ग्राफ़िक को ऐनिमेट करना

अन्य संसाधन:

• Kotlin की मदद से Android ऐप्लिकेशन बनाना (Udacity का कोर्स)
• Kotlin Bootcamp for Programmers (Udacity का कोर्स)
• प्रोग्रामर के लिए Kotlin Bootcamp के कोडलैब

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

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

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

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

पहला सवाल

दाएं से बाएं लिखी जाने वाली भाषाओं के लिए, इनमें से कौनसी सुविधा ज़रूरी है?

▢ प्रॉपर्टी में मौजूद Left और Right को Start और End से बदलें

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

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

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

दूसरा सवाल

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

▢ TalkBack

▢ Accessibility Scanner

▢ Android Studio में, Refactor > Add RTL support where possible

▢ Lint

तीसरा सवाल

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

▢ आपने ChipGroup के हिस्से के तौर पर चिप दिखाए हों.

▢ ChipGroup के लिए, कलर स्टेट लिस्ट दी जा सकती है.

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

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

चौथा सवाल

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

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

पांचवां सवाल

लाइव रीजन क्या होता है?

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

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

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

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