Android Kotlin से जुड़े बेसिक 02.1: लेआउट एडिटर का इस्तेमाल करके लीनियर लेआउट

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

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

• Kotlin में एक बेसिक Android ऐप्लिकेशन बनाना.
• किसी एम्युलेटर या डिवाइस पर Android ऐप्लिकेशन चलाएं.
• LinearLayout की बुनियादी बातें.
• LinearLayout और TextView का इस्तेमाल करने वाला आसान ऐप्लिकेशन बनाना.

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

• View और ViewGroup के साथ काम करने का तरीका.
• LinearLayout. का इस्तेमाल करके, Activity में व्यू को व्यवस्थित करने का तरीका
• स्क्रोल किए जा सकने वाले कॉन्टेंट को दिखाने के लिए, ScrollView का इस्तेमाल कैसे करें.
• View के दिखने की सेटिंग बदलने का तरीका.
• स्ट्रिंग और डाइमेंशन रिसॉर्स बनाने और उनका इस्तेमाल करने का तरीका.
• Android Studio's लेआउट एडिटर का इस्तेमाल करके लीनियर लेआउट बनाने का तरीका.

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

• aboutMe ऐप्लिकेशन बनाएं.
• अपना नाम दिखाने के लिए, लेआउट में TextView जोड़ें.
• ImageView. जोड़ें
• स्क्रोल किया जा सकने वाला टेक्स्ट दिखाने के लिए, ScrollView जोड़ें.

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

इस टास्क में, आप aboutMe Android Studio प्रोजेक्ट बनाते हैं.

1. अगर Android Studio पहले से खुला नहीं है, तो इसे खोलें.
2. अगर कोई प्रोजेक्ट पहले से Android Studio में खुला हुआ है, तो File > New > New Project चुनें.
   
   
   
3. अगर कोई प्रोजेक्ट पहले से खुला नहीं है, तो Android Studio में आपका स्वागत है डायलॉग में + नया Android Studio प्रोजेक्ट शुरू करें चुनें.
   
   
   
4. नया प्रोजेक्ट बनाएं डायलॉग में, फ़ोन और टैबलेट टैब में, खाली गतिविधि टेंप्लेट चुनें. आगे बढ़ें पर क्लिक करें.
   
   
   
5. अगले नया प्रोजेक्ट बनाएं डायलॉग में, नीचे दिए गए पैरामीटर सेट करें और पूरा करें पर क्लिक करें.
   

एट्रिब्यूट	वैल्यू
ऐप्लिकेशन का नाम	मेरे बारे में जानकारी
कंपनी का नाम android	com.android.example.AboutMe (या आपका अपना डोमेन)
जगह की जानकारी सेव करें	डिफ़ॉल्ट स्थान छोड़ें या अपनी पसंदीदा निर्देशिका में बदलें.
भाषा	Kotlin
कम से कम एपीआई लेवल	एपीआई 19: Android 4.4 (KitKat)
इस प्रोजेक्ट पर इंस्टैंट ऐप्लिकेशन काम करेंगे	इस चेकबॉक्स को खाली छोड़ दें.
AndroidX आर्टफ़ैक्ट का इस्तेमाल करना	यह चेकबॉक्स चुनें.

Android Studio को प्रोजेक्ट फ़ाइलें जनरेट करने में कुछ समय लगेगा.

6. अपना ऐप्लिकेशन चलाएं. आपको खाली स्क्रीन पर स्ट्रिंग &कोटेशन;नमस्ते वर्ल्ड&कोटेशन दिखेगा.
   

खाली गतिविधि टेंप्लेट, एक खाली ऐक्टिविटी Mainactivity.kt बनाता है. टेंप्लेट, activity_main.xml नाम की एक लेआउट फ़ाइल भी बनाता है. लेआउट फ़ाइल का रूट ViewGroup, ConstraintLayout है, और इसकी सामग्री के तौर पर सिंगल TextView है.

इस टास्क में, आप जनरेट किए गए रूट ViewGroup को LinearLayout में बदलते हैं. आप यूज़र इंटरफ़ेस (यूआई) एलिमेंट को वर्टिकल तरीके से भी व्यवस्थित करते हैं.

ग्रुप देखें

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

LinearLayout व्यू ग्रुप में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को हॉरिज़ॉन्टल या वर्टिकल में व्यवस्थित किया जाता है.

