ConstraintLayout की मदद से रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई) बनाना   यह Android Jetpack का हिस्सा है.

अगर किसी व्यू पर एक-दूसरे के उलट कंस्ट्रेंट जोड़े जाते हैं, तो कंस्ट्रेंट लाइनें स्प्रिंग की तरह coiled हो जाती हैं. इससे, एक-दूसरे के उलट फ़ोर्स का पता चलता है. इस बारे में दूसरे वीडियो में बताया गया है. यह असर तब सबसे ज़्यादा दिखता है, जब व्यू का साइज़ "फ़िक्स्ड" या "कॉन्टेंट को रैप करें" पर सेट हो. इस मामले में, व्यू को सीमाओं के बीच सेंटर किया जाता है. अगर आपको व्यू का साइज़, सीमाओं के मुताबिक बढ़ाना है, तो साइज़ को "सीमाओं के मुताबिक बदलें" पर स्विच करें. अगर आपको मौजूदा साइज़ को बनाए रखना है, लेकिन व्यू को बीच में न रखना है, तो कंस्ट्रेंट बायस में बदलाव करें.

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

माता-पिता की स्थिति

किसी व्यू के किनारे को लेआउट के किनारे तक सीमित करें.

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

सातवीं इमेज. पैरंट के लिए एक हॉरिज़ॉन्टल कंस्ट्रेंट.

ऑर्डर की स्थिति

दो व्यू के दिखने का क्रम तय करें. यह क्रम, वर्टिकल या हॉरिज़ॉन्टल हो सकता है.

आठवीं इमेज में, B को हमेशा A की दाईं ओर जाना है और C को A के नीचे जाना है. हालांकि, इन सीमाओं का मतलब अलाइनमेंट नहीं है. इसलिए, B अब भी ऊपर और नीचे जा सकता है.

आठवीं इमेज. हॉरिज़ॉन्टल और वर्टिकल कंस्ट्रेंट.

संरेखण

किसी व्यू के किनारे को दूसरे व्यू के किनारे के साथ अलाइन करना.

नौवें चित्र में, B की बाईं ओर को A की बाईं ओर अलाइन किया गया है. अगर आपको व्यू के सेंटर अलाइन करने हैं, तो दोनों तरफ़ कंस्ट्रेंट बनाएं.

कंस्ट्रेंट से व्यू को अंदर की ओर खींचकर अलाइनमेंट को ऑफ़सेट किया जा सकता है. उदाहरण के लिए, 10वें चित्र में B को 24dp ऑफ़सेट अलाइनमेंट के साथ दिखाया गया है. ऑफ़सेट को सीमित व्यू के मार्जिन से तय किया जाता है.

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

नौवीं इमेज. हॉरिज़ॉन्टल अलाइनमेंट के लिए इस्तेमाल होने वाली एक पाबंदी.

10वीं इमेज. ऑफ़सेट हॉरिज़ॉन्टल अलाइनमेंट कंस्ट्रैंट.

बेसलाइन अलाइनमेंट

किसी व्यू के टेक्स्ट बेसलाइन को दूसरे व्यू के टेक्स्ट बेसलाइन के साथ अलाइन करें.

इमेज 11 में, B की पहली लाइन को A के टेक्स्ट के साथ अलाइन किया गया है.

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

11वीं इमेज. बेसलाइन अलाइनमेंट कंस्ट्रेंट.

किसी दिशा-निर्देश का पालन करें

ऐसे वर्टिकल या हॉरिज़ॉन्टल दिशा-निर्देश जोड़े जा सकते हैं जिनकी मदद से, व्यू को सीमित किया जा सके. साथ ही, यह आपके ऐप्लिकेशन के उपयोगकर्ताओं को नहीं दिखेगा. दिशा-निर्देश को लेआउट में तय किया जा सकता है. ऐसा डीपी यूनिट या लेआउट के किनारे से तय किए गए प्रतिशत के आधार पर किया जा सकता है.

दिशा-निर्देश बनाने के लिए, टूलबार में दिशा-निर्देश पर क्लिक करें. इसके बाद, वर्टिकल दिशा-निर्देश जोड़ें या हॉरिज़ॉन्टल दिशा-निर्देश जोड़ें पर क्लिक करें.

बिंदु वाली लाइन को खींचकर उसकी जगह बदलें. साथ ही, मेज़रमेंट मोड को टॉगल करने के लिए, दिशा-निर्देश के किनारे मौजूद सर्कल पर क्लिक करें.

12वीं इमेज. ऐसा व्यू जो सिर्फ़ दिशा-निर्देश तक सीमित है.

किसी बाधा तक सीमित रखना

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

