जन्मदिन का कार्ड ऐप्लिकेशन बनाएं

इस कोडलैब में आप एक आसान Android ऐप्लिकेशन बनाएंगे, जो टेक्स्ट दिखाएगा. आप Android में यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के बारे में ज़्यादा जानकर, स्क्रीन पर टेक्स्ट को जगह दे पाएंगे.

ज़रूरी बातें

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

आप क्या जानेंगे

  • यूज़र इंटरफ़ेस के क्या एलिमेंट हैं, जैसे कि Views और ViewGroups.
  • किसी ऐप्लिकेशन में TextView में टेक्स्ट दिखाने का तरीका.
  • TextView पर टेक्स्ट, फ़ॉन्ट, और मार्जिन जैसी विशेषताएं सेट करने का तरीका.

आप क्या बनाएंगे

  • एक Android ऐप्लिकेशन, जो टेक्स्ट फ़ॉर्मैट में जन्मदिन की शुभकामनाएँ दिखाता है.

जब आप'हो जाएगा, तब आपका ऐप्लिकेशन ऐसा दिखेगा.

आपको इन चीज़ों की ज़रूरत पड़ेगी

  • कंप्यूटर पर Android Studio इंस्टॉल किया गया हो.

एक खाली गतिविधि प्रोजेक्ट बनाएं

  1. शुरू करने के लिए, खाली गतिविधि टेंप्लेट का इस्तेमाल करके, Android Studio में एक नया Kotlin प्रोजेक्ट बनाएं.
  2. कम से कम 19 (KitKat) वाले एपीआई लेवल के साथ, ऐप्लिकेशन को कॉल करें.

अहम जानकारी: अगर आपको Android Studio में कोई नया प्रोजेक्ट नहीं बनाना है, तो ज़्यादा जानकारी के लिए, अपना पहला Android ऐप्लिकेशन बनाएं और चलाएं.

  1. अपना ऐप्लिकेशन चलाएं. ऐप्लिकेशन नीचे दिए गए स्क्रीनशॉट जैसा दिखना चाहिए.

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

यूज़र इंटरफ़ेस के बारे में जानकारी

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

इनमें से हर एलिमेंट एक ही होता है. इसे View कहते हैं. आपको अपने ऐप्लिकेशन की स्क्रीन पर जो कुछ भी दिखाई देता है वह View है. Views इंटरैक्टिव हो सकती है, जैसे कोई क्लिक किया जा सकने वाला बटन या बदलाव करने लायक इनपुट फ़ील्ड.

इस कोडलैब में आप एक ऐसे View के साथ काम करेंगे जो टेक्स्ट दिखाने के लिए है और जिसे TextView कहा जाता है.

किसी Android ऐप्लिकेशन में मौजूद Views' न सिर्फ़ स्क्रीन पर फ़्लोट करता है. Views के एक-दूसरे से संबंध हैं. उदाहरण के लिए, कोई इमेज कुछ लेख के आगे हो सकती है और बटन एक पंक्ति बना सकते हैं. Views को व्यवस्थित करने के लिए, आप उन्हें कंटेनर में रखें. ViewGroup एक कंटेनर होता है, जिसमें View ऑब्जेक्ट मौजूद हो सकते हैं. साथ ही, इसमें मौजूद Views को व्यवस्थित करने के लिए ज़िम्मेदार होता है. Android डिवाइस की स्क्रीन के साइज़ और आसपेक्ट रेशियो के हिसाब से, क्रम या लेआउट बदल सकता है. साथ ही, लेआउट डिवाइस के पोर्ट्रेट या लैंडस्केप मोड में होने या न होने के हिसाब से बदल सकता है.

ViewGroup में से एक ConstraintLayout टाइप होता है, जो Views को अपने हिसाब से सेट करने में आपकी मदद करता है.

लेआउट एडिटर के बारे में जानकारी

