Kotlin Android Fundamentals 10.1: स्टाइल और थीम

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

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

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

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

डिज़ाइन के बारे में जानकारी

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

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

डिज़ाइन का दूसरा लेवल, यूज़र फ़्लो या इस्तेमाल के उदाहरण बनाना है. इससे उपयोगकर्ताओं को टास्क पूरा करने में मदद मिलती है. इस तरह के डिज़ाइन को उपयोगकर्ता अनुभव डिज़ाइन (यूएक्सडी) कहा जाता है. कुछ डिज़ाइनर इसमें विशेषज्ञ होते हैं.

अगर आपके पास किसी डिज़ाइनर का ऐक्सेस नहीं है, तो यहां दी गई सलाह की मदद से शुरुआत करें:

• इस्तेमाल के उदाहरण तय करें. लिखें कि उपयोगकर्ताओं को आपके ऐप्लिकेशन से क्या-क्या काम करने चाहिए और कैसे.
• कोई डिज़ाइन लागू करें. अपने पहले ड्राफ़्ट से न जुड़ें. उसे सिर्फ़ "ठीक-ठाक" बनाएं, क्योंकि असली उपयोगकर्ताओं के साथ इंटरैक्ट करने के बाद, आपको इसे बदलना होगा.
• सुझाव/राय पाएं. ऐसे लोगों को ढूंढें जो आपके ऐप्लिकेशन को टेस्ट कर सकें. जैसे, आपके परिवार के सदस्य, दोस्त या Google Developer Group में हाल ही में मिले लोग. उन्हें अपना ऐप्लिकेशन इस्तेमाल करने के लिए कहें, ताकि आप देख सकें और उसके बारे में ज़्यादा जानकारी वाले नोट बना सकें.
• बेहतर बनाएं! इस जानकारी का इस्तेमाल करके, ऐप्लिकेशन को बेहतर बनाएं. इसके बाद, उसे फिर से टेस्ट करें.

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

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

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

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

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

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

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

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

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

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

• Android के स्टाइलिंग सिस्टम की बुनियादी बातें
• अपने ऐप्लिकेशन को पसंद के मुताबिक बनाने के लिए, एट्रिब्यूट, स्टाइल, और थीम का इस्तेमाल करने का तरीका

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

• व्यू एट्रिब्यूट, स्टाइल, और थीम का इस्तेमाल करके, स्टार्टर ऐप्लिकेशन के डिज़ाइन को बेहतर बनाना

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

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

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

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

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

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

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

एट्रिब्यूट देखना

• हर व्यू के लिए अलग एट्रिब्यूट सेट करने के लिए, व्यू एट्रिब्यूट का इस्तेमाल करें. (स्टाइल की तरह, व्यू एट्रिब्यूट का दोबारा इस्तेमाल नहीं किया जा सकता.)
• आपके पास हर उस प्रॉपर्टी का इस्तेमाल करने का विकल्प होता है जिसे स्टाइल या थीम के ज़रिए सेट किया जा सकता है.

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

स्टाइल

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

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

डिफ़ॉल्ट स्टाइल

• यह Android सिस्टम की ओर से दी गई डिफ़ॉल्ट स्टाइलिंग है.

थीम

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

TextAppearance

• सिर्फ़ टेक्स्ट एट्रिब्यूट के साथ स्टाइलिंग के लिए, जैसे कि fontFamily.

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

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

इस टास्क में, ऐप्लिकेशन लेआउट में मौजूद टेक्स्ट के हेडर को स्टाइल करने के लिए एट्रिब्यूट का इस्तेमाल किया जाता है.