उदाहरण के लिए, 13वें व्यू में C को बैरियर की दाईं ओर रखा गया है. बैरियर को व्यू A और व्यू B, दोनों के "आखिर" (या बाईं से दाईं ओर के लेआउट में दाईं ओर) पर सेट किया गया है. बैरियर इस बात के हिसाब से चलता है कि व्यू A की दाईं ओर या व्यू B की दाईं ओर कौनसा व्यू सबसे दाईं ओर है.

बैरियर बनाने के लिए, यह तरीका अपनाएं:

1. टूलबार में, दिशा-निर्देश पर क्लिक करें. इसके बाद, वर्टिकल बैरियर जोड़ें या हॉरिज़ॉन्टल बैरियर जोड़ें पर क्लिक करें.
2. कॉम्पोनेंट ट्री विंडो में, वे व्यू चुनें जिन्हें आपको बैरियर में चाहिए और उन्हें बैरियर कॉम्पोनेंट में खींचें और छोड़ें.
3. कॉम्पोनेंट ट्री से बैरियर चुनें. इसके बाद, एट्रिब्यूट विंडो खोलें और barrierDirection सेट करें.

अब आपके पास किसी दूसरे व्यू से बैरियर तक पाबंदी बनाने का विकल्प है.

आपके पास, बाधा के अंदर मौजूद व्यू को भी बाधा के दायरे में सीमित करने का विकल्प है. इस तरह, बैरियर में सभी व्यू को एक-दूसरे के साथ अलाइन किया जा सकता है, भले ही आपको यह पता न हो कि कौनसा व्यू सबसे लंबा या सबसे ऊंचा है.

बैरियर के अंदर भी दिशा-निर्देश शामिल किया जा सकता है, ताकि बैरियर की "कम से कम" जगह तय की जा सके.

13वीं इमेज. व्यू C, एक बैरियर के अंदर है, जो व्यू A और व्यू B, दोनों की पोज़िशन और साइज़ के हिसाब से चलता है.

कंस्ट्रेंट के झुकाव को कम या ज़्यादा करना

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

अगर आपको शर्तों को पूरा करने के लिए, व्यू का साइज़ बढ़ाना है, तो साइज़ को "शर्तों के हिसाब से बदलें" पर स्विच करें.

व्यू साइज़ एडजस्ट करना

14वीं इमेज. व्यू चुनते समय, एट्रिब्यूट विंडो में, 1 साइज़ रेशियो, 2 पाबंदियों को मिटाने, 3 ऊंचाई या चौड़ाई मोड, 4 मार्जिन, और 5 पाबंदी के बायस के लिए कंट्रोल शामिल होते हैं. आपके पास, 6 पाबंदियों की सूची में जाकर, उन पर क्लिक करके, लेआउट एडिटर में अलग-अलग पाबंदियों को हाइलाइट करने का विकल्प भी है.

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

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

इमेज 14 में, कॉलआउट 3 से दिखाए गए सिंबल पर क्लिक करके, ऊंचाई और चौड़ाई को कैलकुलेट करने का तरीका बदला जा सकता है. इन सिंबल से साइज़ मोड के बारे में इस तरह पता चलता है. इन सेटिंग के बीच टॉगल करने के लिए, चिह्न पर क्लिक करें:

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

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

• मैच कंस्ट्रेंट: व्यू के मार्जिन को ध्यान में रखने के बाद, व्यू हर ओर की सीमाओं को पूरा करने के लिए जितना हो सके उतना बड़ा हो जाता है. हालांकि, इन एट्रिब्यूट और वैल्यू की मदद से, इस व्यवहार में बदलाव किया जा सकता है. ये एट्रिब्यूट सिर्फ़ तब लागू होते हैं, जब व्यू की चौड़ाई को "मैच की शर्तें" पर सेट किया जाता है:
  • layout_constraintWidth_min

    इसमें व्यू की कम से कम चौड़ाई के लिए dp डाइमेंशन का इस्तेमाल किया जाता है.

  • layout_constraintwidth_max

    व्यू की ज़्यादा से ज़्यादा चौड़ाई के लिए, यह dp डाइमेंशन की ज़रूरत होती है.

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

साइज़ को अनुपात के तौर पर सेट करना

15वीं इमेज. व्यू को 16:9 आसपेक्ट रेशियो में सेट किया गया है. इसमें चौड़ाई, ऊंचाई के अनुपात के आधार पर तय की जाती है.

अगर व्यू के कम से कम एक डाइमेंशन को "मैच कंस्ट्रेंट" (0dp) पर सेट किया गया है, तो व्यू का साइज़ 16:9 जैसे रेशियो पर सेट किया जा सकता है. रेशियो चालू करने के लिए, आस्पेक्ट रेशियो की सीमा को टॉगल करें (चित्र 14 में कॉलआउट 1) पर क्लिक करें और दिखने वाले इनपुट में width:height रेशियो डालें.

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

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

व्यू के मार्जिन में बदलाव करना

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