रूट लेआउट में बदलाव करने से, यह LinearLayout व्यू ग्रुप का इस्तेमाल करता है:

1. Project > Android पैनल चुनें. app/res/layout फ़ोल्डर में, activity_main.xml फ़ाइल खोलें.
2. टेक्स्ट टैब चुनें और रूट व्यू ग्रुप को ConstraintLayout से LinearLayout में बदलें.
3. TextView को हटाएं. LinearLayout एलिमेंट में, android:orientation एट्रिब्यूट जोड़ें और उसे vertical पर सेट करें.

पहले:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

बाद में:

<LinearLayout
       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="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

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

लेआउट एडिटर देखने के लिए, डिज़ाइन टैब पर क्लिक करें. नीचे दिए गए स्क्रीनशॉट में लेआउट एडिटर के हिस्से दिखते हैं.

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

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

• अपने लेआउट की असल झलक देखने के लिए, डिज़ाइन का इस्तेमाल करें.
• हर व्यू के लिए सिर्फ़ आउटलाइन देखने के लिए, Blueprint का इस्तेमाल करें.
• दोनों डिसप्ले को साथ-साथ देखने के लिए, डिज़ाइन + ब्लूप्रिंट का इस्तेमाल करें.

पैलेट: यह व्यू और व्यू ग्रुप की एक सूची देता है जिसे आप अपने लेआउट में या कॉम्पोनेंट ट्री पैनल में खींच सकते हैं.

एट्रिब्यूट: इसमें, चुने गए मौजूदा व्यू या व्यू ग्रुप के एट्रिब्यूट दिखते हैं. विशेषताओं की पूरी सूची और आम तौर पर इस्तेमाल होने वाली विशेषताओं के बीच टॉगल करने के लिए, पैनल के सबसे ऊपर बने आइकॉन का इस्तेमाल करें.

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

पहला चरण: TextView जोड़ना

1. अगर res/layout/activity_main.xml फ़ाइल पहले से खुली नहीं है, तो उसे खोलें.
2. टेक्स्ट टैब पर स्विच करें और कोड की जांच करें. कोड के रूट व्यू ग्रुप के तौर पर, इसे LinearLayout मिला है. (व्यू ग्रुप ऐसे व्यू हैं जिनमें दूसरे व्यू शामिल होते हैं.)
   
   LinearLayout में layout_height, layout_width, और orientation के लिए ज़रूरी एट्रिब्यूट हैं, जो कि डिफ़ॉल्ट रूप से vertical है.
3. लेआउट एडिटर खोलने के लिए, डिज़ाइन टैब पर स्विच करें.

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

4. पेलेट पैनल से, टेक्स्ट व्यू को डिज़ाइन एडिटर पर खींचें और छोड़ें.
   
   
   
5. कॉम्पोनेंट ट्री पैनल पर ध्यान दें. नए टेक्स्ट व्यू को पैरंट व्यू ग्रुप के चाइल्ड एलिमेंट के तौर पर रखा जाता है, जो कि LinearLayout है.
   
   
6. अगर #एट्रिब्यूट पैनल पहले से नहीं खुला है, तो उसे खोलें. (पैन खोलने के लिए, डिज़ाइन एडिटर में जोड़े गए नए TextView पर दो बार क्लिक करें.)
7. एट्रिब्यूट पैनल में नीचे दी गई विशेषताएं सेट करें:

एट्रिब्यूट	वैल्यू
आईडी	name_text
टेक्स्ट	इसे अपने नाम पर सेट करें. टेक्स्ट फ़ील्ड में से एक, tools नेमस्पेस के लिए यूआरएल दिखाने के लिए एक रिंच आइकॉन दिखाता है. बिना रिंच वाला यूआरएल android नेमस्पेस के लिए होता है—यह आपका टेक्स्ट फ़ील्ड है.)
TextAppearance > textSize	20sp
TextAppearance > textColor	@android:color/black
TextAppearance > textalignment	केंद्र

दूसरा चरण: स्ट्रिंग रिसॉर्स बनाना

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

चेतावनी हल करने के लिए, स्ट्रिंग संसाधन बनाएं:

1. एट्रिब्यूट पैनल में, टेक्स्ट एट्रिब्यूट के बगल में उस तीन बिंदु पर क्लिक करें जिसे आपने अपने नाम पर सेट किया है. संसाधन एडिटर खुल रहा है.
   
   
   
