इस पेज का अनुवाद Cloud Translation API से किया गया है.

Android Kotlin Fundamentals 02.2: Add user interactivity

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

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

Kotlin में एक बेसिक Android ऐप्लिकेशन बनाना.
किसी Android ऐप्लिकेशन को एम्युलेटर या डिवाइस पर चलाना.
Android Studio के Layout Editor का इस्तेमाल करके, लीनियर लेआउट बनाया जा रहा है .
एक ऐसा सामान्य ऐप्लिकेशन बनाना जो LinearLayout, TextView, ScrollView, और क्लिक हैंडलर वाले बटन का इस्तेमाल करता हो.

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

EditText व्यू का इस्तेमाल करके, उपयोगकर्ता से इनपुट पाने का तरीका.
TextView व्यू में मौजूद टेक्स्ट का इस्तेमाल करके, TextView व्यू में टेक्स्ट सेट करने का तरीका.EditText
View और ViewGroup के साथ काम करने का तरीका.
View को ऐक्सेस करने की सेटिंग बदलने का तरीका.

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

पिछले कोडलैब में बनाए गए AboutMe ऐप्लिकेशन में इंटरैक्टिविटी जोड़ें.
EditText जोड़ें, ताकि उपयोगकर्ता टेक्स्ट डाल सके.
कोई Button जोड़ें और उसके क्लिक हैंडलर को लागू करें.

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

AboutMe ऐप्लिकेशन

इस टास्क में, आपको EditText इनपुट फ़ील्ड जोड़ना है, ताकि उपयोगकर्ता कोई निकनेम डाल सके.

पहला चरण: शुरू करें

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

ध्यान दें कि उपयोगकर्ता, किसी भी टेक्स्ट को बदल नहीं सकता.

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

दूसरा चरण: EditText जोड़ना

Android Studio में, Design टैब में activity_main.xml लेआउट फ़ाइल खोलें.
पैलेट पैन में, टेक्स्ट पर क्लिक करें.

Ab TextView, जो कि TextView है, पैलेट पैन में टेक्स्ट एलिमेंट की सूची में सबसे ऊपर दिखता है. नीचे Ab TextView में कई EditText व्यू दिए गए हैं.

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

Android, हर EditText व्यू के लिए अलग-अलग एट्रिब्यूट सेट करता है. साथ ही, सिस्टम सही सॉफ़्ट इनपुट मेथड (जैसे, स्क्रीन पर दिखने वाला कीबोर्ड) दिखाता है.
Component Tree में, PlainText एडिट टेक्स्ट को खींचें और उसे name_text के नीचे और star_image के ऊपर रखें.
EditText व्यू पर ये एट्रिब्यूट सेट करने के लिए, एट्रिब्यूट पैन का इस्तेमाल करें.

एट्रिब्यूट	वैल्यू
`id`	`nickname_edit`
`layout_width`	`match_parent` (डिफ़ॉल्ट)
`layout_height`	`wrap_content` (डिफ़ॉल्ट)

ऐप्लिकेशन चलाएं. स्टार इमेज के ऊपर, आपको "नाम" के डिफ़ॉल्ट टेक्स्ट के साथ 'बदलाव करें' टेक्स्ट दिखेगा.

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

पहला चरण: हिंट वाला टेक्स्ट जोड़ना

string.xml फ़ाइल में, हिंट के लिए नया स्ट्रिंग रिसॉर्स जोड़ें.

<string name="what_is_your_nickname">What is your Nickname?</string>

EditText व्यू के लिए इन एट्रिब्यूट को सेट करने के लिए, एट्रिब्यूट पेन का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
`style`	`NameStyle`
`textAlignment`	(center)
`hint`	`@string/what_is_your_nickname`

एट्रिब्यूट पैनल में, text एट्रिब्यूट से Name वैल्यू हटाएं. text एट्रिब्यूट की वैल्यू खाली होनी चाहिए, ताकि हिंट दिख सके.

दूसरा चरण: inputType एट्रिब्यूट सेट करना