Views और ViewGroups को व्यवस्थित करके यूज़र इंटरफ़ेस बनाना, Android ऐप्लिकेशन बनाने का एक बड़ा हिस्सा है. Android Studio, आपको एक ऐसा टूल देता है जिससे आप ऐसा कर सकते हैं. इसे लेआउट एडिटर कहते हैं. आप 'लेआउट एडिटर का इस्तेमाल करके "नमस्ते दुनिया!" टेक्स्ट को & में कोट करें;जन्मदिन की शुभकामनाएं!&kot; और उसके बाद टेक्स्ट को स्टाइल में बदलो.

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

  • बाईं ओर (1) प्रोजेक्ट विंडो है, जिसे आपने पहले देखा था. इसमें वे सभी फ़ाइलें शामिल होती हैं जो आपके प्रोजेक्ट में शामिल हैं.
  • बीच में आपको दो ड्रॉइंग (4) और (5) दिख सकती हैं जो आपके ऐप्लिकेशन के लिए स्क्रीन लेआउट को दिखाती हैं. बाईं ओर (4) का उदाहरण, इस बात का अनुमान है कि ऐप्लिकेशन के चलने पर आपकी स्क्रीन कैसी दिखेगी. इसे डिज़ाइन व्यू कहा जाता है.
  • दाईं ओर, (5) को ब्लूप्रिंट व्यू के तौर पर दिखाया गया है, जो खास तरह की कार्रवाइयों के लिए काम का हो सकता है.
  • पैलेट (2) में Views की अलग-अलग तरह की सूचियां होती हैं, जिन्हें आप अपने ऐप्लिकेशन में जोड़ सकते हैं.
  • कॉम्पोनेंट ट्री (3) आपकी स्क्रीन को अलग-अलग तरीके से दिखाता है. इसमें आपकी स्क्रीन के सभी व्यू शामिल होते हैं.
  • सबसे दाईं ओर 6 एट्रिब्यूट हैं. यह आपको View के एट्रिब्यूट दिखाता है और आपको उन्हें बदलने की सुविधा देता है.

लेआउट एडिटर और इसे कॉन्फ़िगर करने के तरीके के बारे में डेवलपर रेफ़रंस गाइड में ज़्यादा पढ़ें.

पूरे लेआउट एडिटर का स्क्रीनशॉट:

अपने ऐप्लिकेशन को जन्मदिन कार्ड की तरह ज़्यादा बनाने के लिए, लेआउट एडिटर में कुछ बदलाव करें!

Hello World का मैसेज बदलें

  1. Android Studio में बाईं ओर प्रोजेक्ट विंडो ढूंढें.
  2. इन फ़ोल्डर और फ़ाइलों का ध्यान रखें: ऐप्लिकेशन फ़ोल्डर में उस ऐप्लिकेशन की ज़्यादातर फ़ाइलें होती हैं, जिसे आप बदलेंगे. res फ़ोल्डर, इमेज या स्क्रीन लेआउट जैसे रिसॉर्स के लिए है. लेआउट फ़ोल्डर, स्क्रीन लेआउट के लिए है. activity_main.xml फ़ाइल में, आपके स्क्रीन लेआउट की जानकारी होती है.
  3. app फ़ोल्डर को बड़ा करें. इसके बाद, res फ़ोल्डर और फिर लेआउट फ़ोल्डर को बड़ा करें.
  4. activity_main.xml पर दो बार क्लिक करें.
    यह लेआउट एडिटर में खुलता है. साथ ही, यह डिज़ाइन व्यू में बताए गए लेआउट को दिखाता है.
  1. कॉम्पोनेंट ट्री में व्यू की सूची देखें. ध्यान दें कि ConstraintLayout और उसके नीचे TextView मौजूद है.
    ये आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को दिखाते हैं. TextView को इंडेंट किया गया है, क्योंकि यह ConstraintLayout में है. Views को ConstraintLayout में जोड़ने पर, वे इस सूची में जुड़ जाएंगे.
  2. ध्यान दें कि TextView के बगल में &kot;Hello World!&kot; होता है. यह वही टेक्स्ट है जो आपको ऐप्लिकेशन चलाने पर दिखता है.
  3. कॉम्पोनेंट ट्री में जाकर, TextView पर क्लिक करें.
  4. दाईं ओर एट्रिब्यूट ढूंढें.
  5. एलान किए गए एट्रिब्यूट सेक्शन पर जाएं.
  6. ध्यान दें कि एलान किए गए एट्रिब्यूट सेक्शन में, टेक्स्ट एट्रिब्यूट में Hello World! शामिल है.