2. संसाधन डायलॉग में, नया संसाधन जोड़ें; नया स्ट्रिंग मान चुनें.
3. नए स्ट्रिंग वैल्यू रिसॉर्स डायलॉग में, संसाधन नाम फ़ील्ड को name पर सेट करें. संसाधन मान फ़ील्ड को अपने नाम पर सेट करें. ठीक है पर क्लिक करें. ध्यान दें कि चेतावनी हटा दी गई है.
   
   
   
4. res/values/strings.xml फ़ाइल खोलें और name नाम के नए बनाए गए स्ट्रिंग रिसॉर्स को खोजें.

<string name="name">Aleks Haecky</string>

तीसरा चरण: एक डाइमेंशन रिसॉर्स बनाना

आपने संसाधन संपादक का इस्तेमाल करके, अभी एक संसाधन जोड़ा है. नए संसाधन बनाने के लिए आप एक्सएमएल कोड एडिटर में भी संसाधन निकाल सकते हैं:

1. activity_main.xml फ़ाइल में, टेक्स्ट टैब पर स्विच करें.
2. textSize लाइन पर, नंबर (20sp) पर क्लिक करें और Mac पर Alt+Enter (Option+Enter) टाइप करें. पॉप-अप मेन्यू से डाइमेंशन संसाधन निकालें चुनें.
3. संसाधन संसाधन डायलॉग में, संसाधन नाम फ़ील्ड में text_size डालें. ठीक है पर क्लिक करें.
   
   
   
4. जनरेट किया गया यह कोड देखने के लिए, res/values/dimens.xml फ़ाइल खोलें:

<dimen name="text_size">20sp</dimen>

ध्यान दें: अगर dimens.xml फ़ाइल आपके res/values फ़ोल्डर में पहले से मौजूद नहीं है, तो Android Studio उसे बना देता है.

5. MainActivity.kt फ़ाइल खोलें और onCreate() फ़ंक्शन के आखिर में, नीचे दिया गया कोड देखें:

setContentView(R.layout.activity_main)

setContentView() फ़ंक्शन, लेआउट फ़ाइल को Activity से कनेक्ट करता है. बताई गई लेआउट रिसॉर्स फ़ाइल R.layout.activity_main है:

• R, संसाधन का रेफ़रंस है. यह अपने-आप जनरेट हुई क्लास है, जिसमें आपके ऐप्लिकेशन के सभी संसाधनों की परिभाषाएं होती हैं.
• layout.activity_main बताता है कि संसाधन, activity_main नाम वाला एक लेआउट है.

6. अपना ऐप्लिकेशन चलाएं. आपके नाम वाला TextView दिखाई देगा.
   
   

जब आप अपने ऐप्लिकेशन की स्क्रीन देखते हैं, तो आपका नाम स्क्रीन के सबसे ऊपरी हिस्से में ऊपर चला जाता है. इसलिए, अब आप पैडिंग (जगह) और मार्जिन जोड़ सकते हैं.

पैडिंग बनाम मार्जिन

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

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

• android:padding व्यू के चारों किनारों के लिए पैडिंग तय करता है.
• android:paddingTop ऊपरी किनारे के लिए पैडिंग तय करता है.
• android:paddingBottom निचले किनारे के लिए पैडिंग तय करता है.
• android:paddingStart व्यू के किनारे की शुरुआत और आखिर के लिए पैडिंग की जानकारी देता है.
• android:paddingEnd व्यू के किनारे (&ot;end&कोटेशन) के लिए पैडिंग (जगह) बताता है.
• android:paddingLeft बाएं किनारे के लिए पैडिंग (जगह) बताता है.
• android:paddingRight दाएं किनारे के लिए पैडिंग तय करता है.

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

• android:layout_margin व्यू के चारों तरफ़ के मार्जिन बताता है.
• android:layout_marginBottom इस व्यू के सबसे नीचे की तरफ़ के स्पेस को बताता है.
• android:layout_marginStart इस व्यू के साइड &कोटेशन के बाहर स्पेस बताता है.
• android:layout_marginEnd इस व्यू के आखिर में मौजूद स्पेस के बारे में बताता है.
• android:layout_marginLeft इस व्यू की बाईं ओर मौजूद स्पेस के बारे में बताता है.
• android:layout_marginRight इस व्यू के दाईं ओर मौजूद स्पेस के बारे में बताता है.

राइट/लेफ़्ट बनाम स्टार्ट/एंड