inputType एट्रिब्यूट से यह पता चलता है कि उपयोगकर्ता, EditText व्यू में किस तरह का इनपुट डाल सकते हैं. Android सिस्टम, सेट किए गए इनपुट टाइप के हिसाब से, सही इनपुट फ़ील्ड और ऑन-स्क्रीन कीबोर्ड दिखाता है.

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

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

फ़ोन नंबर के लिए, phone वैल्यू का इस्तेमाल करें. इसमें अंकों वाला कीपैड दिखता है और उपयोगकर्ता सिर्फ़ अंक डाल सकता है.

निकनेम फ़ील्ड के लिए इनपुट टाइप सेट करें:

nickname_edit टेक्स्ट में बदलाव करें के लिए, inputType एट्रिब्यूट को textPersonName पर सेट करें.
कॉम्पोनेंट ट्री पैन में, autoFillHints चेतावनी देखें. यह चेतावनी इस ऐप्लिकेशन पर लागू नहीं होती. साथ ही, यह इस कोडलैब के दायरे से बाहर है. इसलिए, इसे अनदेखा किया जा सकता है. (अगर आपको ऑटोमैटिक भरने की सुविधा के बारे में ज़्यादा जानना है, तो ऑटोमैटिक भरने की सुविधा के लिए अपने ऐप्लिकेशन को ऑप्टिमाइज़ करना लेख पढ़ें.)
एट्रिब्यूट पैन में जाकर, EditText व्यू के इन एट्रिब्यूट की वैल्यू की पुष्टि करें:

एट्रिब्यूट	वैल्यू
`id`	`nickname_edit`
`layout_width`	`match_parent` (डिफ़ॉल्ट)
`layout_height`	`wrap_content` (डिफ़ॉल्ट)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(खाली)

Button एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है. इस पर टैप करके, उपयोगकर्ता कोई कार्रवाई कर सकता है. बटन में टेक्स्ट, आइकॉन या टेक्स्ट और आइकॉन, दोनों शामिल हो सकते हैं.

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

पहला चरण: 'हो गया' बटन जोड़ना

पैलेट पैनल से किसी बटन को खींचें और कॉम्पोनेंट ट्री में छोड़ें. बटन को nickname_edit टेक्स्ट में बदलाव करें
के नीचे रखें.
done नाम का नया स्ट्रिंग रिसॉर्स बनाएं. स्ट्रिंग को Done वैल्यू असाइन करें,

<string name="done">Done</string>

नई जोड़ी गई Button व्यू पर ये एट्रिब्यूट सेट करने के लिए, एट्रिब्यूट पैनल का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

layout_gravity एट्रिब्यूट, व्यू को उसके पैरंट लेआउट LinearLayout में बीच में रखता है.

स्टाइल को Widget.AppCompat.Button.Colored पर सेट करें. यह Android की ओर से उपलब्ध कराई गई पहले से तय की गई स्टाइल में से एक है. स्टाइल को ड्रॉप-डाउन से या संसाधन विंडो से चुना जा सकता है.

इस स्टाइल से, बटन का रंग बदलकर ऐक्सेंट कलर, colorAccent हो जाता है. एक्सेंट कलर को res/values/colors.xml फ़ाइल में तय किया जाता है.

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

colors.xml फ़ाइल का सैंपल:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

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

एट्रिब्यूट पैनल में, Layout_Margin > Top को चुनकर, सबसे ऊपर का मार्जिन जोड़ें. ऊपरी मार्जिन को layout_margin पर सेट करें. यह dimens.xml फ़ाइल में तय किया गया है.
ड्रॉप-डाउन मेन्यू से, fontFamily एट्रिब्यूट की वैल्यू roboto पर सेट करें.
टेक्स्ट टैब पर स्विच करें और जोड़े गए नए बटन के लिए जनरेट किए गए एक्सएमएल कोड की पुष्टि करें.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

तीसरा चरण: कलर रिसॉर्स बदलना

इस चरण में, बटन के ऐक्सेंट रंग को अपनी गतिविधि के ऐप्लिकेशन बार से मैच करने के लिए बदला जाता है.

