सभी फोनों में से पचहत्तर प्रतिशत एंड्रॉइड फोन हैं और सभी इंटरनेट उपयोगकर्ताओं में से पचहत्तर प्रतिशत केवल अपने फोन का उपयोग करके इंटरनेट का उपयोग करते हैं। इसलिए Android ऐप्स के लिए एक बड़ा बाज़ार है।
हमने अभी-अभी freeCodeCamp.org YouTube चैनल पर Android ऐप डेवलपमेंट पर क्रैश कोर्स प्रकाशित किया है। यदि आप Android ऐप डेवलपमेंट में एकदम नए हैं तो यह कोर्स एकदम सही है।
राहुल पांडे ने इस कोर्स को विकसित किया। राहुल फेसबुक में एंड्रॉइड लीड और स्टैनफोर्ड यूनिवर्सिटी में लेक्चरर हैं।
इस पाठ्यक्रम में आप एक टिप कैलकुलेटर बनाकर Android विकास सीखेंगे। यह पाठ्यक्रम Android के साथ कोई पूर्व अनुभव नहीं लेता है, और अंत में आपके पास कुछ ऐसा ऐप होगा जिसे आप प्रकाशित कर सकते हैं।
आप सीखेंगे कि एक्सएमएल के साथ यूजर इंटरफेस कैसे बनाया जाता है, और कोटलिन प्रोग्रामिंग भाषा का उपयोग करके लॉजिक को कैसे कोडित किया जाता है। ये किसी भी आधुनिक Android ऐप के मूलभूत निर्माण खंड हैं।
आप यह भी सीखेंगे कि लेआउट के लिए ConstraintLayout और ऐप लॉजिक के लिए दो ईवेंट श्रोताओं का उपयोग कैसे करें। आपके द्वारा आधार राशि और टिप प्रतिशत दर्ज करने के बाद, ऐप आपके लिए टिप और टोटल की गणना करेगा। आप हमारे ऐप को और अधिक विशिष्ट बनाने के लिए टिप प्रतिशत एनिमेशन और फ़ुटर भी लागू करेंगे।
नीचे दिए गए पाठ्यक्रम को देखें या freeCodeCamp.org YouTube चैनल (1 घंटे की घड़ी) पर देखें।
प्रतिलेख
(स्वत:उत्पन्न)
इस शुरुआती कोर्स में, आप राहुल पांडे से Android ऐप बनाना सीखेंगे।
राहुल फेसबुक में एक एंड्रॉइड इंजीनियर है और स्टैनफोर्ड यूनिवर्सिटी में एक व्याख्यान है, हम शुरू से ही एक एंड्रॉइड ऐप बनाने जा रहे हैं, हम एक खाली प्रोजेक्ट के साथ शुरू करेंगे और उस चीज़ के साथ समाप्त करेंगे जिसका आप वास्तव में उपयोग कर सकते हैं, और यहां तक कि प्रकाशित भी कर सकते हैं। Play Store, हम एक टिप कैलकुलेटर बनाने जा रहे हैं, जहां आप आधार राशि, टिप प्रतिशत दर्ज कर सकते हैं, और ऐप आपके लिए टिप और कुल राशि की गणना करेगा।
हम कोटलिन प्रोग्रामिंग भाषा का उपयोग करके इस ऐप को बनाने जा रहे हैं।
तो मैं यह मानने जा रहा हूँ कि प्रोग्रामिंग में आपकी कुछ पृष्ठभूमि है।
लेकिन अगर आप कोटलिन के लिए नए हैं, तो मैं अपनी बनाई भाषा के बारे में एक त्वरित 12 मिनट के प्राइमर के लिए विवरण में एक लिंक छोड़ दूंगा।
मैं राहो हूं, मैं कुछ समय से YouTube पर और YouTube से बाहर Android पढ़ा रहा हूं।
तो जब आप तैयार हों, तो आइए इसमें शामिल हों और इस ऐप को एक साथ बनाएं।
मैं इस वीडियो में तीन चीजें शामिल करना चाहता हूं।
नंबर एक, मैं टिप कैलकुलेटर एप्लिकेशन की मुख्य विशेषताओं के माध्यम से चलना चाहता हूं।
नंबर दो, मैं Android की मूल अवधारणाओं के बारे में बताऊंगा जिन्हें हम इसे बनाते समय कवर करेंगे।
और तीसरा, क्योंकि मैं ऐप को जानबूझकर, बहुत सरल रख रहा हूं, इसलिए मैं कुछ Android अवधारणाओं को भी बताना चाहता हूं जो इसे बनाने के बारे में हमारे सामने नहीं आएंगे।
और उन्हें बाद में अधिक परिष्कृत या जटिल Android ऐप्स में शामिल किया जाएगा।
मैंने पहले उल्लेख किया था कि आप वास्तव में कैसे आगे बढ़ सकते हैं और जैसे ही उसने समाप्त किया, इस ऐप को Google Play Store पर प्रकाशित किया, ट्यूटोरियल समाप्त किया।
और ठीक यही मैंने किया।
इसलिए यदि आप यह देखना चाहते हैं कि हम क्या बनाने जा रहे हैं, तो बेझिझक विवरण में दिए गए लिंक को देखें और अपने किसी Android डिवाइस पर डाउनलोड करें।
तो चलिए ऐप का एक डेमो करते हैं ताकि हम उन मुख्य विशेषताओं को समझ सकें जिन्हें हम बनाने जा रहे हैं।
तो इस उदाहरण में, मैं एक बहुत ही भव्य सोलो डिनर के लिए बाहर गया, और मैंने $83.15 खर्च किए।
और मैं 24% का एक बहुत उदार टिप छोड़ रहा हूं और सेब स्वचालित रूप से टिप और कुल राशि की गणना करता है।
तो गणित को थोड़ा आसान बनाने के लिए, क्यों न हम आधार राशि को $100 कर दें।
और आप जो देख सकते हैं, वह यह है कि जो कीबोर्ड आता है वह हमें केवल संख्याओं और दशमलवों को इनपुट करने की अनुमति देता है, जो समझ में आता है क्योंकि हम यहां मुद्राओं के साथ काम कर रहे हैं।
और अगर मैं भोजन पर मिलने वाली सेवा से वास्तव में खुश महसूस कर रहा हूं, तो मैं टिप प्रतिशत बढ़ा सकता हूं और इसे अधिकतम मात्रा में 30% तक ला सकता हूं।
और यहां दो चीजें होती हैं।
एक यह है कि हम 30 पर टिप और कुल राशि की गणना को गतिशील रूप से अपडेट करते हैं।
और योग 130 है।
लेकिन साथ ही, हम उस टिप प्रतिशत के विवरण को अपडेट करते हैं।
तो महान से अद्भुत हो गया और यह चमकीला हरा रंग भी बन गया।
दूसरी ओर, अगर मैं वास्तव में सेवा से नाखुश था, तो मैं शून्य टिप दे सकता हूं।
और हम इसे एक घटिया टिप मानते हैं।
और आप देख सकते हैं कि रंग इस लाल रंग में कैसे अपडेट हुआ।
और फिर यहां नीचे पाद लेख में, हमारे पास ऐप को वैयक्तिकृत करने का एक तरीका भी है ताकि आप कह सकें कि आपने इसे किसने बनाया या आप कहां से हैं।
टिप कैलकुलेटर में हम जिन अवधारणाओं को शामिल करते हैं, वे वही अवधारणाएं हैं जो हर एंड्रॉइड ऐप के लिए मौलिक हैं।
सबसे पहले UI बना रहा है।
हर ऐप को एक यूजर इंटरफेस की जरूरत होती है।
और मुख्य घटक जिसका हम यहां लाभ उठाएंगे वह एक बाधा लेआउट है, जिसमें अन्य विजेट शामिल होंगे, उदाहरण के लिए, टेक्स्ट व्यू, या सीकपार्ट, टिप प्रतिशत में दर्ज करें।
दूसरा, हर दिलचस्प एंड्रॉइड ऐप उपयोगकर्ता इनपुट को सुनने और प्रतिक्रिया करने वाला है।
इसलिए हमारे ऐप में डेटा इनपुट करने के दो तरीके हैं, एक आधार राशि में प्रवेश करना है।
और दूसरा टिप प्रतिशत है।
और उसके आधार पर हमें UI को उचित रूप से प्रतिक्रिया और अद्यतन करने की आवश्यकता है।
और तीसरा, हम एंड्रॉइड पर स्टाइल और एनिमेशन की सतह को मुश्किल से खरोंचेंगे, मैं आपको दिखाऊंगा कि कैसे कुछ रंगों को अपडेट किया जाए और आपको यह भी दिखाया जाए कि टिप विवरण के साथ एक एनीमेशन कैसे करें और इसके रंग को गतिशील रूप से बदलें।
बहुत कुछ ऐसा भी है जिसे हम टिप कैलकुलेटर में शामिल नहीं करने जा रहे हैं।
और यह दायरा कम करने और इस ऐप को वास्तव में तेज़ और सरल बनाने के लिए महत्वपूर्ण है।
बनाने के लिए।
यदि आप Android पर नए हैं, तो सबसे पहले, हमारे पास एकाधिक स्क्रीन नहीं होंगी।
जिसका मतलब है कि हमें नेविगेशन या एंड्रॉइड में बैक स्टैक जैसी चीजों से निपटने की जरूरत नहीं है।
और वास्तव में, हमारे पास जो सिंगल स्क्रीन है वह वास्तव में काफी सरल है, क्योंकि हमारे पास किसी भी प्रकार का सूची डेटा नहीं है जिसे हमें प्रबंधित करने की आवश्यकता है।
दूसरा, इंटरनेट में नेटवर्किंग से हमारा कोई लेना-देना नहीं है।
जैसे ही आप किसी एपीआई या सर्वर से बात करना शुरू करते हैं, चीजें थोड़ी अधिक जटिल हो जाती हैं क्योंकि आपको एसिंक्रोनस प्रोग्रामिंग से निपटना होता है और उस डेटा को प्रबंधित करना होता है।
और तीसरा, हम भंडारण के साथ बिल्कुल भी व्यवहार नहीं कर रहे हैं, यह सब कुछ स्थानीय और स्मृति में होगा।
इसलिए हम किसी डेटाबेस या डिस्क या क्लाउड पर कहीं भी लिखने नहीं जा रहे हैं।
और ये तीनों ही ऐप को बनाने में बहुत आसान बनाते हैं।
इसलिए मुझे यकीन है कि जब आप इसे बनाते हैं और आप एक रेस्तरां में जाते हैं, तो आप सुपर लोकप्रिय होने जा रहे हैं क्योंकि आप आसानी से टिप आटा की गणना करने में सक्षम होंगे और सचमुच आपका नाम ऐप पर होगा।
तो मैं आपको अगले वीडियो में देखूंगा।
इस वीडियो में, हम बिल्कुल नए एंटर स्टूडियो प्रोजेक्ट के साथ शुरुआत करने जा रहे हैं और विचारों को लेआउट कर रहे हैं हमारे टिप कैलकुलेटर के लिए, विशेष रूप से, हम आठ दृश्य प्रस्तुत करने जा रहे हैं जहां बाईं ओर से चार टेक्स्ट दृश्य सामग्री का वर्णन करेंगे दाईं ओर क्या दिखाया जा रहा है।
सबसे पहले हम एक नया एंटर स्टूडियो प्रोजेक्ट बनाएंगे।
इसलिए मेरा स्टूडियो यहां चल रहा है, और मैं आर्कटिक फॉक्स चला रहा हूं, लेकिन किसी भी हाल के संस्करण को नए प्रोजेक्ट पर टैप करना चाहिए।
और मैं खाली गतिविधि टेम्पलेट चुनने जा रहा हूँ।
ये अन्य कभी-कभी उपयोगी होते हैं, लेकिन वे हमारे आवेदन में बहुत अधिक गड़बड़ी लाते हैं, जो भ्रमित करने वाला हो सकता है।
तो आमतौर पर, मैं खाली गतिविधि के साथ जाता हूँ।
आइए हमारे एप्लिकेशन को टिप्पी कहते हैं।
पैकेज का नाम, आमतौर पर मैं यह करूँगा कि मैं अपना डोमेन नाम या अपना ईमेल पता लूँगा और इसे पीछे की ओर फ़्लिप करूँगा।
तो मैं इसे वैसे ही छोड़ दूंगा और फिर एक स्थान चुनूंगा, सुनिश्चित करें कि आपके पास कोटलिन है, इस भाषा का चयन करें।
और मैं एपीआई 21 का न्यूनतम एसडीके संस्करण चुनने जा रहा हूं।
अब मैं फिनिश पर टैप करूंगा।
और जब भी मेरे पास कोई नया प्रोजेक्ट होता है, तो सबसे पहली चीज जो मैं करना चाहता हूं, वह है बस स्टार्टर कोड को आजमाना और चलाना।
क्योंकि अगर हम स्टार्टर कोड भी नहीं चला सकते हैं, तो कुछ गलत हो गया है।
इससे पहले कि हम कोई कोड लिखना शुरू करें, आइए सुनिश्चित करें कि हम एक अच्छी जगह पर हैं।
जब हम अपने स्टूडियो में एक नया प्रोजेक्ट बनाते हैं तो सब कुछ सेट करने में कुछ समय लगेगा।
अपना एप्लिकेशन चलाने के लिए, हम मेनू में ड्रॉप डाउन पर जा सकते हैं और अपने ऐप को किसी एमुलेटर या भौतिक डिवाइस पर तैनात करना चुन सकते हैं।
इसलिए मैं पिक्सेल टू एपीआई 29 चुनने जा रहा हूं, जो कि एक एमुलेटर है जिसे मैंने पहले बनाया था, हमारे एमुलेटर को बूट करने के लिए उस हरे त्रिकोण को हिट करें यदि यह पहले से मौजूद नहीं है, और फिर इस एमुलेटर पर अपना प्रोजेक्ट बनाएं और तैनात करें।
और वर्तमान प्रगति देखने के लिए आपको Android Studio के निचले भाग में स्थिति दिखाई देगी।
इसमें एक या दो मिनट लग सकते हैं।
लेकिन जब यह हो जाएगा, तो ऐप स्वचालित रूप से डिवाइस पर भेज दिया जाएगा और अग्रभूमि में लाया जाएगा।
इसलिए हमें केवल तब तक इंतजार करना होगा जब तक हम एमुलेटर पर कुछ कार्रवाई नहीं देख लेते।
ठीक है, बढ़िया।
यह आशाजनक लग रहा है।
हम एक ऐसा एप्लिकेशन देख रहे हैं जिसे हैलो वर्ल्ड के टेक्स्ट के साथ इतना खुला एमुलेटर कहा जाता है, जो एक खाली प्रोजेक्ट के लिए एक डिफ़ॉल्ट है।
और इससे हमें विश्वास होता है कि हम मूल परियोजना को सफलतापूर्वक चलाने में सक्षम हैं।
चलो इनर स्टूडियो में आते हैं और स्टार्टर फाइलों के बारे में बात करते हुए एक त्वरित मिनट बिताते हैं।
और वास्तव में, यह काफी सरल है क्योंकि केवल दो फाइलें हैं जिनका हम मुख्य गतिविधि डॉट कोटलिन और गतिविधि मुख्य डॉट एक्सएमएल से संबंध रखने जा रहे हैं, आप एक स्क्रीन का प्रतिनिधित्व करने के रूप में एंड्रॉइड शब्दावली में एक गतिविधि के बारे में सोच सकते हैं।
इसलिए अभी हमारे पास जो प्रोजेक्ट है, उसके साथ हमारे पास केवल एक स्क्रीन है।
और इसे मुख्य गतिविधि या मुख्य स्क्रीन के रूप में संदर्भित किया जाता है।
और यही वह व्यावसायिक तर्क है जिसे हम मुख्य गतिविधि नामक इस फ़ाइल में यहीं परिभाषित कर रहे हैं।
विशेष रूप से, स्टार्टर कोड हमें एक फ़ंक्शन या एक विधि देता है जिसे पहले से ही ओवरराइड किया जा रहा है।
और इसे ऑनक्रिएट कहा जाता है, एंड्रॉइड सिस्टम स्वचालित रूप से इस फ़ंक्शन को आमंत्रित या कॉल करेगा जब हमारा एप्लिकेशन शुरू हो रहा है जब यह हमारी स्क्रीन बना रहा है।
और यहां महत्वपूर्ण लाइन है लाइन नौ सेटकंटेंटव्यू आर डॉट लेआउट एक्टिविटी मेन।
तो आर संसाधनों के लिए खड़ा है।
तो हम यहां जो कह रहे हैं वह यह है कि हमारी स्क्रीन की सामग्री या यूआई संसाधनों में लेआउट फ़ाइल होनी चाहिए, जो गतिविधि मुख्य डॉट एक्सएमएल में परिभाषित है।
और वास्तव में, अगर हम इसकी परिभाषा पर कूदते हैं, तो हम देख सकते हैं कि यह सीधे गतिविधि मुख्य डॉट एक्सएमएल पर जाता है।
इसलिए मैं खुद को और अधिक जगह देने के लिए प्रोजेक्ट टूल विंडो को यहां छोटा करने जा रहा हूं।
और वह विशेषता फलक को छोटा भी करता है।
तो यहाँ ठीक वही है जो हम एप्लिकेशन में देख रहे हैं, हैलोवर्ल्ड के साथ बस एक खाली कैनवास।
और विशेष रूप से, यदि आप यहाँ पर घटक वृक्ष को देखते हैं, तो यह आपके लिए छोटा हो सकता है।
लेकिन आप यहां पर टैप करके इसे विस्तृत कर सकते हैं, हम देख सकते हैं कि मूल तत्व कुछ ऐसा है जिसे एक बाधा लेआउट कहा जाता है।
और इसमें ठीक एक बच्चा है जिसे TextView, या एक लेबल कहा जाता है।
और इसमें एक विशेषता है जिसका मूल्य हैलो वर्ल्ड है।
और इसी तरह हम अपने चल रहे एप्लिकेशन में हैलो वर्ल्ड टेक्स्ट देख रहे हैं।
इस वीडियो में, हम अपना सारा समय गतिविधि main dot XML में व्यतीत करने जा रहे हैं, क्योंकि अभी हम केवल अपने एप्लिकेशन के लिए UI बनाने से संबंधित हैं।
और विशेष रूप से, यहां बताया गया है कि हम कैसे समाप्त करना चाहते हैं, हमारे पास स्क्रीन में आठ घटक होंगे।
बाईं ओर, हमारे पास चार अलग-अलग टेक्स्ट दृश्य हैं, आप एक टेक्स्ट के बारे में सोच सकते हैं, आपको एक लेबल चाहिए, जो उपयोगकर्ता द्वारा संपादन योग्य नहीं है।
दाईं ओर, हमारे पास TextView द्वारा वर्णित किए जा रहे वास्तविक घटक हैं।
तो हमारे पास शीर्ष पर एक संपादन टेक्स्ट है, जो उपयोगकर्ता को बिल राशि में प्रवेश करने की अनुमति देता है, हमारे पास एक खोज बार है, जो उपयोगकर्ता को टिप प्रतिशत में प्रवेश करने की अनुमति देता है, और फिर दो और टेक्स्ट टिप के लिए नीचे उपयोग करते हैं और कुल राशि।
इससे पहले कि हम अपने लेआउट का निर्माण शुरू करें, मैं एक और बात बताना चाहता हूं, जो यह है कि हमारे UI के कई दृष्टिकोण हैं, जो हम डिफ़ॉल्ट रूप से देख रहे हैं वह एक डिज़ाइन पूर्वावलोकन है, जो वास्तव में आपके एमुलेटर पर दिखाई देगा या डिवाइस।
लेकिन आप कोड टैब में भी ड्रॉप डाउन कर सकते हैं, जो वास्तविक अंतर्निहित एक्सएमएल है।
तो आप देख सकते हैं कि हमारे पास बाधा लेआउट कैसे है और फिर एक बच्चा टेक्स्ट व्यू को डिज़ाइन के समान ही देखता है।
स्प्लिट का मतलब है कि आप दोनों को देखते हैं।
और हमारा अधिकांश समय डिज़ाइन पूर्वावलोकन को देखने में व्यतीत होने वाला है।
और हम जो कर सकते हैं वह है पैलेट में जाना और टेक्स्ट व्यू जैसे विभिन्न घटकों को ड्रैग और ड्रॉप करना या टेक्स्ट को संपादित करना जो हम चाहते हैं।
और फिर से, इसे कोड टैब में प्रदर्शित किया जाएगा।
तो बस इस बात का ध्यान रखें कि डिज़ाइन पूर्वावलोकन और अंतर्निहित XML में आप जो भी परिवर्तन करते हैं, उनके बीच एक-से-एक पत्राचार होता है।
तो अभी के लिए, आइए डिजाइन पर वापस जाएं, हमारे पास जो भी घटक हैं, उन्हें हटा दें, इसलिए हमारे पास बिना बच्चों के एकल बाधा लेआउट है।
दस्तावेज़ीकरण बाधा लेआउट को फ्लैट दृश्य पदानुक्रम के साथ बड़े और जटिल लेआउट बनाने के तरीके के रूप में वर्णित करता है।
हम परिभाषित बाधाओं के एक सेट के माध्यम से भाई-बहन के विचारों और पैरेंट लेआउट के बीच संबंधों का वर्णन करने में सक्षम हैं।
और यह आंतरिक सिस्टम को हमारे UI को कई आकारों के फ़ोन या टैबलेट पर शानदार ढंग से लेआउट करने की अनुमति देता है।
और यहां महत्वपूर्ण बात कोई नेस्टेड दृश्य समूह नहीं है।
एंड्रॉइड पर, यदि आपके पास बहुत गहराई से नेस्टेड व्यू पदानुक्रम है, जो बहुत अधिक प्रदर्शन में गिरावट और कुछ ऐसा है जिसे हम जंक या यूआई लैग कहते हैं।
और इसलिए बाधा लेआउट हमें नेस्टेड दृश्य समूहों के बिना जटिल दृश्य बनाने की अनुमति देता है।
टिप कैलकुलेटर प्रोजेक्ट पर वापस आते हुए, हम यहां स्क्रीन पर सभी आठ व्यू को सिंगल पैरेंट कंस्ट्रक्शन लेआउट में रखने जा रहे हैं, कोई नेस्टेड व्यू ग्रुप नहीं होगा, जो उतना ही अच्छा है जितना हम वहां पहुंच सकते हैं, कोई सापेक्ष लेआउट नहीं है या हमारे पैरेंट बाधा लेआउट के अंदर रैखिक लेआउट।
इसलिए भले ही आपने पहले कभी बाधा लेआउट के साथ काम नहीं किया हो, इस बारे में सोचने के लिए अभी कुछ समय दें कि आप स्क्रीन पर दृश्यों को एक दूसरे के सापेक्ष कैसे रख सकते हैं, जैसे कि हम इसे एक सपाट दृश्य पदानुक्रम में वर्णित कर सकते हैं।
एंड्रॉइड स्टूडियो में वापस, पहली चीज जो हम करेंगे, वह है हमारी स्क्रीन के ऊपरी बाएँ घटक का प्रतिनिधित्व करने वाला एक टेक्स्ट व्यू, जो बेस टेबल का प्रतिनिधित्व करने वाला टेक्स्ट व्यू है।
जब भी मैं किसी कंपोनेंट को ड्रैग आउट करता हूं तो सबसे पहले मैं आईडी को अपडेट करता हूं ताकि कुछ और सार्थक हो सके।
इसलिए मैं इस टीवी बेस लेबल को कॉल करूंगा और फिर टेक्स्ट को बेस होने के लिए अपडेट करूंगा।
और आप यहां जो देखेंगे वह यह है कि Android Studio शिकायत कर रहा है कि इस TextView में बाधाएं नहीं हैं।
इसलिए इसने केवल समय स्थितियों को डिज़ाइन किया है, यह स्थिति 00 पर कूद जाएगा, जो कि रनटाइम पर स्क्रीन के ऊपर बाईं ओर होता है जब तक कि हम बाधाओं को नहीं जोड़ते।
और यह बाधा लेआउट का पूरा बिंदु है, हमें प्रत्येक घटक को लंबवत और क्षैतिज रूप से सीमित करना होगा।
तो लंबवत, हम जो करेंगे वह टीवी आधारित लेबल के इस शीर्ष एंकर बिंदु को खींचें और इसे स्क्रीन के शीर्ष पर खींचें।
और फिर विशेषताएँ टैब में, हम यह निर्दिष्ट करेंगे कि हम इसे स्क्रीन के शीर्ष से कितनी दूर चाहते हैं, और मैं शीर्ष पर 48 कहने जा रहा हूँ।
इसी तरह, हम एक लेफ्ट मार्जिन निर्दिष्ट करना चाहते हैं, इसलिए हम लेफ्ट एंकर पॉइंट को ड्रैग करेंगे और इसे पैरेंट तक ड्रैग करेंगे और इसे स्क्रीन के लेफ्ट एंड से 32 dP की दूरी पर निर्दिष्ट करेंगे।
तो अब आप देख सकते हैं कि त्रुटि दूर हो गई है, हम वही प्रक्रिया अब स्क्रीन के बाईं ओर अन्य तीन पाठों के उपयोग के लिए करने जा रहे हैं।
बेस लेबल के ठीक नीचे वाले से शुरू करना एक टीवी टिप प्रतिशत लेबल है।
यहां टेक्स्ट को 24% लिखें।
नीचे दिया गया टेक्स्ट व्यू टीवी टिप लेबल होगा।
टेक्स्ट टिप होगा।
और फिर अंत में हमारे पास टीवी का कुल लेबल होगा।
और यहां टेक्स्ट कुल होगा।
तो हमारे पास एक ही मुद्दा है जहां हमें इन सभी को क्षैतिज और लंबवत, लंबवत रूप से बाधित करना है, हम जो करेंगे वह प्रत्येक टेक्स्ट व्यू के लिए शीर्ष एंकर पॉइंट लेगा और इसे इसके ऊपर के घटक पर खींचें।
और हम 32 dP का मार्जिन निर्दिष्ट करेंगे जिसका अर्थ है कि प्रत्येक पाठ आपको 32 dP पर 32 dP पर रहना चाहिए, जो आपके ऊपर के पाठ के नीचे है, जो शीर्ष एंकर बिंदु को खींचेगा और इसे ऊपर के पाठ के निचले एंकर बिंदु तक खींचेगा। ।
और फिर से, वही काम करें 32 dP इनमें से प्रत्येक दृश्य को लंबवत रूप से बाधित करता है।
अब क्षैतिज रूप से कैसे, यदि हम वांछित अंत स्थिति में वापस जाते हैं, तो आप जो देखेंगे वह यह है कि यदि हम यहां एक लंबवत रेखा खींचते हैं, तो बाईं ओर के सभी घटक, वे सभी उस के दाहिने छोर से गठबंधन हो जाएंगे इस टीवी बेस टेबल पर आपको टेक्स्ट भेजें।
इस तरह हम उन्हें क्षैतिज रूप से सीमित करना चाहते हैं।
और हम वास्तव में इसे डिज़ाइन टैब में कर सकते हैं, आप कह सकते हैं संरेखित करें और फिर दाएं किनारों को संरेखित करें।
लेकिन मैं आपको कोड टैब में यह दिखाना चाहता हूं कि यह कैसे करना है।
इसलिए यदि मैं कोड टैब खोलता हूं, जैसा कि हमने बात की, तो डिज़ाइन टैब में आपके द्वारा किए गए प्रत्येक परिवर्तन का कोड टैब में एक समान परिवर्तन होता है।
तो अभी हमारे पास चार बनावट हैं और ठीक यही हम यहां देख सकते हैं हमारे पास 1234 हैं, जैसा कि हमने बात की थी, अभी इसमें एक त्रुटि है कि हम इन्हें क्षैतिज रूप से सीमित नहीं कर रहे हैं।
इसलिए हमारे पास यह लाल रेखांकन है।
लंबवत बाधा वह है जिसे आप यहां देख सकते हैं।
तो हम इस लाइन के साथ जो संचार कर रहे हैं वह टीवी टिप के शीर्ष पर है प्रतिशत लेबल टीवी बेसिक के नीचे के बराबर होना चाहिए, इसके ऊपर एक टेक्स्ट व्यू क्या है, साथ ही 32 डीपी के मार्जिन के साथ जिसका मतलब है कि आप इसे चाहते हैं इसके ऊपर के घटक से 32 पिक्सेल नीचे होना चाहिए।
तो इसी तरह, हम यह निर्दिष्ट करना चाहते हैं कि इस घटक का अंत, टीवी टिप प्रतिशत लेबल टीवी आधारित लेबल के अंत के बराबर होना चाहिए।
और हम चाहते हैं कि यह बाईं ओर के प्रत्येक घटक पर लागू हो, तो इसके साथ, आप देख सकते हैं कि यह त्रुटि कैसे दूर हुई।
और अगर हम डिज़ाइन टैब पर वापस जाते हैं, तो आप देख सकते हैं कि अब सब कुछ कैसे संरेखित है।
एक और बात जो मैं यहां बताना चाहता हूं, वह यह है कि टूल नेमस्पेस का उपयोग केवल डिज़ाइन पूर्वावलोकन को प्रस्तुत करने के उद्देश्य से किया जाता है।
चूंकि हमने अब इनमें से प्रत्येक दृश्य को क्षैतिज और लंबवत रूप से पूरी तरह से सीमित कर दिया है, हमें वास्तव में अब इसकी आवश्यकता नहीं है।
इसलिए मैं इनमें से प्रत्येक का चयन करने जा रहा हूं और इसे हटा दूंगा।
और एक और बात यह है कि मैं एक सुसंगत शैली और विभिन्न विशेषता नामों के क्रम में बहुत बड़ा हूं।
तो उदाहरण के लिए, यहां हमारे पास एक ही लाइन या नई लाइन पर एंडिंग एंगल ब्रैकेट है।
और हमारे लिए इसे स्वचालित रूप से ठीक करने के लिए, मैं डबल शिफ्ट पर टैप कर सकता हूं, और फिर बस पुनः प्रारूप की खोज कर सकता हूं।
और कोड को पुन:स्वरूपित करने के लिए एक शॉर्टकट है।
अगर मैं ऐसा करता हूं, तो आप देख सकते हैं कि कैसे एंड्रॉइड स्टूडियो ने पूरी फाइल में इसे ठीक करने में हमारी मदद की, जो मुझे बहुत पसंद है।
ठीक है, तो चलिए वापस डिज़ाइन टैब पर चलते हैं।
और इससे पहले कि हम स्क्रीन के दायीं ओर के घटक पर जाएं, एक चीज जो मैं करना चाहता हूं, बस कुछ त्वरित डिजाइन बदलाव करना चाहता हूं।
सबसे पहले, मैं यहां टेक्स्ट को थोड़ा बड़ा करना चाहता हूं।
इसलिए मैं टेक्स्ट को माध्यम बनाने जा रहा हूं, आप देख सकते हैं कि इसने इसे कैसे बड़ा बना दिया।
और फिर यह टीवी टिप वर्तमान लेबल थोड़ा अनूठा है, क्योंकि यह उस मूल्य का प्रतिनिधित्व करता है जिसे उपयोगकर्ता ने वास्तव में चुना है।
तो यह इंगित करने के लिए कि यह दूसरों से थोड़ा अलग है, मैं यहां टेक्स्ट को बोल्ड करने जा रहा हूं।
बढ़िया, मुझे वह पसंद है।
आइए अब स्क्रीन के दाहिने छोर पर चार घटकों के बारे में सोचते हैं।
यह टेक्स्ट संपादित करने वाला है, जिसके नीचे हमारे पास सीकबार है।
और फिर उसके नीचे हमारे पास दो टेक्स्ट व्यू हैं।
तो चलिए एक एडिट टेक्स्ट को ड्रैग करते हैं।
और जिसे हम खींचेंगे वह वह है जो दशमलव की संख्या बताता है।
और इन सभी विभिन्न संपादन टेक्स्ट के बीच का अंतर वास्तव में काफी सरल है।
यह केवल इनपुट प्रकार है।
क्योंकि हम मुद्रा के साथ काम कर रहे हैं, हम अपने में संख्याएं और दशमलव चाहते हैं।
इसके नीचे, हमारे पास एक सीक बार होगा।
और फिर उसके नीचे, हम टेक्स्ट व्यू पर ड्रैग आउट करने जा रहे हैं।
ठीक है, आइए कुछ और समझदार होने के लिए आईडीएस को यहां अपडेट करें।
तो इसे आधार राशि पर बुलाया जाएगा।
आगे हमारे पास सीकबार टिप है।
फिर हमारे पास टीवी टिप राशि है।
और फिर अंत में हमारे पास टीवी की कुल राशि है।
आइए यहां टेक्स्ट को 103 डॉट 11 पर अपडेट करें।
और यह एक, मुझे लगता है कि हमने 1996 कहा था।
आइए इन तत्वों को रखने से पहले कुछ डिज़ाइन में बदलाव करें।
तो ये नीचे की बनावट, ये पूरे ऐप का सबसे महत्वपूर्ण हिस्सा हैं।
इसलिए मैं टेक्स्ट को बड़ा करने जा रहा हूँ।
सीकबार, मैं इसे थोड़ा चौड़ा करने के लिए 200 dP की हार्ड कोडित चौड़ाई निर्दिष्ट करने जा रहा हूँ।
और फिर यहाँ एक विशेषता भी है जिसे मैक्स कहा जाता है, जो कि सीकबार द्वारा धारण की जाने वाली अधिकतम राशि है।
और वह 30 होगा।
क्योंकि हम केवल 30% तक की अनुमति देते हैं।
संपादन पाठ के लिए, मैं EMAS को आठ पर सेट करने जा रहा हूँ, जिसका अर्थ है कि कितने वर्ण चौड़े होंगे, यह संपादन पाठ कितने वर्ण चौड़ा होगा और आठ हमारे लिए पर्याप्त है, मैं पाठ का आकार बढ़ाने जा रहा हूँ 24 एसपी.
और फिर अंत में, मैं यहां एक संकेत या प्लेसहोल्डर जोड़ने जा रहा हूं, जो उपयोगकर्ता को बिल राशि है, यह जानता है कि यह संपादन टेक्स्ट किस लिए है।
आइए अब विचार करें कि इन्हें कैसे स्थापित किया जाए।
तो लंबवत, नीचे के दो टेक्स्ट, आपको लंबवत रूप से संरेखित किया जाना चाहिए, इसलिए मैं उन दोनों का चयन करने जा रहा हूं और फिर लंबवत केंद्रों को संरेखित कर रहा हूं।
और इसी तरह ऊपर वालों के लिए।
और फिर इसी तरह टिप प्रतिशत और सीकबार के लिए।
और आप देख सकते हैं कि कैसे डिज़ाइन टैब में, हम वास्तव में जोड़े गए बाधाओं का यह अच्छा पूर्वावलोकन देखने में सक्षम हैं।
बिल राशि के लिए।
आइए इस बारे में सोचें कि इसे क्षैतिज रूप से कैसे सीमित किया जाए, यह आपके द्वारा बाईं ओर संबंधित पाठ से 32 dP दूर होगा।
और क्षैतिज रूप से, दाईं ओर के अन्य सभी घटक, इन निचले तीन को बिल राशि संपादन टेक्स्ट के बाएं छोर से संरेखित किया जाना चाहिए, उन सभी का चयन करना होगा, और मैं यह निर्दिष्ट करने जा रहा हूं कि बाएं किनारों को सभी संरेखित किया जाना चाहिए।
यह अच्छा लग रहा है।
अब हमें केवल इतना करना है कि अगर हम यहां पर होवर करते हैं, तो हम संपादन टेक्स्ट पर एक लंबवत बाधा खो रहे हैं।
तो ऐसा करने के लिए, मैं कोड टैब में जा रहा हूँ।
आधार राशि पर संपादित टेक्स्ट यहां दिया गया है।
और जिस तरह से हम वर्टिकल पोजिशनिंग का संचार करेंगे, वह इस तत्व के शीर्ष को ऊपर बाईं ओर देखने के लिए है जो कि एक टीवी बेस टेबल है और इसी तरह इस व्यू के नीचे भी टीवी बेस टेबल के नीचे होना चाहिए।
तो यह लंबवत रूप से ठीक बीच में होगा।
इसलिए यदि आप डिज़ाइन टैब पर वापस जाते हैं, तो आप देख सकते हैं कि अब त्रुटियां दूर हो गई हैं।
और आप देख सकते हैं कि ये बाधाएं कैसी दिखती हैं।
यदि आप फिर से डिज़ाइन टैब पर जाते हैं, तो हमें इस टूल नेमस्पेस की अब और आवश्यकता नहीं है, क्योंकि हम सब कुछ पूरी तरह से सीमित कर रहे हैं।
आइए कोड को वास्तव में तेजी से पुन:स्वरूपित करें।
और फिर एक और चीज जो मैं करना चाहता हूं, वह है, भले ही इसकी आवश्यकता नहीं है, कार्यक्रम चलाने के प्रयोजनों के लिए, केवल डेवलपर जानकारी के लिए, मैं इन्हें एक टिप्पणी के साथ लेबल करना चाहता हूं।
ये बाईं ओर के दृश्य हैं।
और फिर टेक्स्ट व्यू के बाद, एडिट टेक्स्ट से शुरू होकर, ये दाईं ओर के दृश्य हैं।
यह देखना सही है कि यह कैसा दिखता है।
ठीक है, बहुत बढ़िया।
जैसा कि हम उम्मीद करते हैं कि यह बिल्कुल वैसा ही है जैसा हम डिज़ाइन पूर्वावलोकन में देखते हैं।
केवल एक चीज जिसे मैं यहां ठीक करना या सुधारना चाहता हूं वह यह है कि यह थोड़ा अजीब है कि हमारे पास टिप और कुल राशि के लिए पहले से ही मूल्य हैं, भले ही उपयोगकर्ता ने वास्तव में कुछ भी दर्ज नहीं किया है।
और ठीक यही टूल नेमस्पेस का उद्देश्य है जिसके बारे में हमने पहले बात की थी।
तो मैं क्या करूँगा संबंधित पाठ दृश्य का चयन करें।
और यहाँ टेक्स्ट होने के बजाय, मैं नीचे स्क्रॉल करने जा रहा हूँ।
मैं इसे रैंच टेक्स्ट क्षेत्र में स्थानांतरित करने जा रहा हूं।
और वह है टूल्स नेमस्पेस।
इसलिए मैं इन्हें टूल टेक्स्ट में स्थानांतरित करने जा रहा हूं।
और फिर अंत में, यहाँ पर वही बात।
बस आपको यह दिखाने के लिए कि उसने क्या किया, अगर हम कोड टैब पर वापस जाते हैं, यदि आप टीवी टिप प्रतिशत लेबल को देखते हैं, तो Android टेक्स्ट विशेषता होने के बजाय अब टूल टेक्स्ट विशेषता है।
अगर हम ऐप को आखिरी बार चलाते हैं, तो आइए देखें कि इसका शुरुआती लेआउट पर क्या प्रभाव पड़ता है।
बहुत बढ़िया, यह बहुत अच्छा लग रहा है।
उम्मीद है कि इस वीडियो ने आपको बाधा लेआउट की शक्ति का अच्छा ज्ञान दिया है।
हमने जो किया है उसे प्रदर्शित करने के लिए एक चीज मैं आपको दिखा सकता हूं कि स्क्रीन पर इन आठ दृश्यों के साथ, वे सभी एक माता-पिता के बजाय स्थित हैं।
और अगर मैं उस ऊपरी बाएँ टेक्स्ट व्यू को बाहर खींचता हूँ, तो सब कुछ उसी के अनुसार चलता है, जो एक दूसरे के लिए सभी विचारों को अपेक्षाकृत सीमित करने का एक बहुत अच्छा तरीका है।
तो अगले वीडियो में काम वास्तव में मुख्य गतिविधि में व्यावसायिक तर्क को जोड़ना है, इसलिए हम इनपुट पर प्रतिक्रिया कर सकते हैं और कुल मिलाकर टिप की गणना कर सकते हैं।
मिलते हैं अगले वीडियो में।
पिछले वीडियो में, हमने अपने टिप कैलकुलेटर एप्लिकेशन के लिए स्क्रीन पर आठ दृश्य रखे थे।
इस वीडियो में, हम वास्तव में हमारे ऐप को इंटरैक्टिव बनाने के लिए व्यावसायिक तर्क जोड़ना चाहते हैं, हम ऐसा करने में सक्षम होना चाहते हैं जब उपयोगकर्ता सीट बार पर स्क्रब करता है, हम टिप प्रतिशत लेबल को अपडेट करना चाहते हैं।
और जब वे एक आधार राशि दर्ज करते हैं, तो हम उस मूल्य को लेना चाहते हैं और फिर कुल राशि में टिप की गणना करना चाहते हैं।
विशेष रूप से, आप देखेंगे कि कोई सबमिट बटन नहीं है।
इसलिए जैसे ही उपयोगकर्ता आधार राशि या टिप प्रतिशत बदलता है, हम कुछ भी बदलने पर टिप और कुल राशि की गतिशील रूप से गणना करना चाहते हैं।
तो पहले अभ्यास के रूप में, मैं जो करने में सक्षम होना चाहता हूं वह यह है कि जैसे ही उपयोगकर्ता सीकबार पर मान बदलता है, मैं प्रतिशत लेबल को अपडेट करने में सक्षम होना चाहता हूं।
इसलिए पहली चीज करने के लिए हम स्क्रीन में उन दृश्यों का संदर्भ प्राप्त करेंगे जिन्हें हमें वास्तव में डेटा पढ़ने या संशोधित करने में सक्षम होना चाहिए।
और वास्तव में स्क्रीन पर पांच अलग-अलग विजेट हैं जिन्हें हम टिप प्रतिशत लेबल और फिर स्क्रीन के दाईं ओर के सभी घटकों के बारे में परवाह करते हैं।
तो हमारे स्टूडियो में, जिस तरह से हम यह करेंगे, वह प्रत्येक घटक के लिए यहाँ चरों का एक समूह घोषित करता है।
तो उदाहरण के लिए, हमारे पास संपादन टेक्स्ट है, जो मूल राशि पर होगा।
और इसका प्रकार एक प्रकार का संपादन टेक्स्ट होगा।
लेकिन यहां वाक्य रचना के बारे में ज्यादा चिंता न करें।
यदि यह भ्रमित करने वाला है, तो हम केवल एक निजी चर कह रहे हैं।
यह एक देर से आरंभीकरण है क्योंकि हम इसे ऑनक्रिएट विधि के अंदर प्रारंभ करने जा रहे हैं, न कि कंस्ट्रक्टर में, यही कारण है कि यह देर से आरंभीकरण एक चर है और हम इसे आधार पर कॉल कर रहे हैं सम्मेलन का पालन करें जिसका मैं नाम का पालन करता हूं वेरिएबल बिल्कुल आईडी के नाम के बराबर है।
तो अब ऑनक्रिएट में।
सेट सामग्री दृश्य के बाद, हम आधार माउंट पर आईडी और आधार राशि के आधार पर देखने के लिए कहने जा रहे हैं।
और हम इसे अब स्क्रीन पर अन्य चार घटकों के लिए दोहराने जा रहे हैं।
तो हमारे पास एक सीकबार टिप है।
और वह प्रकार यहाँ है सीकबार।
और फिर हमारे पास टीवी टिप प्रतिशत है।
यह आपके लिए पाठ संदेश होगा।
और फिर हमारे पास हमारे लिए दो और टेक्स्ट हैं।
एक है टीवी टिप राशि, और दूसरी है टीवी की कुल राशि.
अब मैं ऑनक्रिएट के अंदर इन सभी के संदर्भों को निकालूंगा और अंत में हमारे पास कुल राशि होगी।
तो अपने उद्देश्य पर वापस जा रहे हैं, पहली चीज जो आप करना चाहते हैं वह यह है कि जब उपयोगकर्ता सीट बार पर स्क्रब करता है, तो हम उस उपयोगकर्ता इनपुट के परिवर्तनों के बारे में अधिसूचित होना चाहते हैं, और फिर टीवी टिप प्रतिशत लेबल को यह इंगित करने के लिए अपडेट करना चाहते हैं।
तो वास्तव में, मैं यहां चर के नाम को अपडेट करता हूं, निरंतरता के लिए केवल टीवी 2% लेबल होना चाहिए।
और जिस तरह से हमें सीट बार में बदलाव के बारे में सूचित किया जाता है, उस पर एक श्रोता जोड़कर, यह कहेगा कि सीक बार चेंज श्रोता पर बार टिप डॉट सेट है।
और अब हमें एंटरटेनर को यह बताना होगा कि सीट बार बदलने पर क्या होना चाहिए।
और यहाँ वाक्य-विन्यास हम कहने जा रहे हैं ऑब्जेक्ट, सीक बार.ऑन, सीकबार, चेंज श्रोता।
और फिर हम इस वर्ग को यहाँ परिभाषित करने जा रहे हैं।
और एंटर आज ही हमें इसे लागू करने में मदद करेगा, उस लाल बत्ती बल्ब पर टैप करने और कार्यान्वयन सदस्यों पर टैप करने के लिए आपके पास यह लाल रेखांकन वस्तु के नीचे होगा।
सीकबार, चेंज श्रोता पर इसकी परिभाषा का अनुपालन करने के लिए हमें तीन तरीकों को ओवरराइड करना होगा।
और एनआरसी इसमें हमारी मदद करेगा।
और ज्यादा चिंता न करें।
फिर से, वाक्य रचना भ्रामक है।
यहां विवरण यह है कि हम एक अनाम वर्ग को परिभाषित कर रहे हैं जो इस इंटरफ़ेस को लागू करता है।
तो अगर मैं यहां परिभाषा पर जाता हूं, तो आप देख सकते हैं कि यह एक सार्वजनिक इंटरफ़ेस है, जिसमें वे तीन विधियां हैं जिन्हें हमने ओवरराइड किया है।
और अब यह हमारा काम है कि हम सिस्टम को बताएं कि इन तरीकों में से प्रत्येक को कॉल करने पर क्या होना चाहिए।
और वास्तव में, हम वास्तव में स्टार्ट ट्रैकिंग टच या स्टॉप ट्रैकिंग टच की परवाह नहीं करते हैं।
इसलिए मैं यहां दो बकाया राशि निकालने जा रहा हूं, और इसे खाली कार्यान्वयन छोड़ दें।
यूआई को अपडेट करने से पहले, आइए पहले एंड्रॉइड में लॉग स्टेटमेंट जोड़ें ताकि यह पता चल सके कि क्या हो रहा है।
तो मैं सही तरीके से i पर लॉग इन करूँगा और यह एक ऐसी विधि है जो दो मापदंडों में लेती है।
पहला एक स्ट्रिंग है, जिसे मैं कील कहूंगा, मैं बाद में परिभाषित करूंगा।
और दूसरा भी एक स्ट्रिंग है, जो एक संदेश या लॉग स्टेटमेंट है।
और मैं कहूंगा कि प्रगति बदल गई है, जो कि प्रगति के साथ-साथ एक विधि का नाम है, जो कि सीकबार का वर्तमान मूल्य है।
तो चलिए इस टैग को परिभाषित करते हैं, मैं कक्षा के शीर्ष पर जा रहा हूँ और एक निजी कॉन्स्टेबल वैल टैग को परिभाषित करूँगा।
और यहां परंपरा यह है कि जब भी आपके पास किसी भी प्रकार की लॉगिंग होती है, तो टैग आमतौर पर वर्ग का नाम होता है।
ठीक है, इसे आजमाते हैं।
तो यहां विचार यह है कि हर बार सीट बार पर प्रगति बदल गई है, जिसका अर्थ है कि उपयोगकर्ता स्क्रबिंग कर रहा है, हम लॉगकैट में दिखाए गए वर्तमान मूल्य को प्रिंट करेंगे, जहां लॉग इसे आउटपुट करते हैं।
तो लॉगकैट खोलें।
एमुलेटर खोलें।
और जिन लॉग्स की हम परवाह करते हैं, वे केवल हमारे एप्लिकेशन से हैं, जो शांत, शांत है, आरके पांडे टिप्पी और हम केवल सूचना स्तर के लॉग की भी परवाह करते हैं क्योंकि यही log.io सूचना स्तर लॉग का प्रतिनिधित्व करता है।
हम केवल उन लॉग्स की भी परवाह करते हैं, जिनमें यह विशेष टैग होता है, जो कि मुख्य गतिविधि है।
तो चलिए मुख्य गतिविधि को फ़िल्टर के रूप में जोड़ते हैं।
और यहां जैसे ही हम सीट बार बदलते हैं, आप देख सकते हैं कि हमें लॉगकैट आउटपुट की एक लाइन कैसे मिलती है, और यह ठीक वही दर्शाता है जो सीट बार दिखा रहा है।
इसलिए अगर हम अधिकतम तक जाते हैं, तो हम उम्मीद के मुताबिक 30 देखते हैं, और अगर हम वापस नीचे आते हैं, तो हम शून्य पर जाते हैं।
तो चलिए अब UI को अपडेट करते हैं।
और विशेष रूप से, हम सीकबार की वर्तमान प्रगति को इंगित करने के लिए टीवी टिप प्रतिशत लेबल को अपडेट करना चाहते हैं।
तो हम कहेंगे टीवी 2%, उस की टेक्स्ट विशेषता को लेबल करें, हम उसे प्रगति के बराबर सेट करेंगे।
लेकिन वास्तव में, हम चाहते हैं कि प्रगति को एक स्ट्रिंग के रूप में दर्शाया जाए, न कि एक इंट के रूप में।
और साथ ही हम इसके बाद एक प्रतिशत चिह्न को जोड़ना चाहते हैं।
तो हम कहेंगे डॉलर साइन प्रोग्रेस, इस तरह हम कोटलिन में स्ट्रिंग इंटरपोलेशन करते हैं।
ठीक वैसा ही जैसा हमने एक लॉग स्टेटमेंट में किया था, और फिर अंत में एक प्रतिशत चिह्न जोड़ें।
आइए इसे आजमाएं।
इसलिए जब हम सीकबार पर स्क्रब करते हैं, तो आप देख सकते हैं कि कैसे सीकबार की वर्तमान प्रगति के साथ लॉकस्टेप में टीवी टिप प्रतिशत लेबल अपडेट हो जाता है, जो कि बहुत अच्छा है।
हालांकि, यहां एक सुधार यह है कि शुरू में, हम लेबल में किसी टिप प्रतिशत का संकेत नहीं दे रहे हैं।
और इसलिए इसे ठीक करने के लिए, आइए एक और स्थिरांक को परिभाषित करें, जिसे हम प्रारंभिक टिप प्रेजेंट कहेंगे।
तो हमारे पास एक निजी const Val प्रारंभिक टिप मौजूद होगी, और हम इसे 15 के बराबर सेट करेंगे।
So initially, the default tip is going to be 15%.
So with that diviner the constant before we do anything in the listener, great in the onCreate method, will they seek bar tip dot progress is equal to initial tip percent.
And we also want to update the label appropriately.
So we'll say TV tip percent label dot text is equal to initial tip percent, with the percent sign after.
Now when we run the app, we should see instead of the blank 2% label, we should see 15% like we do and the progress bar indicator is exactly in the middle of the width of the whole seat bar.
Next, similar to how we are able to react to changes in the seat bar, we also want to be able to react to changes In the edit text, so there's a analogous method on the ET base mount we'll call add text change listener.
And the syntax is similar, we pass in an object here, which is an anonymous class is an implementation of the text watcher.
And we'll have Enter to help us once again, there are some methods that we have to override.
So I'm going to tap on that red light bulb and implement the members three, override all them.
And then similar to before, the only thing that we care about is after text change, I'm going to go ahead and delete the body of implementation here.
Just to get a better understanding of what's happening here.
Again, let's add a log statement after text changed.
dollar sign ups.
Alright, let's try it.
So dollar sign s is the parameter passed in.
And that is actually what the user is typing at that moment.
Run this, let's open up logcat once again.
Alright, so like before, if I modify the seek bar, you can see that it is changing appropriately.
And then if I add the value into the edit text, you can see 800 it is being updated appropriately in log.
Two quick notes.
First, I sometimes see students will get tripped up when they invoke functions in kotlin.
The MSG that you're seeing when we call log into it is a hint from energy about what that parameter represents.
So if you actually type MSG, that will lead to a compile error.
So let's make sure you don't do this.
Second, I want to demystify what the object keyword means.
So the object expressions like we're using twice so far, are examples of how to create anonymous classes, which are one time use classes that are commonly used to implement interfaces.
So we have both text watcher and on seekbar change listener as interfaces defined by the Android system.
And these methods that we're overriding will automatically be invoked for us when the user takes the appropriate action on the underlying edit text or seekbar.
So now we have all the ingredients in place to actually make this app functional.
Whenever the Edit Text changes, I'm going to call a method called compute, tip, and total.
And this is actually what will take the values from the edit text and seekbar and then update the tip and total amount appropriately.
So this method doesn't exist yet.
But again, let's leverage the utility of Android Studio and have to create this function for us inside of main activity.
And there are a couple things that have to happen in this method.
First, we want to get the value of the basic tip present.
Second, we'd like to compute the tip in total.
And third, we need to update the UI to show those values.
So to get the value of the basic tip, that's pretty straightforward, we just look at the edit text at base amount, grab the text, and then call to string on it.
And then on a string, we know it's going to be a currency like a decimal, so we'll call to double on it, in order to turn it into a number that we can work with.
And we'll call this base amount.
And then similarly, for the 2%, we want to get the value of the progress on the seat bar, this attribute called progress, and that'll be saved in a variable that I'm going to call tip percent.
Quite Next, we want to compute the tip and total amount.
So the tip amount is going to be the base amount, times the tip percent divided by 100.
So for example, if the base amount is $100, I went for $100 meal, and the tip percent is 20, then I expect the tip amount to be $20.
So that'd be 20 divided by 100 is 20% times 100.
And that gives me $20.
So that'll be tip amount.
And then we have the total amount, and the total amount is simply going to be the base amount, plus the tip amount.
Okay, finally, we need to update the UI.
And again, this turns out to be pretty straightforward, because we have a reference to the two text views which show the tip and total amount, which is TV tip amount, and we're going to set the text attribute there to be tip amount.
And this is going to throw an error because tip amount is a number it's a double right, but we actually require something called a car sequence.
And to give it a car sequence, we can just call to string on this.
And then similarly, we call we need to say TV total amount is that the text attribute here to be the total amount to string.
And this should be a plus sign.
Wait, this is the whole brain of our application.
So if we run this, then what we're doing is anytime that the edit text value has changed, we're going to call this method and we should be updating the UI To have the correct amount for the tip and total amount, right, so we have 15%.
For the tip, if I add in $100 here, then you do see immediately we get the correct tip and total computation.
And we would like to have the same logic get executed if I change the seat bar, the 2%.
And that turns out to be really easy, because we've abstracted all the logic away into this method.
So I'm going to call compute tip and total, right here in on progress changed.
Alright, so if you try this now, we should have a pretty functional app.
So similar to before, if I put in 100.
Here, we do correctly compute 115.
And if I change the percent, you can see it does appropriately updated.
Alright, so this is working actually pretty well.
But there are two things that I think are incorrect or could be improved.
But just take a moment right now think about what are two improvements that you could do to the app that we have right now try playing around with it, see if you can identify any issues.
Okay, so the first improvement that we can make is actually a bug.
So notice what will happen now if I Backspace on the base amount, so that there's nothing there, so you can see the app actually crashed.
So if we look at logcat, let's take a look at what actually was the error.
So I'm going to scroll up to the very top of the stack trace.
And you can see here we have a number format exception.
This is the important part, there's an empty string.
And and the stack trace tells us exactly where the issue happened is a main activity line 58.
And so the issue that's happening is that when the edit text has an empty value, then it doesn't make sense to try and convert an empty string into a double.
The very first thing we shouldn't be doing here is actually checking if at base amount done dot txt, if that is empty, then we need to do an earlier turn.
Additionally, we should be clearing out the values of the TV tip and total amount.
Because if the edit text is empty, that means there's nothing to tap on.
And we should be showing nothing for those two textures, then we call return, so that none of the rest of the function will get executed.
The second improvement we'll make is about formatting the output of the tip and total amount.
So it's not that noticeable when we enter in 100 for the base amount.
But if we add in 100.9, then you can see the total amount becomes very long and unwieldy.
Because we're dealing with currency, we should really be mandating that there are exactly two decimal points in both a tip and total amount.
And the way we'll do that is right here, instead of just calling to string, we want to format the string before we put it into the TextView.
So the way we do that is by using this format method.
So we define the format like this percent.to F, which means we only want two numbers after after the decimal point dot format.
And we pass in the tip amount.
And then similarly for the total amount, a percent dot two f format.
Let's try it.
For hopefully now, in this scenario, we should actually end up with 116.04 instead of this very long decimal that had happened 100 right away, you can see instead of only having one decimal point now we have two.
And the true test is when I type in 100.9.
Now, the display of this is way better, we have 116.04 rather than that huge decimal which becomes unreadable.
So at this point, we have a very functional app, what we've done is gotten references to the relevant views on layout, and then added listeners to the seekbar into the Edit Text because there's no Submit button.
Anytime there's any change in the seekbar or the edit text, we are dynamically computing the tip and total amount and updating the views appropriately in this compute tip a total amount.
So in the next video, what I want to show you is some style improvements along with a way to personalize it and add a really cool animation.
So I'll see you in the next one.
At this point, we're done with the implementation of our tip calculator.
In this video, our goal is to add some color animation and personalization into the app.
So we'll start off with the footer at the bottom.
A lot of apps or websites have this where it says you know made with love in California or made with love by this person.
So we're gonna start off by adding a text at the bottom of the screen.
So let's go into enter studio, open up the activity main dot XML and scroll down to the bottom and we're going to drag out one TextView here.
Let's give it an ID of TV footer.
And then the text will be made with love by raw and of course you can personalize however you want to constrain it.
We're going to have this horizontally be in the center of the screen.
So we're gonna add a left and right Straight to make it centered, and then we're gonna make it 32 dP from the bottom of the screen.
I also want to add a couple different style tweaks here.
First is all caps, I want to make everything here capitalized.
And I want to change the font to be sans serif, condensed, slight.
And then finally, I want to make this a little bit larger text, appearance, medium weight.
And finally, I want to change the love word with the emoji.
And you can either add this to your keyboard, or another way to do this is if you Google for heart emoji, then the first result that comes up, gives me an option here to copy and paste the emoji.
paste that in.
And it looks a little bit weird in the preview, but it does show up properly when you render it in the design.
And if we check it out in the app.
Awesome, that looks pretty good.
The next thing I like to do is a bit the color scheme.
So we move away from these default status bar color color primary in this background white.
So let me explain where these colors are coming from.
There's one very important file that must exist in every single Android app.
And that's called the Android manifest file.
So if we open that up, then this file describes all the different components of your application, the permissions, for example, if your app needs internet permission, and much more.
And the important line for us is right here on line 11, where we're describing the theme of our application, and this is a file that automatically gets created for us when we create the empty project.
So I'm going to jump to the definition here.
And you'll see you have two different files here, one for normal theme and one for the night theme.
And the one that we're currently looking at is normal, I'm gonna open that up.
And this is where we're getting the colors for the default application that we have.
So in order to update the colors, we're going to have to define new colors and then replace them here, we can take a look at where this file lives by hitting this option, select Open File, and we can see that it lives inside of resources, values, and themes directory.
And the colors are also defined inside of colors XML in the values directory.
And each of the colors is defined as a hexadecimal value, purple, 500, and so on.
So our job is let's figure out what colors we want, and then add them here.
And then we'll reference them inside of the themes XML file.
So in order to figure out what colors you want, there's a couple different options, I'll show you what I typically do if you go to color.adobe.com.
There's this really nice tool where you figure out what kind of color scheme you want.
So there's a couple different options here, you can pick the color harmony rule, analogous monochrome chromatic triad, and so on.
Once you're happy with something, then you can scroll down and grab the hexadecimal values here.
So I did this exercise already.
And here are the colors I came up with, I'm going to have one which is called primary blue, darker blue and background blue.
So let's go ahead into the colors XML and define these for the first one is going to be called primary blue now has this value.
The next one is background blue, or the next one's a darker blue.
And then finally, we have background blue.
So now in themes XML, I updated the color primary to be primary blue.
And then I updated the primary variant to be darker blue, and that's gonna be the color of the status bar.
And then finally, in order to have a background color on the whole app, I'm going to add one more attribute here, which is called background color, Android color background.
And that is going to be the background blue that we have.
Let's try it.
Awesome, that looks great.
So we're getting very close now, to the desired end state, we have the footer, and we have the customized color.
The last thing I want to talk about is this animation on the tip description.
And here's actually what this looks like.
As the user is scrubbing, we will dynamically update the color of that word that's used to describe the current tip percentage, and it'll go from Red if it's a very bad tip to a really bright green if it's really good tip.
Not only that, but we're also going to be changing that word or that adjective used to describe the tip percentage.
So it gives the user some really nice interactive feedback about what kind of tip they're leaving.
Alright, so the first thing we'll do is just added text you need the seek bar and increase the vertical distance between these two texts.
So close out these other editor windows because we don't need to look at them again.
In activity main.
What we'll do is first increase the distance between the 24% which is the 2% label and the TV tip label.
Let's increase the margin here to be 56 Next, let's drag out one more text you.
And we'll call this TV tip description.
And then the text should be empty, because that will depend on the initial tip percent, which is set programmatically.
But to get a better sense of what this might look like, we are going to use a tools namespace and to say acceptable here.
That looks good.
And now we need to position this horizontally and vertically.
So vertically, it's going to be right below the seek bar tip bar, and we'll add a margin here of maybe eight dp.
And then we want these two to be horizontally aligned.
So horizontal centers, great.
And you can see how it added the left and right constraints.
So it'll be right in the middle.
And you can see the error also went away.
So now back in MainActivity, we need to get a reference to that TextView.
So let's say the ID here was TV tip description.
So when I say TV tip description, get a reference to it here.
And every time the C part is changed, that is where we have the potential now, to update the language on that text, you want to have one more method here called update tip description.
And let's have Enter to help us to create this because this method doesn't exist yet.
And one thing we'll do actually is as a parameter into the update tips, description method, I'd like to pass in the progress and progress.
And again, energy video can now help us to add this as a parameter into the function that we have defined.
The tap that red light bulb, and have Enter to help us to add the parameter and all I did here is added a parameter.
And instead of calling it progress, I'm going to call it tip percent.
And it's I've typed in.
So now the idea is that based on the value of tip percent, we'd like to be able to say TV tip description dot txt, and we'd like to be able to set it to be something like good.
And of course, this good will change based on the value.
And the construct in kotlin.
To be able to decide a value of something based on a set of conditionals is called when which is similar to a switch in Java.
So I'm going to save our tip description is equal to when and then depending on the value of 2% will take certain action.
So if tip description, if 10% is between zero and nine, then the string should be poor.
If it's between 10 and 14, we'll call it acceptable 15 and 19, it'll be good.
And when it's between 20 and 24.
It'll be great.
And there should be one extra period in here.
And finally, anything else meaning that the value is above 24 then we will say amazing.
And so now instead of using good here, we will say tip description.
And finally before we test this out one more thing I want to do is at the very beginning, when we are setting up our screen, which is you know in the onCreate method, as soon as we get all the references to each of the views, we also would like to call that method update tip description right here with the initial tip percent just so that language is always going to be in sync with what we start out with.
Let's try it.
So now hopefully we should see a text you right underneath the seekbar and the text on in that text you should change according to what we have selected through the seekbar.
Okay, this looks promising already because initially the 2% is 15, which means we fall into this branch of the wine statement and that means that the value should be good.
That's good.
And then if we bring it down to zero, we get poor and if we go all the way up, we should get amazing which we do.
One quick thing want to do is back in activity main.
I want to set the font weight of this to be bold.
The textile should be bold to make it stand out a little bit more.
Finally, the last thing I want to show is this interactive color animation where if the user picks a very good tip we show bright green and if the user picks a bad dip, then we show a red color indicating something went wrong.
Coming back into Android Studio in minute tivity kotlin update tip description is where we're going to add the logic for updating the color based on the tip percent.
The question is how do we dynamically compute a color based Based on an integer, the way we'll do this is through a concept called interpolation, which is actually a fancy word for something which is conceptually quite simple.
If I tell you I'm running 100 miles, and I'm 75% of the way done, then you would tell me that I'm roughly at the 75 mile mark.
And what you're doing in your head is linear interpolation, you're assuming I'm going at a constant speed starting at zero ending at 100.
Therefore, I'm at 75 miles, the same thing is exactly applying here.
Every color can be represented as integer.
So if I'm tipping 20%, then we're two thirds of the way between the very worst color and the very best color, which are two integers.
And all we need to do is some simple math in order to compute what exactly that color value is, for the tip description.
The first thing we'll do is define the color for the worst invest tip.
So open up colors, XML, and let's add in color words tip color, best tip and I picked a red and green color like we talked about, we're going to paste these values in for color worse and color best.
So we have these defined.
And now our job is simply to do some math at zero, we should show worst tip at 30, we should show the best tip and everything else is some value in between.
and this turns out to be so common that Android actually has something called a RGB evaluator to help with this, where we represent colors as integer values.
A stands for alpha, RGB is red, green, blue, and it will help compute the color for us.
So coming back into main activity, we're going to define a color.
And that will be coming from argb evaluator dot evaluate.
And then this takes in three parameters.
One is the fraction of where are we on this progress bar between zero and 32nd is a start value, which is the very worst color and the end value is the best color.
So the fraction is simply going to be the tip percent, which is the perimeter pass 10 divided by the maximum amount of tip which is 30.
And that's going to be seapark tip dot max.
Next, we need to get the very worst color.
And the way we'll do that is context compat dot get color pass in this which is referring to the context and then the actual color that we just defined in the colors XML, which is color first.
And then finally, we're going to provide the best color here.
One issue you'll notice is that there's a type mismatch, we require a float, but we found integer.
So by default, because both the numerator and denominator are integers, we're gonna do some sort of truncation, which we don't want.
So the way to handle this is to cast one of the numerator or denominator to a float value.
And that will resolve that.
So now we have this color, all we need to do is set the color on the tip description text, set text color, with the color.
And finally before before we try this, we need to cast the result of the evaluate function call to be an integer, because we know the values we're computing between are integers, so the color should be an int.
And now we should be able to compile and run this just fine.
So two things should happen now.
One is we should bold the text.
And second, there should be a color applied immediately.
And based on what present we pick, it should adapt as well.
Right, this looks good.
So initially, we have a color right in between the green and red.
And if I go all the way down to zero, you can see how it changes to red.
And if I scrub upward to the best tip, which is 30, you can see how it slowly transforms from red to green.
I like that a lot just because it feels much more interactive and dynamic now compared to what we had before.
Alright, so let's give it one last try.
We're going to put in $9 here for the bill.
And then as I scrub, you can see how everything updates appropriately.
If I Backspace, there's no crash, I can enter in another amount.
And everything works just as we expect.
Awesome.
So if this is your first ever entered app, that's amazing.
Congratulations.
Let me know in a comment.
The reason I really liked the tip calculator, there's so many ways you can extend this basic project that we have to make it more interesting.
So a couple ideas I had number one, you could split the bill by n people.
So you could imagine that you go out to dinner with the number of people you add in three or four and then you should divide that total amount by three or four in order to make it easy for everyone to pay a certain amount.
Second, you could add a button or some sort of component which allows the user to round the final amount up or down.
So there's no need to deal with change.
And of course, there's a lot more that you could do in terms of design or color updates.
So what I recommend now is complete any number of extensions, other ones that we talked about, or something that you came up with on your own, and then you can more or less publish exactly what you have on the Play Store.
I won't walk through that here, but I'll leave a video in the description where I talk about how to do that and I hope that you use This tip calculator as a starting point in your journey as an Android developer and you build many more apps in the future.
If you enjoyed this, please drop a like and comment.
We'd love to hear from you.
Thanks so much for watching and I will see you in the next one.
Bye