Android Kotlin Fundamentals 01.2: ऐप्लिकेशन की बुनियादी बनावट

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

परिचय

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

इस कोडलैब में, Android ऐप्लिकेशन के मुख्य कॉम्पोनेंट के बारे में ज़्यादा जानें. साथ ही, बटन की मदद से ऐप्लिकेशन में आसान इंटरैक्टिविटी जोड़ें.

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

• Android Studio को इंस्टॉल और खोलने का तरीका.
• नया ऐप्लिकेशन प्रोजेक्ट बनाने का तरीका.
• किसी ऐप्लिकेशन को एम्युलेटर या फ़िज़िकल डिवाइस पर चलाने का तरीका.

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

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

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

• MainActivity Kotlin फ़ाइल और गतिविधि की लेआउट फ़ाइल एक्सप्लोर करें.
• एक्सएमएल में गतिविधि के लेआउट में बदलाव करें.
• गतिविधि के लेआउट में Button एलिमेंट जोड़ें.
• हार्डकोड की गई स्ट्रिंग को स्ट्रिंग रिसॉर्स की फ़ाइल में एक्सट्रैक्ट करें.
• जब उपयोगकर्ता Button पर टैप करे, तब स्क्रीन पर मैसेज दिखाने के लिए, क्लिक-हैंडलर के तरीके लागू करें.

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

पिछले कोडलैब में, आपने ऐप्लिकेशन प्रोजेक्ट के मुख्य हिस्सों के बारे में जाना था. इनमें java और res डायरेक्ट्री शामिल हैं. इस टास्क में, आपको अपने ऐप्लिकेशन को बनाने वाली दो सबसे ज़रूरी फ़ाइलों पर फ़ोकस करना है: MainActivity Kotlin फ़ाइल और activity_main.xml लेआउट फ़ाइल.

पहला चरण: MainActivity की जांच करना

MainActivity, Activity का एक उदाहरण है. Activity एक मुख्य Android क्लास है. यह Android ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को दिखाता है और इनपुट इवेंट को स्वीकार करता है. जब आपका ऐप्लिकेशन लॉन्च होता है, तो यह AndroidManifest.xml फ़ाइल में बताई गई ऐक्टिविटी को लॉन्च करता है.

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

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

1. नया प्रोजेक्ट बनाने के लिए, Android Studio में File > New > New Project को चुनें. खाली गतिविधि का इस्तेमाल करें और आगे बढ़ें पर क्लिक करें.
2. प्रोजेक्ट को DiceRoller नाम दें. साथ ही, प्रोजेक्ट के नाम और प्रोजेक्ट की जगह की अन्य सभी वैल्यू की पुष्टि करें. पक्का करें कि "Use AndroidX Artifacts" चेकबॉक्स चुना गया हो. पूरा करें पर क्लिक करें.
   
   
   
3. Project > Android पैनल में, java > com.example.android.diceroller को बड़ा करें. MainActivity पर दो बार क्लिक करें. कोड एडिटर में, कोड को MainActivity.
   
   
   में दिखाया गया है
4. पैकेज के नाम और इंपोर्ट स्टेटमेंट के नीचे, MainActivity के लिए क्लास डिक्लेरेशन दिया गया है. MainActivity क्लास एक्सटेंड होती है AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity, Activity का सबक्लास है. यह Android की सभी नई सुविधाओं के साथ काम करता है. साथ ही, Android के पुराने वर्शन के साथ भी काम करता है. अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा डिवाइसों और उपयोगकर्ताओं के लिए उपलब्ध कराने के लिए, हमेशा AppCompatActivity का इस्तेमाल करें.

5. onCreate() तरीके पर ध्यान दें. ऐक्टिविटी, ऑब्जेक्ट को शुरू करने के लिए कंस्ट्रक्टर का इस्तेमाल नहीं करती हैं. इसके बजाय, गतिविधि के सेटअप के दौरान पहले से तय किए गए कई तरीकों (जिन्हें "लाइफ़साइकल के तरीके" कहा जाता है) को कॉल किया जाता है. लाइफ़साइकल के इन तरीकों में से एक तरीका onCreate() है. इसे हमेशा अपने ऐप्लिकेशन में बदला जाता है. लाइफ़साइकल के तरीकों के बारे में ज़्यादा जानने के लिए, बाद में कोडलैब देखें.
   
   onCreate() में, यह तय किया जाता है कि गतिविधि से कौनसा लेआउट जुड़ा है. साथ ही, लेआउट को बड़ा किया जाता है. setContentView() तरीके से ये दोनों काम किए जा सकते हैं.
   

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