1. GDG-finder starter app डाउनलोड करें और चलाएं.
2. ध्यान दें कि होम स्क्रीन पर एक ही तरह से फ़ॉर्मैट किया गया बहुत सारा टेक्स्ट है. इससे यह पता लगाना मुश्किल हो जाता है कि पेज किस बारे में है और कौनसी जानकारी अहम है.
3. home_fragment.xml लेआउट फ़ाइल खोलें.
4. ध्यान दें कि लेआउट में ScrollView के अंदर एलिमेंट को पोज़िशन करने के लिए, ConstraintLayout का इस्तेमाल किया जाता है.
5. ध्यान दें कि हर व्यू के लिए, कंस्ट्रेंट और मार्जिन लेआउट एट्रिब्यूट व्यू में सेट किए जाते हैं. ऐसा इसलिए, क्योंकि इन एट्रिब्यूट को हर व्यू और स्क्रीन के लिए पसंद के मुताबिक बनाया जाता है.
6. title टेक्स्ट व्यू में, टेक्स्ट का साइज़ 24sp में बदलने के लिए, textSize एट्रिब्यूट जोड़ें.
   
   आपको याद दिला दें कि sp का मतलब स्केल-इंडिपेंडेंट पिक्सल होता है. इन्हें पिक्सल डेंसिटी और फ़ॉन्ट के साइज़ की उस सेटिंग के हिसाब से स्केल किया जाता है जिसे उपयोगकर्ता ने अपने डिवाइस की सेटिंग में सेट किया है. Android, टेक्स्ट को रेंडर करते समय यह तय करता है कि स्क्रीन पर टेक्स्ट का साइज़ कितना होना चाहिए. टेक्स्ट के साइज़ के लिए हमेशा sp का इस्तेमाल करें.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

7. title टेक्स्ट व्यू के textColor को अपारदर्शी ग्रे पर सेट करें. इसके लिए, इसे #FF555555 की aRGB वैल्यू पर सेट करें.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

8. Android Studio में झलक देखें टैब खोलने के लिए, व्यू > टूल विंडो > झलक देखें को चुनें. इसके अलावा, लेआउट एडिटर के दाईं ओर मौजूद वर्टिकल झलक देखें बटन पर क्लिक करें. झलक में देखें कि टाइटल का रंग धूसर हो गया हो और वह पहले से बड़ा हो गया हो. जैसा कि यहां दिखाया गया है.

अहम जानकारी: aRGB वैल्यू से किसी रंग की ऐल्फ़ा पारदर्शिता, लाल रंग की वैल्यू, हरे रंग की वैल्यू, और नीले रंग की वैल्यू का पता चलता है. aRGB वैल्यू, हर कलर कॉम्पोनेंट के लिए 00 से FF तक के हेक्साडेसिमल नंबर का इस्तेमाल करती है.

#(alpha)(red)(green)(blue)

#(00-FF)(00-FF)(00-FF)(00-FF)

उदाहरण:

• #FFFF0000 ओपेक रेड के लिए
• #5500FF00 आधा-पारदर्शी हरे रंग के लिए
• #FF0000FF ओपेक नीले रंग के लिए

