Android RelativeLayout – Learn with Simple Example

Android RelativeLayout – किसी भी अन्‍य Layout की तुलना में RelativeLayout कहीं अधिक जटिल होता है, जहां हमें हमारे विभिन्‍न UI View Controls को Linear तरीके से Position नहीं करना होता बल्कि एक दूसरे के Relation में Position करना होता है जिसकी वजह से Layout के किसी एक UI Control की Positioning में किए जाने वाले या होने वाले Change का प्रभाव उस UI Control से पहले व बाद में Placed अन्‍य UI Controls की Positioning पर पड़ता है।

RelativeLayout वास्‍तव में किसी भी Android App का Default Layout होता है इसलिए हम Android Studio का प्रयोग करते हुए जब भी कोई नया Android App Create करते हैं, अथवा जब भी कोई नया Activity Create करते हैं, हमें मिलने वाली Activity से सम्‍बंधित XML Layout File का Default Layout Element <RelativeLayout … /> ही होता है।

Relative Layout को Manage करने का काम RelativeLayout Class द्वारा किया जाता है और यही Class इस बात को निश्चित करता है कि इस Layout का प्रयोग करते हुए बनाए गए Android App Layout के विभिन्‍न UI Controls एक दूसरे के Relation में Screen पर किस तरह से Position होंगे। इसलिए इस Layout के XML Definition में किसी भी अन्‍य Layout की तुलना में अधिक Parameters व Layout Variables होते हैं जिसकी वजह से इस RelativeLayout के XML Codes, LinearLayout के XML Codes की तुलना में दुगुने से ज्‍यादा हो सकते हैं।

जब हम LinearLayout Use करते हैं और कई Levels की Nesting की वजह से हमारा LinearLayout काफी Typical होने लगता है, तब उसी Layout को RelativeLayout के रूप में Develop करना Performance की दृष्टि से काफी उपयोगी हो जाता है क्‍योंकि RelativeLayout का प्रयोग करके हम एक Single Level की Hierarchy में उसी Layout को Develop कर सकते हैं, जिसे Develop करने के लिए यदि हम LinearLayout का प्रयोग करते हैं, तो हमें कई Levels की Nesting करने की जरूरत पड़ सकती है।

परिणामस्‍वरूप हालांकि किसी सामान्‍यत Android App में RelativeLayout के XML Codes, LinearLayout के XML Codes की तुलना में दुगुने हो सकते हैं, लेकिन किसी कई Levels में Nested बहुत ही जटिल LinearLayout के लिए लिखे गए XML Codes की तुलना में बहुत कम XML Codes लिखकर भी हम वही Layout प्राप्‍त कर सकते हैं और ऐसा केवल RelativeLayout के माध्‍यम से ही किया जा सकता है।

इसीलिए Android SDK हमें Default Layout के रूप में RelativeLayout ही Provide करता है, क्‍योंकि इसे सही तरह से Manage करना सीखकर हम किसी भी अन्‍य Layout की तुलना में कम XML Codes के माध्‍यम से भी ज्‍यादा Manageable व Efficient Layout Create कर सकते हैं।

हालांकि यहां एक बात ध्‍यान रखना जरूरी है कि जो Layout एक Simple LinearLayout द्वारा Create किया जा सकता है, उसे भी RelativeLayout का प्रयोग करते हुए Develop करना सरासर मूर्खता है क्‍योंकि जो काम कम से कम XML Codes का प्रयोग करते हुए LinearLayout द्वारा हो सकता है, उसी Layout को RelativeLayout में दुगुने XML Codes के माध्‍यम से Develop नहीं करना चाहिए।

Android SDK हमें इसीलिए कई तरह के Layout Options Provide करता है ताकि हम हमारी जरूरत के अनुसार Best Possible Layout का Selection कर सकें, और कम से कम XML Codes द्वारा Layout Develop हो सके। यदि आपका Layout LinearLayout Element का प्रयोग करके 10 Lines के XML Codes द्वारा बन सकता है, तो उसी Layout को RelativeLayout Element का प्रयोग करके 15 Lines का XML Code लिखना किसी भी तरह से उचित नहीं है। लेकिन उसी समान Layout को यदि GridView या ListView Element का प्रयोग करके केवल 5 Line के XML Code द्वारा बनाया जा सकता है, तो निश्चित रूप से उस Layout को ListView या GridView Layout के माध्‍यम से ही बनाया जाना चाहिए।

RelativeLayout एक ऐसा ViewGroup Container है जो कि किसी भी अन्‍य Layout की तुलना में हमेंशा कम Memory Use करता है और ज्‍यादा Smoothly व Quickly Perform करता है। ये Layout हमें सभी तरह के UI Views को एक ही Single Container में Arrange करने की सुविधा देता है ताकि हम एक Single ViewGroup Container द्वारा भी ज्‍यादा Complex Layouts बना सकें और अधिक बेहतर Performance प्राप्‍त कर सकें।

जैसाकि हमने पहले भी बताया कि RelativeLayout एक ऐसा Layout है, जिसके अन्‍तर्गत विभिन्‍न UI Controls यानी Child Views एक दूसरे के साथ Related होते हैं इसलिए विभिन्‍न Siblings एक दूसरे के साथ Left or Right अथवा Up or Down में किस तरह से Position होंगे और किसी एक UI Control के Position Change करने पर अन्‍य Controls किस तरह से Position Change करेंगे इस बात का ध्‍यान रखना बहुत जरूरी होता है और इसीलिए RelativeLayout किसी भी अन्‍य Layout की तुलना में अधिक जटिल है।