setContentView() तरीके में, R.layout.activity_main का इस्तेमाल करके लेआउट का रेफ़रंस दिया जाता है. यह असल में एक पूर्णांक रेफ़रंस होता है. ऐप्लिकेशन बनाने पर, R क्लास जनरेट होती है. R क्लास में ऐप्लिकेशन की सभी ऐसेट शामिल होती हैं. इनमें res डायरेक्ट्री का कॉन्टेंट भी शामिल होता है.

इस मामले में, R.layout.activity_main से जनरेट की गई R क्लास, layout फ़ोल्डर, और activity_main.xml लेआउट फ़ाइल का पता चलता है. (संसाधनों में फ़ाइल एक्सटेंशन शामिल नहीं होते.) आपको ऐप्लिकेशन के कई संसाधनों (जैसे, इमेज, स्ट्रिंग, और लेआउट फ़ाइल में मौजूद एलिमेंट) को R क्लास में एक जैसे रेफ़रंस का इस्तेमाल करके रेफ़र करना होगा.

दूसरा चरण: ऐप्लिकेशन लेआउट फ़ाइल की जांच करना और उसे एक्सप्लोर करना

आपके ऐप्लिकेशन की सभी गतिविधियों के लिए, ऐप्लिकेशन की res/layout डायरेक्ट्री में एक लेआउट फ़ाइल जुड़ी होती है. लेआउट फ़ाइल एक एक्सएमएल फ़ाइल होती है. इससे पता चलता है कि कोई ऐक्टिविटी कैसी दिखती है. लेआउट फ़ाइल, व्यू तय करके और यह तय करके ऐसा करती है कि व्यू स्क्रीन पर कहां दिखेंगे.

व्यू, टेक्स्ट, इमेज, और बटन जैसी चीज़ें होती हैं. ये View क्लास को बढ़ाते हैं. व्यू कई तरह के होते हैं. जैसे, TextView, Button, ImageView, और CheckBox.

इस टास्क में, ऐप्लिकेशन के लेआउट की फ़ाइल की जांच की जाती है और उसमें बदलाव किया जाता है.

1. प्रोजेक्ट > Android पैनल में, res > लेआउट को बड़ा करें और activity_main.xml पर दो बार क्लिक करें. लेआउट डिज़ाइन एडिटर खुलता है. Android Studio में यह एडिटर शामिल होता है. इसकी मदद से, अपने ऐप्लिकेशन के लेआउट को विज़ुअल तरीके से बनाया जा सकता है. साथ ही, लेआउट डिज़ाइन की झलक देखी जा सकती है. आपको बाद के कोडलैब में, डिज़ाइन एडिटर के बारे में ज़्यादा जानकारी मिलेगी.
2. लेआउट फ़ाइल को एक्सएमएल के तौर पर देखने के लिए, विंडो में सबसे नीचे मौजूद टेक्स्ट टैब पर क्लिक करें.
   
   
   
3. लेआउट एडिटर में मौजूद सभी एक्सएमएल कोड मिटाएं. अगर Android Studio के डिज़ाइन एडिटर का इस्तेमाल किया जा रहा है, तो नए प्रोजेक्ट के साथ मिलने वाला डिफ़ॉल्ट लेआउट एक अच्छा शुरुआती पॉइंट है. इस लेसन में, आपको नए लेआउट को शुरू से बनाने के लिए, एक्सएमएल का इस्तेमाल करना होगा.
4. इस कोड को कॉपी करके लेआउट में चिपकाएं:

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

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

अब कोड की जांच करें:

1. लेआउट का टॉप-लेवल या रूट एलिमेंट, <LinearLayout> एलिमेंट होता है. LinearLayout व्यू, ViewGroup है. व्यू ग्रुप ऐसे कंटेनर होते हैं जिनमें अन्य व्यू शामिल होते हैं. साथ ही, ये स्क्रीन पर व्यू की जगह तय करने में मदद करते हैं.
   
   लेआउट में जोड़े गए सभी व्यू और व्यू ग्रुप, व्यू हैरारकी में व्यवस्थित किए जाते हैं. इसमें सबसे ऊपर मौजूद एक्सएमएल एलिमेंट, हैरारकी का रूट होता है. रूट व्यू में अन्य व्यू और व्यू ग्रुप शामिल हो सकते हैं. साथ ही, शामिल किए गए व्यू ग्रुप में अन्य व्यू और व्यू ग्रुप शामिल हो सकते हैं. जब आपका ऐप्लिकेशन चलता है, तब आपकी एक्सएमएल लेआउट फ़ाइल में मौजूद व्यू हैरारकी, लेआउट के इन्फ़्लेट होने पर ऑब्जेक्ट की हैरारकी बन जाती है. इस मामले में, रूट व्यू ग्रुप एक लीनियर लेआउट है. यह अपने चाइल्ड व्यू को एक के बाद एक (वर्टिकल या हॉरिज़ॉन्टल) तरीके से व्यवस्थित करता है.
   
   नए Android प्रोजेक्ट के लिए, आपको डिफ़ॉल्ट रूप से ConstraintLayout मिलता है. यह डिज़ाइन एडिटर के साथ मिलकर बेहतर तरीके से काम करता है. इस ऐप्लिकेशन के लिए, LinearLayout व्यू ग्रुप का इस्तेमाल किया जाता है. यह कंस्ट्रेंट लेआउट से ज़्यादा आसान होता है. अगले लेसन में, व्यू ग्रुप और कंस्ट्रेंट लेआउट के बारे में ज़्यादा जानें.