9. सबटाइटल को हेडर के रंग में स्टाइल करें. साथ ही, इसका फ़ॉन्ट छोटा रखें, 18sp. (डिफ़ॉल्ट ऐल्फ़ा FF है, जो अपारदर्शी होता है. अगर आपको ऐल्फ़ा वैल्यू में बदलाव नहीं करना है, तो इसे हटाया जा सकता है.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

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

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

11. आगे बढ़ने से पहले, subtitle व्यू से textAllCaps, textStyle, और background एट्रिब्यूट को पहले जैसा करना न भूलें.
12. अपने ऐप्लिकेशन को चलाएं. अब यह पहले से बेहतर दिखना चाहिए.

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

Android, ऐप्लिकेशन को Downloadable Fonts API का इस्तेमाल करके, रनटाइम के दौरान फ़ॉन्ट डाउनलोड करने की सुविधा देता है. अगर आपका ऐप्लिकेशन, डिवाइस पर मौजूद किसी दूसरे ऐप्लिकेशन के फ़ॉन्ट का इस्तेमाल करता है, तो Android सिर्फ़ एक बार फ़ॉन्ट डाउनलोड करता है. इससे डिवाइस का स्टोरेज स्पेस बचता है.

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

पहला चरण: डाउनलोड किए जा सकने वाले फ़ॉन्ट का इस्तेमाल करना

1. डिज़ाइन टैब में जाकर, home_fragment.xml खोलें.
2. कॉम्पोनेंट ट्री पैनल में, title टेक्स्ट व्यू चुनें.
3. एट्रिब्यूट पैनल में जाकर, fontFamily एट्रिब्यूट ढूंढें. इसे सभी एट्रिब्यूट सेक्शन में जाकर देखा जा सकता है. इसके अलावा, इसे खोजा भी जा सकता है.
4. ड्रॉप-डाउन ऐरो पर क्लिक करें.
5. नीचे की ओर स्क्रोल करके ज़्यादा फ़ॉन्ट पर जाएं और इसे चुनें. इससे संसाधन विंडो खुल जाएगी.

6. संसाधन विंडो में, lobster या सिर्फ़ lo खोजें.
7. नतीजों में, Lobster Two चुनें.
8. दाईं ओर, फ़ॉन्ट के नाम के नीचे, डाउनलोड किया जा सकने वाला फ़ॉन्ट बनाएं रेडियो बटन चुनें. ठीक है पर क्लिक करें.
9. Android मेनिफ़ेस्ट फ़ाइल खोलें.
10. मेनिफ़ेस्ट में सबसे नीचे, <meta-data> टैग ढूंढें. इसमें name और resource एट्रिब्यूट की वैल्यू "preloaded_fonts" पर सेट होनी चाहिए. इस टैग से Google Play services को पता चलता है कि यह ऐप्लिकेशन, डाउनलोड किए गए फ़ॉन्ट का इस्तेमाल करना चाहता है. जब आपका ऐप्लिकेशन चलता है और Lobster Two फ़ॉन्ट का अनुरोध करता है, तो फ़ॉन्ट उपलब्ध कराने वाली कंपनी इंटरनेट से फ़ॉन्ट डाउनलोड करती है. ऐसा तब होता है, जब फ़ॉन्ट पहले से डिवाइस पर उपलब्ध न हो.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

11. res/values फ़ोल्डर में, preloaded_fonts.xml फ़ाइल ढूंढें. यह फ़ाइल, उस ऐरे को तय करती है जिसमें इस ऐप्लिकेशन के लिए डाउनलोड किए जा सकने वाले सभी फ़ॉन्ट की सूची होती है.
12. इसी तरह, res/fonts/lobster_two.xml फ़ाइल में फ़ॉन्ट के बारे में जानकारी होती है.
13. home_fragment.xml खोलें. कोड और झलक में देखें कि Lobster Two फ़ॉन्ट, title TextView पर लागू किया गया है. इसलिए, यह टाइटल पर भी लागू हो गया है.

14. res/values/styles.xml खोलें और प्रोजेक्ट के लिए बनाई गई डिफ़ॉल्ट AppTheme थीम देखें. फ़िलहाल, यह इस तरह दिखता है. सभी टेक्स्ट पर Lobster Two फ़ॉन्ट लागू करने के लिए, आपको इस थीम को अपडेट करना होगा.
    
15. <style> टैग में, parent एट्रिब्यूट देखें. हर स्टाइल टैग, पैरंट टैग के बारे में जानकारी दे सकता है. साथ ही, पैरंट टैग के सभी एट्रिब्यूट को इनहेरिट कर सकता है. इस कोड से, Android लाइब्रेरी में तय किए गए Theme के बारे में पता चलता है. MaterialComponents थीम, जिसमें बटन के काम करने के तरीके से लेकर टूलबार बनाने के तरीके तक की जानकारी होती है. इस थीम में डिफ़ॉल्ट रूप से काम की सेटिंग होती हैं. इसलिए, सिर्फ़ उन हिस्सों को अपनी पसंद के मुताबिक बनाया जा सकता है जिनमें आपको बदलाव करना है. ऐप्लिकेशन में, इस थीम के Light वर्शन का इस्तेमाल किया जाता है. इसमें ऐक्शन बार (NoActionBar) शामिल नहीं है. जैसा कि ऊपर दिए गए स्क्रीनशॉट में देखा जा सकता है.
    

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

16. AppTheme स्टाइल में, फ़ॉन्ट फ़ैमिली को lobster_two पर सेट करें. आपको android:fontFamily और fontFamily, दोनों सेट करने होंगे, क्योंकि पैरंट थीम इन दोनों का इस्तेमाल करती है. बदलावों की झलक देखने के लिए, डिज़ाइन टैब में जाकर home_fragment.xml पर क्लिक करें.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

17. ऐप्लिकेशन को फिर से चलाएं. नया फ़ॉन्ट, सभी टेक्स्ट पर लागू हो गया है! नेविगेशन ड्रॉअर खोलें और दूसरी स्क्रीन पर जाएं. आपको दिखेगा कि वहां भी फ़ॉन्ट लागू हो गया है.

दूसरा चरण: टाइटल पर थीम लागू करना

1. home_fragment.xml में, title टेक्स्ट व्यू ढूंढें. इसमें lobster_two फ़ॉन्ट के लिए एट्रिब्यूट होता है. fontFamily एट्रिब्यूट मिटाएं और ऐप्लिकेशन चलाएं. थीम एक ही फ़ॉन्ट फ़ैमिली सेट करती है, इसलिए इसमें कोई बदलाव नहीं होता.
2. title टेक्स्ट व्यू में कोई दूसरा fontFamily एट्रिब्यूट वापस डालें:
   app:fontFamily="serif-monospace"
पक्का करें कि यह app स्पेस में हो!

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

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

4. title टेक्स्ट व्यू से fontFamily एट्रिब्यूट हटाएं.

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

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

पहला चरण: स्टाइल बनाना

1. res/values/styles.xml खोलें.
2. <resources> टैग में, <style> टैग का इस्तेमाल करके नई स्टाइल तय करें. इसके लिए, यहां दिया गया तरीका अपनाएं.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

स्टाइल के नाम रखते समय, उन्हें सिमैंटिक के तौर पर सोचना ज़रूरी है. स्टाइल का नाम, इस आधार पर चुनें कि स्टाइल का इस्तेमाल किस लिए किया जाएगा. यह इस आधार पर न चुनें कि स्टाइल से किन प्रॉपर्टी पर असर पड़ता है. उदाहरण के लिए, इस स्टाइल को Title कहें, न कि LargeFontInGrey. इस स्टाइल का इस्तेमाल, आपके ऐप्लिकेशन में मौजूद किसी भी टाइटल के लिए किया जाएगा. आम तौर पर, TextAppearance स्टाइल को TextAppearance.Name कहा जाता है. इसलिए, इस मामले में नाम TextAppearance.Title है.

स्टाइल का पैरंट होता है. ठीक वैसे ही जैसे थीम का पैरंट हो सकता है. हालांकि, इस बार स्टाइल, थीम को बढ़ाने के बजाय स्टाइल को बढ़ाती है, TextAppearance.MaterialComponents.Headline6. यह स्टाइल, MaterialComponents थीम के लिए डिफ़ॉल्ट टेक्स्ट स्टाइल है. इसलिए, इसे बढ़ाने पर आपको डिफ़ॉल्ट स्टाइल में बदलाव करने का विकल्प मिलता है. इसके लिए, आपको शुरू से काम करने की ज़रूरत नहीं होती.

3. नई स्टाइल में, दो आइटम तय करें. किसी एक आइटम के लिए, textSize एट्रिब्यूट की वैल्यू 24sp पर सेट करें. दूसरे आइटम में, textColor को पहले इस्तेमाल किए गए गहरे भूरे रंग पर सेट करें.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. सबटाइटल के लिए कोई दूसरी स्टाइल तय करें. इसे TextAppearance.Subtitle नाम दें.
5. TextAppearance.Title से सिर्फ़ टेक्स्ट के साइज़ में अंतर होगा. इसलिए, इस स्टाइल को TextAppearance.Title का चाइल्ड बनाएं.
6. Subtitle स्टाइल में, टेक्स्ट का साइज़ 18sp पर सेट करें. यहां पूरी स्टाइल दी गई है:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

दूसरा चरण: बनाया गया स्टाइल लागू करना

1. home_fragment.xml में, TextAppearance जोड़ें.title टेक्स्ट व्यू पर Title स्टाइल लागू करें. textSize और textColor एट्रिब्यूट हटाएं.
   
   थीम, आपके सेट की गई किसी भी TextAppearance स्टाइलिंग को बदल देती हैं. (कोडलैब की शुरुआत में मौजूद पिरामिड डायग्राम में, स्टाइलिंग लागू करने का क्रम दिखाया गया है.) स्टाइल को TextAppearance के तौर पर लागू करने के लिए, textAppearance प्रॉपर्टी का इस्तेमाल करें. इससे Theme में सेट किया गया फ़ॉन्ट, यहां सेट किए गए फ़ॉन्ट को बदल देगा.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. साथ ही, subtitle टेक्स्ट व्यू में TextAppearance.Subtitle स्टाइल जोड़ें. इसके अलावा, textSize और textColor एट्रिब्यूट मिटाएं. आपको इस स्टाइल को textAppearance के तौर पर भी लागू करना होगा, ताकि थीम में सेट किया गया फ़ॉन्ट, आपके सेट किए गए फ़ॉन्ट को बदल सके.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

अहम जानकारी: अगर आपके पास टेक्स्ट में बदलाव करने के लिए थीम और स्टाइल, दोनों हैं, तो आपको टेक्स्ट प्रॉपर्टी को textAppearance एट्रिब्यूट के तौर पर लागू करना होगा. ऐसा तब करें, जब आपको थीम में मौजूद टेक्स्ट प्रॉपर्टी को स्टाइल में सेट और इनहेरिट की गई प्रॉपर्टी पर लागू करना हो.

3. ऐप्लिकेशन चलाएं. अब आपके टेक्स्ट का स्टाइल एक जैसा होगा.

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

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

• <style> और <item> टैग का इस्तेमाल करके, styles.xml रिसोर्स फ़ाइल में स्टाइल तय करें.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

डाउनलोड किए जा सकने वाले फ़ॉन्ट का इस्तेमाल करने से, उपयोगकर्ताओं के लिए फ़ॉन्ट उपलब्ध हो जाते हैं. इससे आपके APK का साइज़ नहीं बढ़ता. किसी व्यू के लिए डाउनलोड किया जा सकने वाला फ़ॉन्ट जोड़ने के लिए:

1. डिज़ाइन टैब में व्यू चुनें. इसके बाद, fontFamily एट्रिब्यूट के ड्रॉप-डाउन मेन्यू से ज़्यादा फ़ॉन्ट चुनें.
2. संसाधन डायलॉग में, कोई फ़ॉन्ट ढूंढें और डाउनलोड किया जा सकने वाला फ़ॉन्ट बनाएं रेडियो बटन चुनें.
3. पुष्टि करें कि Android मेनिफ़ेस्ट में, पहले से लोड किए गए फ़ॉन्ट के लिए meta-data टैग शामिल हो.

जब ऐप्लिकेशन पहली बार किसी फ़ॉन्ट का अनुरोध करता है और वह फ़ॉन्ट पहले से उपलब्ध नहीं होता है, तो फ़ॉन्ट उपलब्ध कराने वाली कंपनी उसे इंटरनेट से डाउनलोड करती है.

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

• स्टाइल और थीम
• डाउनलोड किए जा सकने वाले फ़ॉन्ट
• एक्सएमएल में फ़ॉन्ट
• Understanding sp
• TextView एट्रिब्यूट
• स्टाइल संसाधन
• MaterialComponents theme

अन्य संसाधन:

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

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

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

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

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

इन सवालों के जवाब दें

पहला सवाल

थीम तय करने के लिए किस टैग का इस्तेमाल किया जाता है?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

दूसरा सवाल

इनमें से कौनसा तरीका, स्टाइल का सही इस्तेमाल नहीं है?

▢ किसी व्यू की शर्तें तय करें.

▢ हेडिंग के बैकग्राउंड का रंग तय करें.

▢ सभी व्यू में फ़ॉन्ट का साइज़ एक जैसा रखें.

▢ व्यू के किसी ग्रुप के लिए टेक्स्ट का रंग तय करें.

तीसरा सवाल

थीम और स्टाइल में क्या अंतर है?

▢ थीम पूरे ऐप्लिकेशन पर लागू होती हैं, जबकि स्टाइल को कुछ खास व्यू पर लागू किया जा सकता है.

▢ थीम, दूसरी थीम से नहीं ली जा सकतीं. हालांकि, स्टाइल दूसरी स्टाइल से ली जा सकती हैं.

▢ स्टाइल, दूसरी स्टाइल से नहीं ली जा सकतीं. हालांकि, थीम दूसरी थीम से ली जा सकती हैं.

▢ थीम, Android सिस्टम उपलब्ध कराता है. वहीं, स्टाइल डेवलपर तय करता है.

चौथा सवाल

अगर आपके ऐप्लिकेशन में मौजूद किसी TextView में Theme है, जो फ़ॉन्ट के साइज़ को 12sp पर सेट करता है, एक तय किया गया स्टाइल है, जो इसे 14sp पर सेट करता है, और 16sp का fontSize एट्रिब्यूट है, तो स्क्रीन पर दिखने वाले फ़ॉन्ट का साइज़ क्या होगा?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

अगला सबक शुरू करें: 10.2: मटीरियल डिज़ाइन, डाइमेंशन, और रंग

इस कोर्स में मौजूद अन्य कोडलैब के लिंक के लिए, Android Kotlin Fundamentals कोडलैब का लैंडिंग पेज देखें.