RelativeLayout सबसे Powerful Layout इसलिए माना जाता है क्‍योंकि ये कई Levels की ViewGroup Nesting को Eliminated करने की क्षमता रखता है और हमें ऐसी सुविधा देता है कि हम एक ही Level की Hierarchy को Use करते हुए अपना पूरा User Interface Design कर सकते हैं, जिसकी वजह से हमारे Android App की Performance काफी अच्‍छी हो जाती है। इसलिए अपना UI Layout Create करते समय यदि आपको महसूस हो कि आप कई Levels की LinearLayout Nesting कर रहे हैं, तो बेहतर होगा कि आप अपने UI Layout को RelativeLayout के आधार पर Modify कर लें।

चूंकि जब हम कोई नया Android App Create करते हैं अथवा Current Android App में कोई नई Activity Add करते हैं, तो Default रूप से Create होने वाला Layout RelativeLayout ही होता है। इसलिए हमें हमारे Android App में Layout परिवर्तन के लिए कुछ भी Special करने की जरूरत नहीं होती।

हालांकि यदि इस RelativeLayout को Change करके LinearLayout या कोई अन्‍य Layout Create कर लिया हो, तो इसे RelativeLayout में Convert करने के लिए हमें अपनी Activity File से सम्‍बंधित XML Layout File को XML Code Mode में Open करना होता है और Layout Element को Change करके <RelativeLayout … /> करना होता है। यदि Default रूप से Create होने वाले RelativeLayout Code को देखें, तो ये कुछ निम्‍नानुसार होता है:

// File Name: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity">

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Hello World!" />
 </RelativeLayout>

RelativeLayout अपने Child Elements को उनके Parent या अन्‍य Siblings के संदर्भ में Position होने की सुविधा Provide करता है जबकि जिस Child Element के संदर्भ में Position होना है, उसे पहचानने के लिए उसके ID को Use किया जाता है। इसलिए हम दो अलग View Elements को एक साथ एक ही तरफ के Border की और Align कर सकते हैं, एक दूसरे के ऊपर-नीचे भी Position कर सकते हैं अथवा किसी UI Element को Screen के Center, Centered Left, Centered Right आदि कई तरीकों से Align कर सकते हैं।

चूंकि Default रूप से सभी Child View Elements, RelativeLayout के Top-Left से Draw होना शुरू होते हैं इसलिए विभिन्‍न UI Elements को Properly Position करने के लिए हमें विभिन्‍न UI Elements के लिए हमें RelativeLayout.LayoutParams Class में Defined कई Positioning Properties को Specify करना जरूरी होता है।

चूंकि, ये सभी Properties एक दूसरे के साथ Related रहते हुए किसी Specific Element की Positioning को Define करती हैं, इसलिए इन सभी को ठीक से समझने के लिए हमें RelativeLayout के मूल Concept को ठीक से समझना जरूरी है, जिसके अनुसार इस Layout में प्रत्‍येक UI View Control कुल दो अन्‍य View Controls के संदर्भ में Screen पर Position होता है:

• अपने Parent या Container ViewGroup Element के संदर्भ में और
• अपने अन्‍य Sibling View Element के संदर्भ में।

इसलिए जब हम RelativeLayout का प्रयोग करते हुए अपना Layout Create कर रहे होते हैं, तब हमें अपने प्रत्‍येक View Element में android:id Attribute को Specify करना जरूरी होता है क्‍योंकि हम Current View Object को किस अन्‍य View या ViewGroup Object के संदर्भ में Screen पर कहां Position करना चाहते हैं, इस बात को उन अन्‍य UI Controls यानी View Object के android:id Attribute द्वारा ही निश्चित किया जाता है।

जब हम RelativeLayout का प्रयोग करते हुए अपना Layout Create कर रहे होते हैं, तो सबसे पहले हमें Root Element के रूप में <RelativeLayout … /> Element को इसके इसके तीन Compulsory Attributes xmlns, layout_height व layout_width के साथ Specify करना होता है। साथ ही Screen पर Layout ठीक दिखाई दे, इसके लिए जरूरी होता है कि हम इस Layout की चारों Paddings को भी किसी ना किसी मान से Set करें।

जब हम कोई नया Android App या नई Activity Create करते हैं, तो Create होने वाली Layout XML File में Default रूप <RelativeLayout … /> Element ही Create होता है और उसमें ये सभी Attributes पहले से ही Set होते हैं।

इनके अलावा Android 4.2+ से Layout के Text Direction के Concept पर आधारित Layout Flow के Start व End से सम्‍बंधित कुछ नए Attributes Add किए गए हैं, ताकि हम हमारे Android App को आसानी से Internationlize व Localize कर सकें। इसलिए आगे बढ़ने से पहले इन्‍हीं को ठीक से समझना जरूरी है ताकि हम हमारे RelativeLayout को बेहतर तरीके से Design व Control कर सकें।

Buy this eBook for Detailed Discussion about…

• layout_marginStart,
• layout_marginEnd,
• layout_paddingStart,
• layout_paddingEnd
• android:layoutDirection Attribute
• android:textDirection Attribute
• android:textAlignment Attribute
• layout_centerVertical=”true”
• layout_centerHorizontal=”true”
• layout_centerInParent=”true”
• layout_alignParentTop=”true”
• layout_alignParentRight=”true”
• layout_alignParentBottom=”true”
• layout_alignParentLeft=”true”
• layout_alignParentStart=”true”
• layout_alignParentEnd=”true”
• android:layout_toRightOf Attribute
• android:layout_toLeftOf Attribute
• android:layout_toStartOf and android:layout_toEndOf Attribute
• android:layout_above and android:layout_below Attributes
• android:layout_alignTop
• android:layout_alignBottom
• android:layout_alignLeft
• android:layout_alignRight
• android:layout_alignStart
• android:layout_alignEnd
• android:layout_alignBaseline
• android:layout_alignWithParentIfMissing