Android Kotlin Fundamentals 02.1: Layout Editor का इस्तेमाल करके लीनियर लेआउट बनाना

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

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

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

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

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

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

• 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. इसके बाद खुलने वाले नया प्रोजेक्ट बनाएं डायलॉग बॉक्स में, ये पैरामीटर सेट करें और हो गया पर क्लिक करें.
   

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

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

6. अपने ऐप्लिकेशन को चलाएं. आपको खाली स्क्रीन पर "Hello World" स्ट्रिंग दिखेगी.
   

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

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

ग्रुप देखें

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

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

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

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

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

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

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

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

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

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

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

पहला चरण: 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
टेक्स्ट	इसे अपने नाम पर सेट करें. (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) पर क्लिक करें और Alt+Enter (Mac पर Option+Enter) टाइप करें. पॉप-अप मेन्यू से, डाइमेंशन रिसॉर्स निकालें चुनें.
3. Extract Resource डायलॉग में, Resource name फ़ील्ड में 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, व्यू के "आखिरी" किनारे के लिए पैडिंग तय करता है.
• android:paddingLeft से, बाईं ओर की पैडिंग तय होती है.
• android:paddingRight से, दाईं ओर के किनारे के लिए पैडिंग तय की जाती है.

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

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

दाईं/बाईं ओर बनाम शुरू/आखिर

"दाएं" और "बाएं" का मतलब हमेशा स्क्रीन के दाएं और बाएं हिस्से से होता है. भले ही, आपका ऐप्लिकेशन बाएं से दाएं (एलटीआर) या दाएं से बाएं (आरटीएल) फ़्लो का इस्तेमाल करता हो. "शुरू" और "खत्म" हमेशा फ़्लो की शुरुआत और आखिर के बारे में बताते हैं:

• एलटीआर फ़्लो के लिए, start = left और end=right.
• आरटीएल फ़्लो के लिए, start=right और end=left.

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

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

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

• "left" और"right " के अलावा, "start " और end" जोड़ें.
• उदाहरण के लिए, android:paddingLeft और android:paddingStart, दोनों का इस्तेमाल करें.

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

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

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

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

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

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

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

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

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

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

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

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

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. अगर Drawable को पहले से नहीं चुना गया है, तो उसे चुनें.
3. android को बड़ा करें, स्क्रोल करें, और btn_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. id के ImageView का नाम बदलने के लिए, "@+id/imageView" पर राइट क्लिक करें और Refactor > Rename को चुनें.
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 में रखा जा सकता है. इस टास्क में भी ऐसा ही किया गया है.

पहला चरण: एक ऐसा 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 कोड हटाएं. ऐसा इसलिए, क्योंकि आपके ऐप्लिकेशन में सिर्फ़ एक ऐसा व्यू होगा जिसे स्क्रोल किया जा सकता है. यह TextView होगा.
6. TextView को पैलेट से खींचकर कॉम्पोनेंट ट्री में छोड़ें. TextView को bio_scroll के नीचे रखें. इसे bio_scroll के चाइल्ड एलिमेंट के तौर पर रखें.
   
   
7. नए टेक्स्ट व्यू के id को bio_text पर सेट करें.
8. इसके बाद, नए टेक्स्ट व्यू के लिए स्टाइल जोड़ें. एट्रिब्यूट पैनल में, स्टाइल एट्रिब्यूट के बगल में मौजूद तीन बिंदुओं ... पर क्लिक करें. इससे संसाधन डायलॉग बॉक्स खुल जाएगा.
9. संसाधन डायलॉग में, NameStyle खोजें. सूची में से NameStyle चुनें और ठीक है पर क्लिक करें. टेक्स्ट व्यू में अब NameStyle स्टाइल का इस्तेमाल किया गया है. इसे आपने पिछले टास्क में बनाया था.
   
   

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

1. strings.xml खोलें, bio नाम का स्ट्रिंग रिसॉर्स बनाएं, और उसमें अपने बारे में या किसी भी विषय के बारे में लंबा टेक्स्ट डालें.
   

ध्यान दें:

• लाइन ब्रेक दिखाने के लिए, \n का इस्तेमाल करें.
• अगर आपको ऐपोस्ट्रॉफ़ी का इस्तेमाल करना है, तो आपको इसे बैकस्लैश के साथ एस्केप करना होगा. उदाहरण के लिए:
  "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.
   
   रखें

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

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

बधाई हो!

आपने नए सिरे से एक पूरा ऐप्लिकेशन बनाया है. यह बहुत अच्छा है!

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

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

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

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

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

Udacity का कोर्स:

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

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

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

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

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

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

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

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

पहला सवाल

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

▢ 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: उपयोगकर्ता के इंटरैक्शन की सुविधा जोड़ना

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