&कोटेशन;दायां &? & बताना > शुरू और कोट करें & &कोटेशन; कोटेशन हमेशा; फ़्लो के शुरू और खत्म होने की जानकारी दें:

• LTR फ़्लो के लिए, = लेफ़्ट और एंड=राइट शुरू करें.
• RTL फ़्लो के लिए, start=right और end=left.

अगर आपका ऐप्लिकेशन, एपीआई लेवल 17 (Android 4.2) या इसके बाद वाले वर्शन को टारगेट करता है, तो:

• "start&quat; और &kot;end&kot; के बजाय "left" और &kot;right&kot; का इस्तेमाल करें.
• उदाहरण के लिए, आरटीएल भाषाओं के साथ काम करने के लिए, android:layout_marginLeft को android:layout_marginStart होना चाहिए.

अगर आप चाहते हैं कि आपका ऐप्लिकेशन Android 4.2 से पहले के वर्शन पर काम करे, तो इसका मतलब है कि अगर ऐप्लिकेशन's targetSdkVersion या minSdkVersion 16 या उससे पहले का है:

• &\ot&start" और & & & " \&t</a> के अलावा & & quot;सही & कोट;
• उदाहरण के लिए, android:paddingLeft और android:paddingStart, दोनों का इस्तेमाल करें.

पहला चरण: पैडिंग (जगह) जोड़ें

अपने नाम और name टेक्स्ट व्यू के ऊपरी किनारे के बीच खाली जगह रखने के लिए, ऊपर की पैडिंग जोड़ें.

1. activity_main.xml फ़ाइल को डिज़ाइन टैब में खोलें.
2. कॉम्पोनेंट ट्री या डिज़ाइन एडिटर में, टेक्स्ट व्यू पर क्लिक करके उसके एट्रिब्यूट पैनल खोलें.
3. सभी उपलब्ध एट्रिब्यूट को देखने के लिए, एट्रिब्यूट पैनल में सबसे ऊपर, डबल-ऐरो आइकॉन पर क्लिक करें.
4. पैडिंग (जगह) खोजें और उसे बड़ा करें. इसके बाद, सबसे ऊपर एट्रिब्यूट के बगल में मौजूद तीन बिंदुओं ... पर क्लिक करें. संसाधन डायलॉग दिखेगा.
5. संसाधन डायलॉग में, नया संसाधन जोड़ें; नया मान घटाएं चुनें.
6. नए डाइमेंशन वैल्यू संसाधन डायलॉग में, 8dp वैल्यू के साथ small_padding नाम का एक नया dimen रिसॉर्स बनाएं.
   
   dp का मतलब डेंसिटी-इंडिपेंडेंट है. अगर आप चाहते हैं कि अलग-अलग डेंसिटी वाली स्क्रीन पर कोई यूज़र इंटरफ़ेस (यूआई) एलिमेंट एक ही साइज़ में दिखे, तो मेज़रमेंट की अपनी इकाई के तौर पर dp का इस्तेमाल करें. हालांकि, टेक्स्ट साइज़ के बारे में बताते समय हमेशा sp (बढ़ाए जा सकने वाले पिक्सल) का इस्तेमाल करें.
7. ठीक है पर क्लिक करें.

दूसरा चरण: मार्जिन जोड़ना

name टेक्स्ट व्यू को पैरंट एलिमेंट के किनारे से दूर ले जाने के लिए, सबसे ऊपर का मार्जिन जोड़ें.

1. Layouts पैनल में, Layout_margin खोजने के लिए &quat;margin" खोजें.
2. Layout_margin बड़ा करें और top एट्रिब्यूट के बगल में मौजूद तीन बिंदुओं ... पर क्लिक करें.
3. layout_margin नाम का एक नया dimen संसाधन बनाएं और इसे 16dp बनाएं. ठीक है पर क्लिक करें.

तीसरा चरण: फ़ॉन्ट जोड़ना

name टेक्स्ट व्यू को बेहतर दिखाने के लिए, Android Roboto फ़ॉन्ट का इस्तेमाल करें. यह फ़ॉन्ट सहायता लाइब्रेरी का हिस्सा है और आप फ़ॉन्ट को संसाधन के रूप में जोड़ते हैं.