res/values/colors.xml खोलें और colorAccent की वैल्यू को #76bf5e पर सेट करें.

<color name="colorAccent">#76bf5e</color>

फ़ाइल एडिटर के बाईं ओर मौजूद मार्जिन में, आपको हेक्स कोड से मिलता-जुलता रंग दिखेगा.

डिज़ाइन एडिटर में बटन के रंग में हुए बदलाव पर ध्यान दें.

अपना ऐप्लिकेशन चलाएं. आपको बदलाव करने वाले टेक्स्ट के नीचे, स्टाइल किया गया हो गया बटन दिखेगा.

उपयोगकर्ता के उपनाम डालने और हो गया बटन पर टैप करने के बाद, उपनाम TextView व्यू में दिखता है. इस टास्क में, आपको रंगीन बैकग्राउंड वाला टेक्स्ट व्यू जोड़ना है. टेक्स्ट व्यू में, उपयोगकर्ता का उपनाम star_image के ऊपर दिखता है.

पहला चरण: प्रचलित नाम के लिए TextView जोड़ना

पैलेट पैन से टेक्स्ट व्यू को खींचकर कॉम्पोनेंट ट्री में छोड़ें. टेक्स्ट व्यू को done_button के नीचे और star_image के ऊपर रखें.
नए TextView व्यू के लिए, यहां दिए गए एट्रिब्यूट सेट करने के लिए, एट्रिब्यूट पैनल का इस्तेमाल करें:

एट्रिब्यूट	वैल्यू
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(center)

दूसरा चरण: TextView के दिखने की सेटिंग बदलना

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

visible: व्यू दिख रहा है.
Invisible: इससे व्यू छिप जाता है, लेकिन लेआउट में व्यू की जगह बनी रहती है.
gone: इससे व्यू छिप जाता है और लेआउट में कोई जगह नहीं लेता.

एट्रिब्यूट पैनल में, nickname_text टेक्स्ट व्यू के visibility को gone पर सेट करें, क्योंकि आपको अपने ऐप्लिकेशन में यह टेक्स्ट व्यू शुरुआत में नहीं दिखाना है.

ध्यान दें कि एट्रिब्यूट पैनल में एट्रिब्यूट बदलने पर, nickname_text व्यू, डिज़ाइन एडिटर से गायब हो जाता है. लेआउट की झलक में व्यू को छिपाया गया है.
nickname_text व्यू के text एट्रिब्यूट की वैल्यू को खाली स्ट्रिंग में बदलें.

इस TextView के लिए जनरेट किया गया आपका एक्सएमएल कोड, कुछ ऐसा दिखना चाहिए:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

आपके लेआउट की झलक कुछ ऐसी दिखनी चाहिए:

Button ऑब्जेक्ट (या किसी भी व्यू) पर मौजूद क्लिक हैंडलर, यह तय करता है कि बटन (व्यू) पर टैप करने पर कौनसी कार्रवाई की जाएगी. क्लिक इवेंट को हैंडल करने वाले फ़ंक्शन को Activity में लागू किया जाना चाहिए. यह Activity, बटन (व्यू) के साथ लेआउट को होस्ट करता है.

क्लिक लिसनर का फ़ॉर्मैट आम तौर पर यह होता है. इसमें, पास की गई व्यू वह व्यू होता है जिस पर क्लिक या टैप किया गया है.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

बटन क्लिक इवेंट में क्लिक-लिसनर फ़ंक्शन को दो तरीकों से अटैच किया जा सकता है:

एक्सएमएल लेआउट में, <Button> एलिमेंट में android:onClick एट्रिब्यूट जोड़ा जा सकता है. उदाहरण के लिए:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

या

setOnClickListener को कॉल करके, Activity के onCreate() में, प्रोग्राम के हिसाब से रनटाइम में ऐसा किया जा सकता है. उदाहरण के लिए:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