2. LinearLayout टैग में, android:layout_width एट्रिब्यूट देखें. इस LinearLayout की चौड़ाई match parent पर सेट है. इससे इसकी चौड़ाई, पैरंट की चौड़ाई के बराबर हो जाती है. यह रूट व्यू है. इसलिए, लेआउट स्क्रीन की पूरी चौड़ाई में दिखता है.
3. android:layout_height एट्रिब्यूट देखें, जिसे wrap_content पर सेट किया गया है. इस एट्रिब्यूट की मदद से, LinearLayout की ऊंचाई को उसमें मौजूद सभी व्यू की कुल ऊंचाई के बराबर किया जाता है. फ़िलहाल, इसमें सिर्फ़ TextView शामिल है.
4. <TextView> एलिमेंट की जांच करें. यह TextView, टेक्स्ट दिखाता है. यह आपके DiceRoller ऐप्लिकेशन में मौजूद एकमात्र विज़ुअल एलिमेंट है. android:text एट्रिब्यूट में दिखाने के लिए असल स्ट्रिंग होती है. इस मामले में, स्ट्रिंग "Hello World!"
5. <TextView> एलिमेंट में android:layout_width और android:layout_height एट्रिब्यूट देखें. इन दोनों को wrap_content पर सेट किया गया है. टेक्स्ट व्यू का कॉन्टेंट, टेक्स्ट ही होता है. इसलिए, व्यू सिर्फ़ उतनी जगह लेगा जितनी टेक्स्ट के लिए ज़रूरी है.

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

पहला चरण: लेआउट में बटन जोड़ना

1. टेक्स्ट व्यू के नीचे लेआउट में Button एलिमेंट जोड़ने के लिए, <Button डालें. इसके बाद, Return दबाएं. Button ब्लॉक दिखता है, जो /> पर खत्म होता है. इसमें layout_width और layout_height एट्रिब्यूट शामिल होते हैं.

<Button
   android:layout_width=""
   android:layout_height="" />

2. layout_width और layout_height, दोनों एट्रिब्यूट को "wrap_content" पर सेट करें. इन वैल्यू की मदद से, बटन की चौड़ाई और ऊंचाई उतनी ही होती है जितनी उसमें मौजूद टेक्स्ट लेबल की होती है.
3. बटन में android:text एट्रिब्यूट जोड़ें और इसकी वैल्यू "Roll" के तौर पर सेट करें. बटन एलिमेंट अब ऐसा दिखता है:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

के लिए, text एट्रिब्यूट, बटन का लेबल होता है.Button लेआउट एडिटर में, एट्रिब्यूट को पीले रंग से हाइलाइट किया जाता है. इससे कोई सलाह या चेतावनी मिलती है. इस मामले में, पीले रंग से हाइलाइट करने की वजह यह है कि बटन के लेबल में स्ट्रिंग "Roll" को हार्डकोड किया गया है. हालांकि, स्ट्रिंग एक संसाधन होना चाहिए. अगले सेक्शन में, स्ट्रिंग रिसॉर्स के बारे में जानें.

दूसरा चरण: स्ट्रिंग रिसॉर्स एक्सट्रैक्ट करना

लेआउट या कोड फ़ाइलों में स्ट्रिंग हार्डकोड करने के बजाय, यह सबसे सही तरीका है कि आप अपने ऐप्लिकेशन की सभी स्ट्रिंग को किसी अलग फ़ाइल में रखें. इस फ़ाइल को strings.xml कहा जाता है. यह ऐप्लिकेशन के संसाधनों में, res/values/ डायरेक्ट्री में मौजूद होती है.

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

Android Studio, आपको स्ट्रिंग को संसाधन फ़ाइल में रखने के लिए याद दिलाता है. साथ ही, इसके लिए आपको कुछ सुझाव और चेतावनियां भी देता है.