1. एट्रिब्यूट पैनल में, "fontFamily&कोटेशन; खोजें.
2. fontFamily फ़ील्ड में, ड्रॉप-डाउन ऐरो पर क्लिक करें. इसके बाद, सूची के सबसे नीचे तक स्क्रोल करें और ज़्यादा फ़ॉन्ट चुनें.
3. संसाधन डायलॉग में, rob खोजें और रोबोटो चुनें. झलक देखें सूची में, सामान्य चुनें.
4. प्रोजेक्ट में फ़ॉन्ट जोड़ें रेडियो बटन चुनें.
5. ठीक है पर क्लिक करें.
   
   

res फ़ोल्डर में अब एक font फ़ोल्डर है, जिसमें roboto.ttf फ़ॉन्ट फ़ाइल है. आपके TextView में @font/roboto एट्रिब्यूट जोड़ दिया गया है.

चौथा चरण: स्टाइल निकालना

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

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

1. कॉम्पोनेंट ट्री में TextView पर दायां क्लिक करें. इसके बाद, रिफ़ैक्टर > एक्स्ट्रैक्ट स्टाइल चुनें.
2. Android स्टाइल निकालें डायलॉग बॉक्स में, layout_width चेकबॉक्स, layout_height चेकबॉक्स, और textAlignment चेकबॉक्स को मिटाएं. आम तौर पर, हर व्यू के लिए ये एट्रिब्यूट अलग होते हैं. इसलिए, आप उन्हें स्टाइल का हिस्सा नहीं बनाना चाहते.
3. शैली का नाम फ़ील्ड में, NameStyle डालें.
4. ठीक है पर क्लिक करें.
   
   
   
5. स्टाइल भी एक रिसॉर्स है. इसलिए, स्टाइल को res/values/ फ़ोल्डर में, styles.xml फ़ाइल में सेव किया जाता है. styles.xml खोलें और NameStyle स्टाइल के लिए जनरेट किए गए कोड की जांच करें. यह कुछ ऐसा दिखेगा:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. activity_main.xml खोलें और टेक्स्ट टैब पर स्विच करें. ध्यान दें कि जनरेट किए गए स्टाइल का इस्तेमाल, टेक्स्ट व्यू में style="@style/NameStyle" के तौर पर किया जा रहा है.
7. ऐप्लिकेशन चलाएं और अपने TextView के आस-पास फ़ॉन्ट और पैडिंग में बदलावों को देखें.

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

ImageView का इस्तेमाल, इमेज के रिसॉर्स दिखाने के लिए किया जाता है. उदाहरण के लिए, ImageView, PNG, JPG, GIF या WebP फ़ाइल जैसे Bitmap रिसॉर्स दिखा सकता है या वेक्टर ड्रॉइंग जैसे Drawable रिसॉर्स को दिखा सकता है.

Android के साथ मिलने वाले इमेज रिसॉर्स, जैसे कि सैंपल आइकॉन, अवतार, और बैकग्राउंड. आप अपने ऐप्लिकेशन में इनमें से कोई एक संसाधन जोड़ेंगे.

1. लेआउट फ़ाइल डिज़ाइन टैब में दिखाएं. इसके बाद, पैलेट पैनल से ImageView को खींचकर कॉम्पोनेंट ट्री में name_text से नीचे ले जाएं. संसाधन डायलॉग खुलता है.
2. अगर ड्रॉ करने लायक पहले से नहीं चुना गया है, तो इसे चुनें.
3. android को बड़ा करें, स्क्रोल करें, और Teespring_star_big_on चुनें. पीले रंग का स्टार .
4. ठीक है पर क्लिक करें.
   
   
   
   स्टार इमेज को आपके नाम के नीचे लेआउट में जोड़ा जाता है. आपके पास वर्टिकल LinearLayout है, इसलिए जो व्यू आप जोड़ते हैं वे वर्टिकल तौर पर अलाइन होते हैं.
   
   
5. टेक्स्ट टैब पर स्विच करें और जनरेट किया गया ImageView कोड देखें. चौड़ाई match_parent पर सेट है, इसलिए व्यू अपने पैरंट एलिमेंट जितना बड़ा होगा. ऊंचाई wrap_content पर सेट है, इसलिए व्यू इसकी सामग्री के जितना ही लंबा होगा. ImageView का इस्तेमाल करके, btn_star_big_on को बनाया जा सकता है.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. ImageView के id का नाम बदलने के लिए, "@+id/imageView" पर दायां क्लिक करें. इसके बाद, रीफ़ैक्टर करें > नाम बदलें को चुनें.
7. नाम बदलें डायलॉग में, id को @+id/star_image पर सेट करें. रेफ़रर पर क्लिक करें.
   
   
   

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

