How to Create ConstraintLayout – Step by Step

How to Create ConstraintLayout – जब हम ConstraintLayout Create करते हैं, तब हमें किसी भी UI View Control के कम से कम 1 Horizontal व 1 Vertical Constraint को Add करना जरूरी होता है। जबकि प्रत्‍येक Constraints किसी अन्‍य UI View Control, Parent Layout या किसी Invisible Guideline के साथ Connection या Alignment को Represent करता है।

प्रत्‍येक Constraint किसी Specific View की Position को Horizontal या Vertical Axis के Relation में Represent करता है। इसलिए किसी भी View का कम से कम एक Constraint का प्रत्‍येक Axis के साथ Related होना जरूरी होता है और प्रत्‍येक UI View Control सामान्‍यत: एक से ज्‍यादा Axis के साथ Related होता है।

जब हम ConstraintLayout के Layout Editor में किसी View Control को Drag करके जहां Drop करते हैं, वह UI View Control उसी Location पर Position हो जाता है। लेकिन ऐसा Layout Designing को Easy दिखाने के लिए होता है और यदि हम अपने पूरे Layout को बिना कोई Constraint Set किए हुए Design करें, तो ऐसे Layout को Run करने पर सभी UI View Controls Runtime में Android Device की Screen के Top-Left Corner यानी (0,0) Location पर Position हो जाते हैं। इसलिए ConstraintLayout Create करते समय हमें प्रत्‍येक UI View Control को किसी न किसी अन्‍य UI View Control, Parent या Invisible Guideline से Associated या Related करना जरूरी होता है।

जब हम ConstraintLayout Create करते हैं, तब जो भी UI View Control Drag करके Screen पर Drop करते हैं, उसके चारों और चार Circles दिखाई देने लगते हैं। इन्‍हीं Circles को Constraints कहा जाता है जो कि निम्‍न चित्रानुसार दिखाई देते हैं-

हमें जिस किसी भी UI View Control के Constraint को अपने Parent Layout, अन्‍य UI View Control या Invisible Gridline के साथ Set या Relate करना होता है, Mouse Pointer को उस UI View Control पर ले जाते ही उसके सभी Constraints Highlight हो जाते हैं, जैसाकि उपरोक्‍त चित्र में दर्शाया गया है। इस Highlighed Constraint को ही हमें हमारे Mouse से Click करके Drag करना होता है और उस Target UI View Control के उस Constraint पर ले जाकर Drop करना होता है, जिस पर Current UI View Control को Depend करना है या जिससे Current UI View Control को Related करना है।

किसी Specific UI View Control का जो Constraint Free होता है, वह उपरोक्‍त चित्रानुसार Green Color के Circle के रूप में Highlight होता है। जबकि Constraint के Set हो जाने की स्थिति में जब UI View Control पर Mouse Pointer को Hover करते हैं, तो उस UI View Control के सभी Set Constraints निम्‍न चित्रानुसार Dark Red Color के Circle के रूप में Highlight होते हैं:

किसी भी Set Constraint को Unset करने के लिए हमें केवल उसके Dark Red Color के Circle को Click करना होता है। जैसे ही हम किसी Constraint को Set करते हैं, Constraint व Target के बीच एक Arrow दिखाई देने लगता है जो इस बात को Indicate करता है कि Current UI View Control किस Target पर Depend है। उदाहरण के लिए उपरोक्‍त चित्र में Button Control का Top Constraint, Parent Layout के Top Constraint पर Depend है।

हम हमारे Layout की जरूरत के अनुसार एक ही UI View Control के चारों Constraints को 4 अलग Target View Controls के साथ Relate कर सकते हैं। जैसे-

ConstraintLayout की एक सबसे अच्‍छी विशेषता ये है कि हालांकि किसी Widget के लिए न Set किए गए Missing Constraints कोई Compilation Error Generate नहीं करते, लेकिन Layout Editor में निम्‍न चित्रानुसार Warning and Errors के रूप में Highlight होते हैं-

इसका फायदा ये होता है कि हमें Layout Editor में ही पता चल जाता है कि हमने हमारे किस UI View Control के Constraints को Set किया है और किसे नहीं। इतना ही नहीं, Autoconnect and Infer Constraints Feature द्वारा Android Studio का Layout Editor कई Missing Constraints को हमारे लिए स्‍वयं ही Set कर देता है। परिणामस्‍वरूप केवल Drag and Drop तकनीक का प्रयोग करते हुए भी हम एक Perfect Layout Create करने की Capability प्राप्‍त कर लेते हैं।

ConstraintLayout Create करने के लिए Android Studio हमें दो तरीके Provide करता है। पहले तरीके के अन्‍तर्गत हम किसी पहले से बने हुए Layout को ConstraintLayout में Convert कर लेते हैं, जिसके लिए हमें Android Studio में Visual Layout Editor में Activity की Screen अथवा निम्‍न चित्रानुसार Component Tree में दिखाई देने वाले Layout पर Mouse से Right Click करना होता है और Popup होने वाले Menu के अन्तिम Option “Convert ………………Layout to ConstraintLayout” को Click करना होता है:

जबकि दूसरे तरीके के अन्‍तर्गत हम Android Studio IDE के Project Window के अन्‍तर्गत निम्‍न चित्रानुसार दिखाई देने वाले app Folder पर Mouse से Right Click करते हैं जिसके परिणामस्‍वरूप Popup होने वाले Menu से File => New => XML => Layout XML Option पर Click करके एक नया Layout Create कर सकते हैं-

जब हम इस तरीके को Use करते हैं तो जैसे ही हम Layout XML File Option को Click करते हैं, हमारे सामने निम्‍न चित्रानुसार New Android Component Dialog Box Display होता है जहां Default Layout के रूप में LinearLayout का Root Tag Specified होता है और Layout File Name के रूप में “layout” लिखा होता है-

चूंकि हम ConstraintLayout Create करना चाहते हैं, इसलिए इस Dialog Box के Layout File Name व Root Tag को हमें निम्‍नानुसार Modify करना होता है-

जैसे ही हम Layout File Name को constraint_layout व Root Tag को android.support.constraint.ConstraintLayout Values से Set करके Finish Button पर Click करते हैं, हमारे Android Project में एक नया Layout Add हो जाता है जिसकी XML File में निम्‍न XML Codes होते हैं-

<?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout  
   xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

जब हम ConstrainLayout Design कर रहे होते हैं, तब भी हमें RelativeLayout की तरह ही पूरा Layout पहले से पूरी तरह से Clear होना चाहिए क्‍योंकि इस Layout में भी विभिन्‍न UI View Controls अपनी Screen Positioning के लिए एक दूसरे पर Depend होते हैं इसलिए Layout को पूरी तरह से Design कर दिए जाने के बाद यदि Layout में कोई Modification किया जाए, तो उस Modification को Perform करने के लिए हमें पूरे Layout को Modify करने की जरूरत पड़ सकती है जो कि बहुत ही Time Consuming काम हो जाता है।

Buy this eBook to read Complete Discussion