1. <Button> टैग के android:text एट्रिब्यूट में मौजूद "Roll" स्ट्रिंग पर एक बार क्लिक करें.
2. Alt+Enter (macOS में Option+Enter) दबाएं. इसके बाद, पॉप-अप मेन्यू से स्ट्रिंग रिसॉर्स निकालें चुनें.
3. संसाधन के नाम के लिए roll_label डालें.
4. ठीक है पर क्लिक करें. res/values/string.xml फ़ाइल में एक स्ट्रिंग संसाधन बनाया जाता है. साथ ही, Button एलिमेंट में मौजूद स्ट्रिंग को उस संसाधन के रेफ़रंस से बदल दिया जाता है:
   android:text="@string/roll_label"
5. प्रोजेक्ट > Android पैनल में, res > values को बड़ा करें. इसके बाद, strings.xml फ़ाइल में अपने स्ट्रिंग रिसॉर्स देखने के लिए, strings.xml पर दो बार क्लिक करें:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

अहम जानकारी: strings.xml फ़ाइल में, अभी जोड़ी गई स्ट्रिंग के साथ-साथ ऐप्लिकेशन का नाम भी शामिल होता है. अगर आपने Empty Template का इस्तेमाल करके ऐप्लिकेशन प्रोजेक्ट शुरू किया है, तो ऐप्लिकेशन का नाम स्क्रीन पर सबसे ऊपर मौजूद ऐप्लिकेशन बार में दिखेगा. app_name रिसॉर्स में बदलाव करके, ऐप्लिकेशन का नाम बदला जा सकता है.

तीसरा चरण: व्यू को स्टाइल करना और उनकी पोज़िशन तय करना

अब आपके लेआउट में एक TextView और एक Button व्यू शामिल है. इस टास्क में, व्यू ग्रुप में मौजूद व्यू को ज़्यादा आकर्षक बनाने के लिए व्यवस्थित किया जाता है.

1. लेआउट की झलक देखने के लिए, डिज़ाइन टैब पर क्लिक करें. फ़िलहाल, दोनों व्यू एक-दूसरे के बगल में हैं और स्क्रीन के सबसे ऊपर दिख रहे हैं.
   
   
   
2. एक्सएमएल एडिटर पर वापस जाने के लिए, टेक्स्ट टैब पर क्लिक करें. android:orientation एट्रिब्यूट को LinearLayout टैग में जोड़ें और इसकी वैल्यू "vertical" के तौर पर सेट करें. <LinearLayout> एलिमेंट अब ऐसा दिखेगा:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

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

3. android:layout_gravity एट्रिब्यूट को TextView और Button, दोनों में जोड़ें. साथ ही, इसकी वैल्यू "center_horizontal" के तौर पर सेट करें. इससे दोनों व्यू, हॉरिज़ॉन्टल ऐक्सिस के बीच में अलाइन हो जाते हैं. अब TextView और Button एलिमेंट ऐसे दिखने चाहिए:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. लीनियर लेआउट में android:layout_gravity एट्रिब्यूट जोड़ें और इसे "center_vertical" की वैल्यू दें. आपका LinearLayout एलिमेंट अब ऐसा दिखना चाहिए:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

ध्यान दें: अगर आपने बटन और टेक्स्ट व्यू, दोनों में center_horizontal के बजाय center_vertical ग्रेविटी जोड़ी है, तो व्यू लेआउट के बीच में हॉरिज़ॉन्टल और वर्टिकल, दोनों तरह से अलाइन हो जाएंगे. इसका मतलब है कि व्यू एक-दूसरे के ऊपर हैं.

सभी चाइल्ड एलिमेंट को एक साथ बीच में लाने के लिए, पैरंट (LinearLayout एलिमेंट) पर center_vertical का इस्तेमाल करें. जैसा कि ऊपर दिखाया गया है.

5. टेक्स्ट व्यू में टेक्स्ट का साइज़ बढ़ाने के लिए, <TextView> एलिमेंट में android:textSize एट्रिब्यूट को "30sp" वैल्यू के साथ जोड़ें. sp का मतलब स्केलेबल पिक्सल होता है. यह डिवाइस की डिसप्ले क्वालिटी से अलग, टेक्स्ट के साइज़ को मापने की एक यूनिट है. अब TextView एलिमेंट कुछ ऐसा दिखेगा:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. अपने ऐप्लिकेशन को कंपाइल करें और चलाएं.
   
   
   

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

चौथा चरण: कोड में बटन का रेफ़रंस पाना