इस टास्क में, आपको done_button के लिए प्रोग्राम के हिसाब से क्लिक लिसनर जोड़ना है. क्लिक लिसनर को उससे जुड़ी गतिविधि में जोड़ा जाता है, जो कि MainActivity.kt है.

आपका क्लिक-लिसनर फ़ंक्शन, जिसे addNickname कहा जाता है, ये काम करेगा:

nickname_edit टेक्स्ट में बदलाव करें से टेक्स्ट पाएं.
nickname_text टेक्स्ट व्यू में टेक्स्ट सेट किया गया.
टेक्स्ट और बटन में बदलाव करने की सुविधा को छिपाएं.
सेट किया गया नाम TextView दिखाएं.

पहला चरण: क्लिक लिसनर जोड़ना

Android Studio में, java फ़ोल्डर में जाकर MainActivity.kt फ़ाइल खोलें.
MainActivity.kt में, MainActivity क्लास के अंदर addNickname नाम का एक फ़ंक्शन जोड़ें. view टाइप का view नाम का इनपुट पैरामीटर शामिल करें.View view पैरामीटर, वह View है जिस पर फ़ंक्शन को कॉल किया जाता है. इस मामले में, view आपके DONE बटन का एक इंस्टेंस होगा.

private fun addNickname(view: View) {
}

addNickname फ़ंक्शन में, findViewById() का इस्तेमाल करके, nickname_edit टेक्स्ट में बदलाव करने और nickname_text टेक्स्ट व्यू का रेफ़रंस पाएं.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

nicknameTextView टेक्स्ट व्यू में, उस टेक्स्ट को सेट करें जिसे उपयोगकर्ता ने editText में डाला है. इसके लिए, text प्रॉपर्टी से टेक्स्ट पाएं.

nicknameTextView.text = editText.text

editText की visibility प्रॉपर्टी को View.GONE पर सेट करके, उपनाम EditText व्यू को छिपाएं.

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

editText.visibility = View.GONE

visibility प्रॉपर्टी को View.GONE पर सेट करके, हो गया बटन को छिपाएं. आपके पास फ़ंक्शन के इनपुट पैरामीटर, view के तौर पर बटन का रेफ़रंस पहले से मौजूद है.

view.visibility = View.GONE

addNickname फ़ंक्शन के आखिर में, निकनेम TextView व्यू को दिखने लायक बनाएं. इसके लिए, इसकी visibility प्रॉपर्टी को View.VISIBLE पर सेट करें.

nicknameTextView.visibility = View.VISIBLE

दूसरा चरण: 'हो गया' बटन में क्लिक लिसनर अटैच करना

अब आपके पास एक ऐसा फ़ंक्शन है जो हो गया बटन पर टैप करने पर की जाने वाली कार्रवाई को तय करता है. आपको इस फ़ंक्शन को Button व्यू से अटैच करना होगा.

MainActivity.kt में, onCreate() फ़ंक्शन के आखिर में, DONE Button व्यू का रेफ़रंस पाएं. findViewById() फ़ंक्शन का इस्तेमाल करें और setOnClickListener को कॉल करें. क्लिक-लिसनर फ़ंक्शन addNickname() का रेफ़रंस पास करें.

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

ऊपर दिए गए कोड में, it का मतलब done_button से है. यह वह व्यू है जिसे आर्ग्युमेंट के तौर पर पास किया गया है.

ऐप्लिकेशन चलाएं, कोई निकनेम डालें, और हो गया बटन पर टैप करें. ध्यान दें कि टेक्स्ट में बदलाव करने की सुविधा और बटन की जगह, निकनेम टेक्स्ट व्यू ने ले ली है.

ध्यान दें कि उपयोगकर्ता के हो गया बटन पर टैप करने के बाद भी कीबोर्ड दिखता रहता है. यह डिफ़ॉल्ट व्यवहार है.

तीसरा चरण: कीबोर्ड छिपाना

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

MainActivity.kt में, addNickname() फ़ंक्शन के आखिर में यह कोड जोड़ें. अगर आपको इस कोड के काम करने के तरीके के बारे में ज़्यादा जानकारी चाहिए, तो hideSoftInputFromWindow दस्तावेज़ देखें.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