text एट्रिब्यूट वह टेक्स्ट दिखाता है जो TextView में प्रिंट किया गया है.

  1. text एट्रिब्यूट पर क्लिक करें, जहां Hello World! टेक्स्ट है.
  2. बातचीत में बदलाव करके कहें कि जन्मदिन की शुभकामनाएं! फिर Enter बटन दबाएं. अगर आपको हार्डकोड की गई स्ट्रिंग के बारे में चेतावनी दिखती है, तो फ़िलहाल इस बारे में चिंता न करें. आप अगले कोडलैब (कोड बनाना सीखना) में, चेतावनी से छुटकारा पाने का तरीका जानेंगे.
  3. ध्यान दें कि डिज़ाइन व्यू में टेक्स्ट बदल गया है.....यह ठीक है, आप अपने बदलाव तुरंत देख सकते हैं!
  4. अपना ऐप्लिकेशन चलाएं और अब मैसेज पाएं: जन्मदिन की शुभकामनाएं!

बहुत अच्छे! आपने Android ऐप्लिकेशन में पहली बार बदलाव किए हैं.

आप जो जन्मदिन कार्ड बना रहे हैं वह अब आपके ऐप्लिकेशन में मौजूद कार्ड से अलग दिखता है. बीच में छोटे टेक्स्ट के बजाय, आपको दो बड़े मैसेज की ज़रूरत होगी, एक ऊपर ऊपर की ओर और दूसरा नीचे दाएं कोने में. इस काम में आप #39;मौजूदा TextView को मिटाकर दो नए TextViews जोड़ेंगे. साथ ही, उन्हें ConstraintLayout में रखने का तरीका जानें.

मौजूदा TextView मिटाएं

  1. लेआउट एडिटर में, लेआउट के बीच में TextView चुनने के लिए क्लिक करें.
  2. Delete कुंजी दबाएं.
    Android Studio TextView को मिटा देता है और आपका ऐप्लिकेशन अब लेआउट एडिटर और कॉम्पोनेंट ट्री में सिर्फ़ एक ConstraintLayout दिखाता है.

टेक्स्ट व्यू जोड़ना

इस चरण में, जन्मदिन के अभिवादन को होल्ड करने के लिए, आप अपने ऐप्लिकेशन के ऊपर बाईं ओर TextView जोड़ देंगे.

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

  1. TextView ढूंढें. यह सामान्य कैटगरी और टेक्स्ट, दोनों कैटगरी में दिखता है.
  2. TextViewप्लेट में ऊपर की ओर बाईं ओर लेआउट एडिटर में खींचकर छोड़ें और उसे छोड़ें.
    आपको चाहिए कि यह एकदम सटीक न हो, बस इसे ऊपर बाएं कोने के पास छोड़ दें.
  3. ध्यान दें कि TextView को जोड़ा गया है. साथ ही, कॉम्पोनेंट ट्री में लाल विस्मयादिबोधक चिह्न देखें.
  4. पॉइंटर को विस्मयादिबोधक चिह्न के ऊपर घुमाएं. इसके बाद, आपको एक चेतावनी मैसेज दिखेगा कि व्यू दिखना बंद नहीं होगा और ऐप्लिकेशन चलाने पर वह किसी दूसरी जगह पर चला जाएगा. आपको अगले चरण में इसे ठीक करना होगा.

TextView की स्थिति बनाएं

जन्मदिन कार्ड के लिए, TextView ऊपरी बाएं कोने में होना चाहिए और उसके आस-पास कुछ जगह होनी चाहिए. चेतावनी को ठीक करने के लिए, आपको TextView में कुछ कंस्ट्रेंट जोड़ने होंगे, जिससे आपके ऐप्लिकेशन को इस पोज़िशन को सेट करने का तरीका पता चलता है. कंस्ट्रेंट, निर्देश और सीमाएं होती हैं, जहां View किसी लेआउट में हो सकता है.