MainActivity में मौजूद Kotlin कोड, आपके ऐप्लिकेशन के इंटरैक्टिव हिस्सों को तय करने के लिए ज़िम्मेदार होता है. जैसे, किसी बटन को टैप करने पर क्या होता है. बटन पर क्लिक करने पर काम करने वाला फ़ंक्शन लिखने के लिए, आपको MainActivity में अपने इनफ़्लेटेड लेआउट में Button ऑब्जेक्ट का रेफ़रंस पाना होगा. बटन का रेफ़रंस पाने के लिए:

• एक्सएमएल फ़ाइल में Button को आईडी असाइन करें.
• किसी खास आईडी वाले View का रेफ़रंस पाने के लिए, अपने कोड में findViewById() तरीके का इस्तेमाल करें.

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

1. अगर activity_main.xml लेआउट फ़ाइल पहले से खुली हुई नहीं है, तो उसे खोलें. इसके बाद, टेक्स्ट टैब पर क्लिक करें.
2. बटन में android:id एट्रिब्यूट जोड़ें और इसे कोई नाम दें. इस मामले में, "@+id/roll_button"" नाम दिया गया है. अब आपका <Button> एलिमेंट ऐसा दिखता है:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

एक्सएमएल लेआउट फ़ाइल में किसी व्यू के लिए आईडी बनाने पर, Android Studio जनरेट की गई R क्लास में उस आईडी के नाम वाला एक पूर्णांक स्थिरांक बनाता है. इसलिए, अगर आपने किसी व्यू का नाम roll_button रखा है, तो Android Studio, R क्लास में roll_button नाम का एक पूर्णांक स्थिरांक जनरेट करता है और बनाता है. आईडी के नाम के लिए "@+id" प्रीफ़िक्स, कंपाइलर को यह बताता है कि उस आईडी कॉन्स्टेंट को R क्लास में जोड़ना है. आपकी एक्सएमएल फ़ाइल में मौजूद सभी व्यू आईडी में यह प्रीफ़िक्स होना चाहिए..

3. MainActivity Kotlin फ़ाइल खोलें. onCreate() में, setContentView() के बाद यह लाइन जोड़ें:

val rollButton: Button = findViewById(R.id.roll_button)

एक्सएमएल क्लास में तय किए गए व्यू के लिए findViewById() रेफ़रंस पाने के लिए, findViewById() तरीके का इस्तेमाल करें.View इस मामले में, आपको R क्लास और आईडी roll_button से Button का रेफ़रंस मिलता है. साथ ही, उस रेफ़रंस को rollButton वैरिएबल को असाइन किया जाता है.

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

4. ध्यान दें कि Android Studio, Button क्लास को लाल रंग में हाइलाइट करता है और उसके नीचे लाइन खींचता है. इससे पता चलता है कि यह एक ऐसा रेफ़रंस है जिसे हल नहीं किया गया है. साथ ही, इसका इस्तेमाल करने से पहले आपको इस क्लास को इंपोर्ट करना होगा. पूरी तरह क्वालिफ़ाइड क्लास का नाम दिखाने वाला टूलटिप भी दिख सकता है:
   
   
   
5. पूरी तरह क्वालिफ़ाइड क्लास का नाम स्वीकार करने के लिए, Alt+Enter (Mac पर Option+Enter) दबाएं.

अहम जानकारी: Android Studio को कॉन्फ़िगर किया जा सकता है, ताकि वह क्लास के लिए इंपोर्ट स्टेटमेंट अपने-आप जोड़ दे. हालांकि, ऐसा तब होगा, जब क्लास का मतलब साफ़ तौर पर समझ में आ रहा हो. एडिटर > सामान्य > अपने-आप इंपोर्ट होने की सुविधा के लिए सेटिंग पैनल में यह तय किया जाता है कि इंपोर्ट किए गए डेटा को कैसे मैनेज किया जाए.

पांचवां चरण: क्लिक हैंडलर जोड़कर, सूचना दिखाना

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

• यह एक ऐसा तरीका है जिससे कोई कार्रवाई की जाती है.
• setOnClickHandler() तरीका, जो Button को हैंडलर तरीके से जोड़ता है.

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

1. अपनी MainActivity क्लास में onCreate() के बाद, rollDice() नाम का एक प्राइवेट फ़ंक्शन बनाएं.

private fun rollDice() {
  
}

2. rollDice() को कॉल किए जाने पर Toast दिखाने के लिए, इस लाइन को rollDice() तरीके में जोड़ें:

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

कोई सूचना बनाने के लिए, Toast.makeText() तरीके को कॉल करें. इस तरीके के लिए तीन चीज़ें ज़रूरी हैं:

• Context ऑब्जेक्ट. Context ऑब्जेक्ट की मदद से, Android OS के साथ कम्यूनिकेट किया जा सकता है. साथ ही, इसकी मौजूदा स्थिति के बारे में जानकारी पाई जा सकती है. यहां आपको Context की ज़रूरत होगी, ताकि Toast ऑब्जेक्ट, ओएस को सूचना दिखाने के लिए कह सके. AppCompatActivity, Context की सबक्लास है. इसलिए, कॉन्टेक्स्ट के लिए सिर्फ़ this कीवर्ड का इस्तेमाल किया जा सकता है.
• यहां "button clicked", वह मैसेज दिखाया जाएगा जिसे आपको दिखाना है.
• मैसेज दिखाने की अवधि. आखिर में मौजूद show() तरीके से, सूचना दिखती है.

3. onCreate() में, findViewById() को कॉल करने के बाद, इस लाइन को जोड़कर rollButton ऑब्जेक्ट के लिए rollDice() को क्लिक हैंडलर के तौर पर असाइन करें:

rollButton.setOnClickListener { rollDice() }

अब आपकी MainActivity क्लास की पूरी परिभाषा ऐसी दिखती है:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. अपने ऐप्लिकेशन को कंपाइल और रन करें. बटन पर टैप करने पर, हर बार एक सूचना दिखनी चाहिए.

इस टास्क में, TextView में मौजूद टेक्स्ट को बदलने के लिए, rollDice() तरीके में बदलाव किया जाता है. पहले चरण में, उस टेक्स्ट को "Hello World!" से बदलकर स्ट्रिंग "Dice Rolled!" कर दिया जाता है. दूसरे चरण में, एक से छह के बीच कोई भी संख्या दिखाई जाती है.

पहला चरण: स्ट्रिंग दिखाना

1. activity_main.xml खोलें और TextView में कोई आईडी जोड़ें.

android:id="@+id/result_text"

2. MainActivity खोलें. rollDice() तरीके में, Toast दिखाने के लिए लाइन को कमेंट आउट करें.
3. TextView के आईडी से उसका रेफ़रंस पाने के लिए, findViewById() तरीके का इस्तेमाल करें. रेफ़रंस को resultText वैरिएबल असाइन करें.

val resultText: TextView = findViewById(R.id.result_text)

4. दिखाए गए टेक्स्ट को बदलने के लिए, resultText.text प्रॉपर्टी को नई स्ट्रिंग असाइन करें. उस स्ट्रिंग को किसी संसाधन में निकालने के लिए दिए गए सुझाव को अनदेखा किया जा सकता है. यह सिर्फ़ एक अस्थायी स्ट्रिंग है.

resultText.text = "Dice Rolled!"

5. ऐप्लिकेशन को कंपाइल करें और चलाएँ. ध्यान दें कि अब रोल करें बटन पर टैप करने से TextView अपडेट हो जाता है.

दूसरा चरण: कोई रैंडम नंबर दिखाना

आखिर में, इस टास्क में बटन क्लिक में रैंडमनेस जोड़ी जाती है, ताकि डाइस के रोल होने का सिम्युलेट किया जा सके. बटन पर क्लिक या टैप करने पर, आपका कोड 1 से 6 के बीच कोई भी संख्या चुनता है और TextView को अपडेट करता है. किसी भी क्रम से मिलने वाला नंबर जनरेट करने का काम, Android के लिए खास नहीं है. इसके लिए, Random क्लास का इस्तेमाल किया जाता है.

1. rollDice() तरीके के सबसे ऊपर, Random.nextInt() तरीके का इस्तेमाल करके 1 से 6 के बीच कोई रैंडम नंबर पाएं:

val randomInt = Random().nextInt(6) + 1

2. text प्रॉपर्टी को रैंडम पूर्णांक की वैल्यू पर सेट करें. इसे स्ट्रिंग के तौर पर सेट करें:

resultText.text = randomInt.toString()

3. ऐप्लिकेशन को कंपाइल और रन करें. रोल करें बटन पर टैप करने पर, टेक्स्ट व्यू में मौजूद संख्या बदल जाती है.

Android Studio प्रोजेक्ट: DiceRoller

ध्यान दें: सभी कोडिंग चैलेंज में हिस्सा लेना ज़रूरी नहीं है.

चैलेंज: ऐप्लिकेशन में "Count Up" लेबल वाला दूसरा बटन जोड़ें. यह बटन, Roll बटन के ठीक नीचे दिखेगा. टैप करने पर, Count Up बटन को नतीजे के टेक्स्ट व्यू की मौजूदा वैल्यू मिलनी चाहिए. इसके बाद, उसे वैल्यू में 1 जोड़कर टेक्स्ट व्यू को अपडेट करना चाहिए. पक्का करें कि आपने इन खास मामलों को हैंडल किया हो:

• अगर नतीजे के टेक्स्ट व्यू में अब तक कोई संख्या नहीं है (यानी, अगर टेक्स्ट व्यू में अब भी डिफ़ॉल्ट "Hello World" स्ट्रिंग है), तो नतीजे के टेक्स्ट को 1 पर सेट करें.
• अगर संख्या पहले से ही 6 है, तो कुछ भी न करें.

अहम जानकारी: TextView व्यू में मौजूद स्ट्रिंग, CharSequence क्लास का एक इंस्टेंस है. इसकी वैल्यू की जांच करने के लिए, आपको इसे स्ट्रिंग में बदलना होगा:

resultText.text.toString()

कोडिंग चैलेंज का समाधान करने वाला कोड

Android Studio प्रोजेक्ट: DiceRoller-challenge

गतिविधियां

• MainActivity, AppCompatActivity की सबक्लास है. वहीं, AppCompatActivity, Activity की सबक्लास है. Activity, Android की एक मुख्य क्लास है. यह Android ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को ड्रॉ करने और इनपुट इवेंट पाने के लिए ज़िम्मेदार होती है.
• सभी गतिविधियों से जुड़ी एक लेआउट फ़ाइल होती है. यह ऐप्लिकेशन के संसाधनों में मौजूद एक एक्सएमएल फ़ाइल होती है. लेआउट फ़ाइल का नाम, ऐक्टिविटी के नाम पर रखा जाता है. उदाहरण के लिए, activity_main.xml.
• MainActivity में मौजूद setContentView() तरीके से, लेआउट को गतिविधि से जोड़ा जाता है. साथ ही, गतिविधि बनाए जाने पर उस लेआउट को बड़ा किया जाता है.
• लेआउट इन्फ़्लेशन एक ऐसी प्रोसेस है जिसमें एक्सएमएल लेआउट फ़ाइलों में तय किए गए व्यू को मेमोरी में Kotlin व्यू ऑब्जेक्ट में बदल दिया जाता है. इसे "इन्फ़्लेट" भी कहा जाता है. लेआउट में बदलाव होने के बाद, Activity इन ऑब्जेक्ट को स्क्रीन पर दिखा सकता है और उनमें डाइनैमिक तरीके से बदलाव कर सकता है.

व्यू

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

एट्रिब्यूट देखें

• android:layout_width और android:layout_height एट्रिब्यूट से, किसी व्यू के वज़न और ऊंचाई के बारे में पता चलता है. match_parent वैल्यू, व्यू को उसके पैरंट की चौड़ाई या ऊंचाई तक फैलाती है. wrap_content वैल्यू, व्यू को छोटा करके व्यू के कॉन्टेंट के हिसाब से सेट करती है.
• android:text एट्रिब्यूट, उस टेक्स्ट के बारे में बताता है जिसे व्यू को दिखाना चाहिए. हालांकि, ऐसा तब होता है, जब व्यू टेक्स्ट दिखाता हो. बटन के लिए, android:text बटन का लेबल है.
• LinearLayout व्यू ग्रुप में मौजूद android:orientation एट्रिब्यूट, इसमें मौजूद व्यू एलिमेंट को व्यवस्थित करता है. horizontal वैल्यू का इस्तेमाल करने पर, व्यू बाईं से दाईं ओर व्यवस्थित हो जाते हैं. vertical वैल्यू, व्यू को ऊपर से नीचे की ओर व्यवस्थित करती है.
• android:layout_gravity एट्रिब्यूट से, किसी व्यू और उसके सभी चाइल्ड व्यू की जगह तय होती है.
• android:textSize एट्रिब्यूट, टेक्स्ट व्यू में टेक्स्ट का साइज़ तय करता है. टेक्स्ट के फ़ॉन्ट का साइज़, एसपी यूनिट (स्केलेबल पिक्सल) में तय किया जाता है. sp यूनिट का इस्तेमाल करके, डिवाइस की डिसप्ले क्वालिटी से अलग टेक्स्ट का साइज़ सेट किया जा सकता है.

स्ट्रिंग

• लेआउट में स्ट्रिंग को हार्डकोड करने के बजाय, स्ट्रिंग संसाधनों का इस्तेमाल करना सबसे सही तरीका है.
• स्ट्रिंग रिसॉर्स, values/res/string.xml फ़ाइल में शामिल होते हैं.
• स्ट्रिंग निकालने के लिए, Alt+Enter (Mac पर Option+Enter) का इस्तेमाल करें. पॉपअप मेन्यू से, स्ट्रिंग रिसॉर्स निकालें चुनें.