ऐप्लिकेशन को फिर से चलाएं. ध्यान दें कि हो गया पर टैप करने के बाद,कीबोर्ड छिप जाता है.

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

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

पहला चरण: क्लिक लिसनर जोड़ना

MainActivity में, निकनेम टेक्स्ट व्यू के लिए updateNickname(view: View) नाम का क्लिक-लिसनर फ़ंक्शन जोड़ें.

private fun updateNickname (view: View) {
}

updateNickname फ़ंक्शन में, nickname_edit टेक्स्ट में बदलाव करने का रेफ़रंस पाएं. साथ ही, हो गया बटन का रेफ़रंस पाएं. इसके लिए, findViewById() तरीके का इस्तेमाल करें.

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

updateNickname फ़ंक्शन के आखिर में, टेक्स्ट में बदलाव करने की सुविधा दिखाने, हो गया बटन दिखाने, और टेक्स्ट व्यू को छिपाने के लिए कोड जोड़ें.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

MainActivity.kt में, onCreate() फ़ंक्शन के आखिर में, nickname_text टेक्स्ट व्यू पर setOnClickListener को कॉल करें. क्लिक-लिसनर फ़ंक्शन का रेफ़रंस पास करें, जो कि updateNickname() है.

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

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

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

दूसरा चरण: EditText व्यू पर फ़ोकस सेट करना और कीबोर्ड दिखाना

updateNickname फ़ंक्शन के आखिर में, फ़ोकस को EditText व्यू पर सेट करें. requestFocus() तरीके का इस्तेमाल करें.

// Set the focus to the edit text.
editText.requestFocus()

updateNickname फ़ंक्शन के आखिर में, कीबोर्ड को दिखने लायक बनाने के लिए कोड जोड़ें.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

तीसरा चरण: प्रचलित नाम वाले TextView व्यू में बैकग्राउंड का रंग जोड़ना

nickname_text टेक्स्ट व्यू के बैकग्राउंड का रंग @color/colorAccent पर सेट करें और नीचे की ओर @dimen/small_padding पैडिंग जोड़ें. इन बदलावों से उपयोगकर्ता को यह संकेत मिलेगा कि निकनेम वाला टेक्स्ट व्यू क्लिक किया जा सकता है.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

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

अब अपने किसी दोस्त को AboutMe ऐप्लिकेशन का इंटरैक्टिव वर्शन दिखाएं!

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

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

क्लिक लिसनर

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

View में क्लिक-लिसनर फ़ंक्शन को इन दो तरीकों में से किसी एक तरीके से अटैच किया जा सकता है:

एक्सएमएल लेआउट में, <View> एलिमेंट में android:onClick एट्रिब्यूट जोड़ें.
प्रोग्राम के हिसाब से, इससे जुड़े Activity में setOnClickListener(View.OnClickListener) फ़ंक्शन का इस्तेमाल करें.

Udacity का कोर्स:

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

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

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

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

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

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

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

पहला सवाल

EditText किसकी सबक्लास है?

View
LinearLayout
TextView
Button

दूसरा सवाल

अगर किसी व्यू पर visibility एट्रिब्यूट की इनमें से कौनसी वैल्यू सेट की जाती है, तो व्यू छिप जाता है और लेआउट में कोई जगह नहीं लेता है?

visible
Invisible
gone
hide

तीसरा सवाल

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

सही
गलत

चौथा सवाल

Button व्यू के बारे में इनमें से कौनसी बात सही है?

Button व्यू, व्यू ग्रुप होता है.
हर स्क्रीन पर सिर्फ़ तीन Button व्यू हो सकते हैं.
Button व्यू पर क्लिक किया जा सकता है. क्लिक करने पर, अटैच किया गया क्लिक लिसनर कोई कार्रवाई करता है.
Button, ImageView का एक्सटेंशन है.

अगला सबक शुरू करें: 2.3: लेआउट एडिटर का इस्तेमाल करके कंस्ट्रेंट लेआउट बनाना

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