एट्रिब्यूट विंडो में, हर व्यू के मार्जिन को कंट्रोल किया जा सकता है. इसके लिए, हर शर्त को दिखाने वाली लाइन पर मौजूद संख्या पर क्लिक करें. इमेज 14 में, कॉलआउट 4 से पता चलता है कि सबसे नीचे का मार्जिन 16dp पर सेट है.

16वीं इमेज. टूलबार का मार्जिन बटन.

टूल में दिए गए सभी मार्जिन, 8dp के फ़ैक्टर होते हैं. इससे आपके व्यू को, Material Design के 8dp स्क्वेयर ग्रिड के सुझावों के मुताबिक अलाइन करने में मदद मिलती है.

चेन की मदद से लीनियर ग्रुप कंट्रोल करना

17वीं इमेज. दो व्यू वाली हॉरिज़ॉन्टल चेन.

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

18वीं इमेज. हर चेन स्टाइल के उदाहरण.

चेन को इनमें से किसी एक तरीके से स्टाइल किया जा सकता है:

1. स्प्रेड: मार्जिन का हिसाब होने के बाद व्यू समान रूप से बांट दिए जाते हैं. यह डिफ़ॉल्ट विकल्प है.
2. इनसाइड स्प्रेड: पहले और आखिरी व्यू को चेन के दोनों ओर मौजूद कंस्ट्रेंट से जोड़ा जाता है. बाकी व्यू को बराबर बांटा जाता है.
3. वज़न: जब चेन को स्प्रेड या स्प्रेड इनसाइड पर सेट किया जाता है, तो एक या उससे ज़्यादा व्यू को "मैच कंस्ट्रेंट" (0dp) पर सेट करके, बचे हुए स्पेस को भरा जा सकता है. डिफ़ॉल्ट रूप से, स्पेस को "मैच कंस्ट्रेंट" पर सेट किए गए हर व्यू के बीच बराबर बांटा जाता है. हालांकि, layout_constraintHorizontal_weight और layout_constraintVertical_weight एट्रिब्यूट का इस्तेमाल करके, हर व्यू को अहमियत का वज़न असाइन किया जा सकता है. यह लीनियर लेआउट में, layout_weight की तरह ही काम करता है: सबसे ज़्यादा वज़न वाले व्यू को सबसे ज़्यादा स्पेस मिलता है. साथ ही, समान वज़न वाले व्यू को उतना ही स्पेस मिलता है.
4. पैक किए गए: मार्जिन का हिसाब लगाने के बाद, व्यू को एक साथ पैक किया जाता है. चेन के "हेड" व्यू के बायस को बदलकर, पूरी चेन के पूर्वाग्रह को बदला जा सकता है. जैसे, बाएं या दाएं या ऊपर या नीचे.

चेन का "हेड" व्यू, एक्सएमएल में चेन के स्टाइल को तय करता है. यह व्यू, हॉरिज़ॉन्टल चेन में सबसे बाईं ओर (लेफ़्ट-टू-राइट लेआउट में) और वर्टिकल चेन में सबसे ऊपर होता है. हालांकि, चेन में मौजूद किसी भी व्यू को चुनकर और व्यू के नीचे दिखने वाले चेन बटन पर क्लिक करके, स्प्रेड, स्प्रेड इनसाइड, और पैक किया गया के बीच टॉगल किया जा सकता है.

चैनल बनाने के लिए, चौथे वीडियो में दिखाए गए तरीके से यह तरीका अपनाएं:

1. चेन में शामिल किए जाने वाले सभी व्यू चुनें.
2. किसी एक व्यू पर राइट क्लिक करें.
3. चेन चुनें.
4. क्षैतिज रूप से या लंबवत रूप से मध्य में में से किसी एक को चुनें.

चेन का इस्तेमाल करते समय इन बातों का ध्यान रखें:

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

पाबंदियां अपने-आप बनना

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

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

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

अपने-आप कनेक्ट होने की सुविधा डिफ़ॉल्ट रूप से बंद होती है. लेआउट एडिटर टूलबार में, माता-पिता के साथ ऑटोकनेक्शन चालू करें पर क्लिक करके इसे चालू करें.

कीफ़्रेम ऐनिमेशन

ConstraintLayout में, ConstraintSet और TransitionManager का इस्तेमाल करके, एलिमेंट के साइज़ और पोज़िशन में बदलाव किए जा सकते हैं.

ConstraintSet एक छोटा ऑब्जेक्ट है, जो ConstraintLayout में मौजूद सभी चाइल्ड एलिमेंट के कंस्ट्रेंट, मार्जिन, और पैडिंग दिखाता है. जब किसी दिखाए गए ConstraintLayout पर ConstraintSet लागू किया जाता है, तो लेआउट अपने सभी चाइल्ड की सीमाओं को अपडेट कर देता है.

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

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

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

अन्य संसाधन

ConstraintLayout का इस्तेमाल, Sunflower के डेमो ऐप्लिकेशन में किया जाता है.