8. कॉम्पोनेंट ट्री में डिज़ाइन टैब में जाकर, star_image के बगल में मौजूद चेतावनी आइकॉन पर क्लिक करें. यह चेतावनी, contentDescription मौजूद न होने की वजह से दी गई है. स्क्रीन रीडर का इस्तेमाल करके, उपयोगकर्ता को इमेज के बारे में जानकारी दी जाती है.
9. एट्रिब्यूट पैनल में, contentDescription एट्रिब्यूट के बगल में दिए गए तीन बिंदुओं ... पर क्लिक करें. संसाधन डायलॉग खुलता है.
10. संसाधन डायलॉग में, नया संसाधन जोड़ें; नया स्ट्रिंग मान चुनें. संसाधन का नाम फ़ील्ड को yellow_star पर सेट करें और संसाधन की वैल्यू फ़ील्ड को Yellow star पर सेट करें. ठीक है पर क्लिक करें.
11. स्टार इमेज को नाम से अलग करने के लिए, yellow_star पर 16dp का मार्जिन (जो @dimen/layout_margin है) जोड़ने के लिए, एट्रिब्यूट पैनल का इस्तेमाल करें.
12. अपना ऐप्लिकेशन चलाएं. आपका नाम और स्टार इमेज आपके ऐप्लिकेशन के
    यूज़र इंटरफ़ेस (यूआई) में दिखती हैं.
    

ScrollView एक व्यू ग्रुप है, जिसमें इसके व्यू की हैरारकी को स्क्रोल किया जा सकता है. स्क्रोल व्यू में चाइल्ड के रूप में सिर्फ़ एक और व्यू या व्यू ग्रुप हो सकता है. चाइल्ड व्यू आम तौर पर LinearLayout होता है. LinearLayout के अंदर, आप दूसरे व्यू जोड़ सकते हैं.

नीचे दी गई इमेज में ScrollView का एक उदाहरण दिखाया गया है, जिसमें LinearLayout में कई दूसरे व्यू शामिल हैं.

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

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

1. activity_main.xml फ़ाइल को डिज़ाइन टैब में खोलें.
2. स्क्रोल व्यू को डिज़ाइन एडिटर में खींचकर या कॉम्पोनेंट ट्री में खींचकर, लेआउट में छोड़ें. स्क्रोल व्यू को स्टार इमेज के नीचे डालें.
3. जनरेट किए गए कोड की जांच करने के लिए, टेक्स्ट टैब पर स्विच करें.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

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

4. ScrollView में id जोड़ें और इसे bio_scroll नाम दें. ScrollView में id जोड़ने से Android सिस्टम को व्यू का हैंडल मिलता है, ताकि जब उपयोगकर्ता डिवाइस को घुमाएं, तब सिस्टम स्क्रोल करने की जगह को बनाए रखे.
5. ScrollView के अंदर LinearLayout कोड हटाएं, क्योंकि आपके ऐप्लिकेशन में सिर्फ़ एक व्यू होगा जो #39; स्क्रोल किया जा सकने वाला होता है—TextView.
6. TextView पैलेट से कॉम्पोनेंट ट्री में खींचें और छोड़ें. bio_scroll के चाइल्ड एलिमेंट के तौर पर, TextView को bio_scroll के नीचे रखें.
   
   
7. नए टेक्स्ट व्यू के id (आईडी) को bio_text पर सेट करें.
8. इसके बाद, नए टेक्स्ट व्यू के लिए कोई स्टाइल जोड़ें. संसाधन पैनल में, शैली विशेषता के बगल में मौजूद तीन बिंदुओं ... पर क्लिक करके संसाधन डायलॉग खोलें.
9. संसाधन डायलॉग में, NameStyle खोजें. सूची से NameStyle चुनें और ठीक है पर क्लिक करें. टेक्स्ट व्यू में अब NameStyle स्टाइल का इस्तेमाल किया जाता है, जिसे आपने पिछले टास्क में बनाया था.
   
   

दूसरा चरण: नए TextView में अपनी जीवनी जोड़ना

1. strings.xml खोलें, bio नाम का स्ट्रिंग रिसॉर्स बनाएं, और अपने बारे में कुछ टेक्स्ट या अपनी पसंद के मुताबिक कुछ लिखें.
   

