Android LinearLayout – Gravity, Margin, Padding

Android LinearLayout – पिछले Section में हम इस Layout के बारे में काफी विस्‍तार से चर्चा कर चुके हैं और इस Layout पर आधारित एक Simple सा UI Example भी देख चुके हैं। ये एक ऐसा Layout होता है, जिसके सभी Child UI Controls एक ही Direction में या तो Horizontally या फिर Vertically Align होते हैं और इसके सभी Elements किस Direction में Flow होंगे, इस बात को इसी LinearLayout Element के orientation Attribute द्वारा तय किया जाता है।

LinearLayout में सभी Child Elements एक के बाद दूसरा Stack होते हैं इसलिए यदि इस Layout का Orientation Vertical हो, तो हर दूसरा Child Element, पहले वाले के नीचे यानी Down Side में Position होता है। इसलिए इस Vertical UI Controls की List में प्रत्‍येक Row में केवल एक UI Control होता है, फिर इस बात से कोई फर्क नहीं पड़ता कि प्रत्‍येक UI Control कितना चौड़ा है।

जबकि यदि इस Layout का Orientation Horizontal हो, तो हर दूसरा Child Element, पहले वाले के Right Side में Position होता है। इसलिए इस Horizontal UI Controls की List में Row की अधिकतम Height, सबसे ज्‍यादा Height वाले UI Control की Padding + Height के बराबर होता है।

Gravity

LinearLayout Use करने पर उसमें Nested सभी Child UI Controls Default रूप से Top व Left Aligned ही रहते हैं। इसलिए यदि हम Horizontal Orientation में UI Controls की एक Row Create करते हैं, तो वह Row Screen के Exact Left Side से Flow होना शुरू होती है। यदि हमें हमारे UI Layout में इस Default Behaviour से अलग तरीके के Flow की जरूरत हो, तो हमें Gravity Value को Set करना होता है, जिसे हम setGravity() Method Call करके Runtime में अथवा android:layout_gravity Attributes के माध्‍यम से Design Time में Set क्‍र सकते हैं और UI View व उसके Container को Instruct कर सकते हैं कि UI Views को Screen पर कैसे Align करना है।

Widgets यानी UI Controls के किसी Column में Left-Aligned Widgets के लिए Gravity का मान left, Right-Aligned Widgets के लिए Gravity का मान right व Horizontally-Centerd Aligned Widgets के लिए Gravity का मान center_horizontal रखा जाता है। साथ ही विभिन्‍न UI Controls को Row में Vertically Midpoint की तरफ Align करना हो, तो उस स्थिति में हमें Gravity को center_vertical Value से Set करना होता है।

इसके अलावा सभी View Widgets Horizontally जिस Row को Represent करते हैं, उस Row में Exist सभी Views के Texts, एक समान Baseline पर ही Aligned होते हैं, जहां Baseline, Texts के Sit होने की एक Invisible Line होती है, जिसे निम्‍न चित्र द्वारा ज्‍यादा बेहतर तरीके से समझा जा सकता है:

इसलिए हम हमारी जरूरत के अनुसार अपने विभिन्‍न Controls में दिखाई देने वाले Caption Text को कहां Display करना चाहते हैं, इस बात को Gravity Attribute द्वारा तय करना होता है और Gravity Attribute में हम top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal, start, end में से किसी एक या अधिक Values को Set कर सकते हैं।

यहां ध्‍यान रखने वाली एक सबसे महत्‍वपूर्ण बात ये भी है कि कुछ Values केवल तब Effect दिखाती हैं, जबकि Container का orientation Attribute Horizontal होता है जबकि कुछ Values केवल तब Effect दिखाती हैं, जबकि Container का orientation Attribute Vertical होता है। इसलिए कौनसे Orientation में कौनसे Gravity Combinations किस तरह का Output Display करते हैं, इस बात को समझने का केवल एक ही तरीका है कि हम Android Studio IDE का प्रयोग करें और किसी भी UI Widget को Select करके उसके लिए विभिन्‍न Gravity Values Combinations को Set करते हुए उनका Effect देखें।

जब हम Gravity Concept को समझते हैं, तब हमें android:gravity व android:layout_gravity इन दोनों Concepts के बीच के अन्‍तर को ठीक से समझना जरूरी होता है। हालांकि इन दोनों ही Attributes में Set की जाने वाली Values समान ही होती हैं, लेकिन वास्‍तव में android:gravity Attribute किसी View Control के दिखाई देने वाले Caption Text को Align करने का काम करता है, जबकि android:layout_gravity Attribute किसी ViewGroup Layout में Nested विभिन्‍न Child View UI Controls को Screen पर Align करने का काम करता है।

उदाहरण के लिए यदि हमें हमारे Button Control पर दिखाई देने वाले Text को निम्‍न चित्रानुसार Right Side में Display करना हो:

तो इस जरूरत को पूरा करने के लिए हमें Button View Control के लिए android:gravity = “right“ Statement को Use करना पडता है। लेकिन यदि LinearLayout ViewGroup में Nested Button को निम्‍नानुसार तरीके से Screen के Layout पर Right Align करना हो:

तो इस जरूरत को पूरा करने के लिए हमें अपने LinearLayout Element में android:layout_gravity attribute को निम्‍नानुसार तरीके से Use करना होता है:

// File Name: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:padding="@dimen/activity_vertical_margin"
 tools:context=".MainActivity">

<Button
 android:text="@string/btn_add"
 android:layout_width="100dp"
 android:layout_height="wrap_content"
 android:id="@+id/btnAdd"
 android:layout_gravity="right" />
 </LinearLayout>

इस तरह से आप समझ सकते हैं कि gravity व layout_gravity Attributes में क्‍या अन्‍तर है। यहां ध्‍यान रखने वाली बात केवल इतनी ही है कि gravity Attribute को हमेंशा किसी न किसी View Object के साथ Use किया जाता है जबकि layout_gravity Attribute को हमेंशा किसी न किसी ViewGroup Object यानी Layout के साथ Use किया जाता है।

साथ ही जब हम layout_gravity Attribute को Use करते हैं, तब Nested Views की Width को Specify करना जरूरी होता है, जो कि wrap_content Value नहीं हो सकता क्‍योंकि इस Value को Specify करने पर Nested View Control बचे हुए पूरे Horizontal/Vertical Space में Wrap हो जाता है, परिणामस्‍वरूप वह अपने Container के Left से Right तक अथवा Top से Bottom तक फैल जाता है और ऐसे में layout_gravity Attribute का Nested View Controls को Align करने का Visual Effect दिखाई नहीं पड़ता।

Margins

Default रूप से सभी UI Widgets एक दूसरे के साथ काफी Tightly चिपके हुए रहते हैं। इसलिए इनके बीच के Space को बढ़ाने के लिए हम Margins का प्रयोग करते हैं। Margin और Padding में एक Simple सा अन्‍तर ये होता है कि Margin किसी भी View Control के Rectangle Border के Outside के Space को कहते हैं जबकि Padding उस View Control के Rectangle Border के Inside का Space होता है। जैसे:

Padding व Margins के बीच का Visual Effect केवल उन्‍हीं UI Widgets या Controls के साथ दिखाई देता है, जिनका कोई Non-Transparent Background होता है।

Buy this eBook to continue reading …

• Padding and Margins Properly