व्यू का इस्तेमाल करना

• अपने Kotlin कोड को लेआउट में तय की गई व्यू से कनेक्ट करने के लिए, व्यू के इनफ़्लेट होने के बाद आपको व्यू ऑब्जेक्ट का रेफ़रंस पाना होगा. लेआउट में मौजूद व्यू को आईडी (android:id) असाइन करें. इसके बाद, उससे जुड़े व्यू ऑब्जेक्ट को पाने के लिए findViewById() तरीके का इस्तेमाल करें.
• एक्सएमएल लेआउट फ़ाइल में किसी व्यू के लिए आईडी बनाने पर, Android Studio जनरेट की गई R क्लास में उस आईडी के नाम वाला एक पूर्णांक स्थिरांक बनाता है. इसके बाद, findViewById() तरीके में उस R.id रेफ़रंस का इस्तेमाल किया जा सकता है.
• प्रॉपर्टी के नाम से, Kotlin कोड में सीधे तौर पर व्यू ऑब्जेक्ट के एट्रिब्यूट सेट किए जा सकते हैं. उदाहरण के लिए, टेक्स्ट व्यू में मौजूद टेक्स्ट को एक्सएमएल में android:text एट्रिब्यूट से तय किया जाता है. वहीं, Kotlin में इसे text प्रॉपर्टी से तय किया जाता है.
• क्लिक हैंडलर एक ऐसा तरीका है जिसका इस्तेमाल तब किया जाता है, जब उपयोगकर्ता किसी यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर क्लिक या टैप करता है. किसी व्यू, जैसे कि बटन में क्लिक-हैंडलर तरीका जोड़ने के लिए, setOnClickListener() तरीके का इस्तेमाल करें.

सूचनाओं का इस्तेमाल करना

टोस्ट एक ऐसा व्यू होता है जो उपयोगकर्ता को छोटी पॉपअप विंडो में एक सामान्य मैसेज दिखाता है.

सूचना बनाने के लिए, Toast क्लास पर makeText() फ़ैक्ट्री मेथड को तीन आर्ग्युमेंट के साथ कॉल करें:

• ऐप्लिकेशन का कॉन्टेक्स्ट Activity
• दिखाया जाने वाला मैसेज. उदाहरण के लिए, स्ट्रिंग संसाधन
• अवधि, उदाहरण के लिए Toast.LENGTH_SHORT

टोस्ट दिखाने के लिए, show() को कॉल करें.

Udacity का कोर्स:

• Kotlin की मदद से Android ऐप्लिकेशन डेवलप करना

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

• Android Studio के बारे में जानकारी
• लेआउट
• View
• Button
• TextView
• ऐप्लिकेशन के संसाधनों के बारे में खास जानकारी
• इनपुट इवेंट की खास जानकारी
• findViewById()
• setOnClickListener()
• Context

अन्य:

• शब्दावली और कॉन्सेप्ट की शब्दावली

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

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

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

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

ऐप्लिकेशन बदलना

DiceRoller ऐप्लिकेशन खोलें. ऐप्लिकेशन में "रीसेट करें" लेबल वाला एक बटन जोड़ें. यह बटन, रोल करें बटन के ठीक नीचे दिखेगा. उस बटन से, नतीजे के टेक्स्ट व्यू को 0 पर रीसेट करें.

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

पहला सवाल

Activity पर कौनसी विधि, ऐप्लिकेशन के लेआउट को बड़ा करती है और उसके व्यू को ऑब्जेक्ट के तौर पर उपलब्ध कराती है?

• onCreate()
• setClickListener()
• setContentView()
• show()

दूसरा सवाल

किसी व्यू की चौड़ाई सेट करने के लिए, किस व्यू एट्रिब्यूट का इस्तेमाल किया जाता है, ताकि वह कॉन्टेंट के हिसाब से अडजस्ट हो जाए?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

अपने ऐप्लिकेशन को ग्रेडिंग के लिए सबमिट करना

देख लें कि ऐप्लिकेशन में ये चीज़ें मौजूद हों:

• ऐप्लिकेशन के लेआउट में एक टेक्स्ट व्यू और दो बटन शामिल होने चाहिए.
• ऐप्लिकेशन के कोड में दो क्लिक हैंडलर सेट होने चाहिए. हर बटन के लिए एक क्लिक हैंडलर.
• टेक्स्ट व्यू को रीसेट करने वाले क्लिक हैंडलर को टेक्स्ट प्रॉपर्टी को 0 पर सेट करना चाहिए.

अगला लेसन शुरू करें: 1.3 इमेज ऐसेट और उनके साथ काम करने वाले प्लैटफ़ॉर्म

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