सबसे ऊपर और बाईं ओर, जोड़े गए कंस्ट्रेंट के मार्जिन होंगे. मार्जिन यह बताता है कि View उसके कंटेनर के किनारे से कितनी दूर है.

  1. दाईं ओर मौजूद एट्रिब्यूट में, लेआउट सेक्शन में कंस्ट्रेंट विजेट देखें. स्क्वेयर आपके व्यू को दिखाता है.
  2. वर्ग के ऊपर मौजूद + पर क्लिक करें. यह आपके टेक्स्ट व्यू के ऊपरी हिस्से और कंस्ट्रेंट लेआउट के ऊपरी किनारे के बीच के कंस्ट्रेंट के लिए है.
  3. सबसे ऊपर वाला मार्जिन सेट करने के लिए, नंबर वाला फ़ील्ड दिखता है. मार्जिन, TextView से कंटेनर के किनारे, ConstraintLayout की दूरी है. आपने TextView को जहां छोड़ा था उसके आधार पर आपको दिखने वाला नंबर अलग-अलग होगा. जब आप सबसे ऊपर का मार्जिन सेट करते हैं, तो Android Studio, टेक्स्ट व्यू में सबसे ऊपर एक कंस्ट्रेंट को अपने-आप जोड़ देता है.ConstrainLayout
  4. ऊपर वाले मार्जिन को 16 पर सेट करें.
  1. बाएं मार्जिन के लिए भी यही करें.
  2. अपने दोस्त को जन्मदिन की शुभकामनाएं देने के लिए टेक्स्ट सेट करें. उदाहरण के लिए, &कोट करें;जन्मदिन की शुभकामनाएं, सैम!&कोटेशन; और Enter दबाएं.
  3. ध्यान दें कि डिज़ाइन व्यू में यह अपडेट दिखता है कि आपका ऐप्लिकेशन कैसा दिखेगा.

कोई दूसरा TextView जोड़ें और उसकी जगह बनाएं

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

  1. पैलेट से एक नया TextView खींचें और लेआउट एडिटर में ऐप्लिकेशन व्यू के नीचे दाईं ओर छोड़ें.
  2. 16 का दायां मार्जिन सेट करें.
  3. वीडियो का निचले मार्जिन 16 सेट करें.
  4. अपने कार्ड पर हस्ताक्षर करने के लिए, एट्रिब्यूट में जाकर टेक्स्ट एट्रिब्यूट को सेट करें. उदाहरण के लिए, कोटेशन को ईमेल के ज़रिए रखें.
  5. अपना ऐप्लिकेशन चलाएं. आपको ऊपर बाईं ओर अपने जन्मदिन की शुभकामनाएं और नीचे दाईं ओर अपना हस्ताक्षर दिखाई देना चाहिए.

बधाई हो! आपने अपने ऐप्लिकेशन में कुछ यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ा और उन्हें पोज़िशन किया है.

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

  1. कॉम्पोनेंट ट्री में पहले TextView पर क्लिक करें. इसके बाद, एट्रिब्यूट विंडो के सामान्य एट्रिब्यूट सेक्शन पर जाएं. इसे ढूंढने के लिए, आपको नीचे स्क्रोल करना पड़ सकता है.
  2. fontFamily, textSize, और textColor के साथ कई एट्रिब्यूट पर ध्यान दें.
  3. textAppearance को खोजें.
  4. अगर textAppearance बड़ा नहीं किया गया है, तो डाउन त्रिभुज पर क्लिक करें.
  5. textSize को 36sp पर सेट करें.
  1. लेआउट एडिटर में बदलाव पर ध्यान दें.
  2. fontFamily को सामान्य में बदलें.
  3. कुछ अलग फ़ॉन्ट आज़माकर देखें कि वे कैसे दिखते हैं. फ़ॉन्ट के लिए सूची के सबसे नीचे, ज़्यादा फ़ॉन्ट... के और भी ज़्यादा विकल्प हैं
  4. अलग-अलग फ़ॉन्ट आज़माकर देखने के बाद, fontFamily को sans- Serif-light पर सेट करें.
  5. textColor एट्रिब्यूट's में बदलाव करने वाले बॉक्स पर क्लिक करें और काला टाइप करना शुरू करें.
    ध्यान दें कि टाइप करते समय, Android Studio उन रंगों की सूची दिखाता है जिनमें शामिल टेक्स्ट आपने अभी तक टाइप किया है.
  6. रंगों की सूची में से @android:color/black को चुनें और Enter दबाएं.
  7. TextView में अपने हस्ताक्षर से जोड़ने के लिए, textSize, textColor और fontFamily को बदलें.
  8. अपना ऐप्लिकेशन चलाएं और नतीजे देखें.

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