ध्यान दें:

• लाइन ब्रेक दिखाने के लिए \n का इस्तेमाल करें.
• अगर आप अपास्ट्रॉफ़ का इस्तेमाल करते हैं, तो आपको इसे बैकस्लैश से एस्केप करना होगा. उदाहरण के लिए:
  &kot;You mustn\'t forget the backslash.&कोटेशन;
• बोल्ड टेक्स्ट के लिए और <b>...</b> इटैलिक टेक्स्ट के लिए <i>...</i> का इस्तेमाल करें. उदाहरण के लिए:
  "This text is <b>bold</b> and this text is <i>italics</i>."

यह रही जीवनी का नमूना:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. bio_text टेक्स्ट व्यू में, text एट्रिब्यूट की वैल्यू को उस bio स्ट्रिंग रिसॉर्स पर सेट करें जिसमें आपकी जीवनी शामिल है.
3. bio_text टेक्स्ट को आसानी से पढ़ा जा सके, इसके लिए लाइनों के बीच स्पेस डालें. lineSpacingMultiplier एट्रिब्यूट का इस्तेमाल करें और इसे 1.2 की वैल्यू दें.
   
   
   
   डिज़ाइन एडिटर में ध्यान दें कि bio टेक्स्ट, स्क्रीन के किनारे पर कैसे काम करता है. इस समस्या को ठीक करने के लिए, आप रूट LinearLayout में बाईं, शुरू, दाईं, और खत्म होने वाली विशेषताएं जोड़ सकते हैं. आपको नीचे की ओर पैडिंग जोड़ने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि टेक्स्ट ऐसा होता है जो उपयोगकर्ता को पेज के निचले हिस्से तक की जानकारी देता है. इससे उपयोगकर्ता को पता चलता है कि टेक्स्ट स्क्रोल किया जा सकता है.
4. रूट LinearLayout में 16dp का स्टार्ट और एंड पैडिंग जोड़ें.
5. टेक्स्ट टैब पर जाएं, डाइमेंशन रिसॉर्स को निकालें, और उसे layout_padding नाम दें.
   
   

ध्यान दें: अपने ऐप्लिकेशन को अरेबिक जैसी आरटीएल भाषाओं के हिसाब से ऑप्टिमाइज़ करने के लिए, "start&quat; और &kot;end&kot; के बजाय "left&countt; और &kot;right&कोटेशन; एपीआई लेवल 17 से शुरू करें.

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

बधाई हो!

आपने शुरू से एक पूरा ऐप्लिकेशन बनाया है और यह बहुत बढ़िया है!

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

ध्यान दें: कोडिंग की सभी चुनौतियां वैकल्पिक हैं.

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

संकेत: स्क्रोल व्यू में सिर्फ़ एक चाइल्ड व्यू हो सकता है. आपको स्क्रोल किए जा सकने वाले दो व्यू, ImageView और TextView को LinearLayout में रैप करना होगा.

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

Udcity कोर्स:

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

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

• लेआउट
• ViewGroup
• View
• लीनियर लेआउट
• ScrollView
• अलग-अलग पिक्सल डेंसिटी के साथ काम करना (डीपी)
• लेआउट एडिटर की मदद से एक यूज़र इंटरफ़ेस (यूआई) बनाना
• Android Studio के दस्तावेज़
• स्टाइल और थीम

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

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

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

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

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

पहला सवाल

व्यू ग्रुप इनमें से कौनसा है?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

दूसरा सवाल

इनमें से किस व्यू की हैरारकी मान्य नहीं है?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

तीसरा सवाल

स्टाइल, styles.xml में तय किए गए रिसॉर्स हैं. स्टाइल का इस्तेमाल करके, आप रंग, फ़ॉन्ट, टेक्स्ट का साइज़, और व्यू की कई दूसरी विशेषताएं तय कर सकते हैं. सही या गलत?

▢ सही

▢ गलत

चौथा सवाल

ScrollView एक ऐसा व्यू ग्रुप है जिसमें जितने चाहें उतने व्यू या व्यू ग्रुप हो सकते हैं. सही या गलत?

▢ सही

▢ गलत

पांचवां सवाल

आपके ऐप्लिकेशन में इमेज दिखाने के लिए किस यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल किया जा सकता है?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

अगला लेसन शुरू करें: 2.2: Google के साथ बातचीत करने का तरीका जोड़ें

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