Code2care : TechZone Apps & Tutorials

fill_parent vs match_parent vs wrap_content



A new Android developer may get confused about what's the difference between fill_parent, match_parent and wrap_content.

What are they ?


    These three are called as Layout Parameters. They are used by sub-views to tell the parent view how they want to be laid on the Activity screen i.e we can set the Horizontal and Vertical size of a view using Layout Parameters.

    To specify how big a view must be we use android:layout_width and android:layout_height attributes.

    The values of these attributes can either one of fill_parent, match_parent or wrap_content.



1. match_parent



    When you set layout width and height as match_parent, it will occupy the complete area that the parent view has, i.e. it will be as big as the parent.

    Note : If parent is applied a padding then that space would not be included.

    When we create a layout.xml by default we have RelativeLayout as default parent View with android:layout_width="match_parent" and android:layout_height="match_parent" i.e it occupies the complete width and height of the mobile screen.

    Also note that padding is applied to all sides,

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"


    Now lets add a sub-view LinearLayout and sets its layout_width="match_parent" and layout_height="match_parent", the graphical view would display something like this,

    match_parent_example


    Code



        xmlns:tools="http://schemas.android.com/tools"
        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="com.code2care.android.togglebuttonexample.MainActivity" >

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="11dp"
        android:background="#FFFFEE"
        android:orientation="vertical" >









2. fill_parent :



This is same as match_parent, fill_parent was depreciated in API level 8. So if you are using API level 8 or above you must avoid using fill_parent

Lets follow the same steps as we did for match_parent, just instead use fill_parent everywhere.

You would see that there is no difference in behaviour in both fill_parent and match parent.





3. wrap_content



If you set layout width or height as wrap_content it will use space big enough for its contents to get enclosed.

Lets create a new activity.xml file, with RelativeLayout parent View, now lets add a LinearLayout and set,

android:layout_width="wrap_content"
android:layout_height="wrap_content"


wrap_content_example


You would see that the sub-view LinearLayout does not occupy any space as there is noting that it holds that has to be displayed.

Lets add a Button to the LinearLayout with width and height as "wrap_content". You would see that now the LinearLayout occupies space as that required by the button to be displayed.

wrap_content_with_button


Code :

     xmlns:tools="http://schemas.android.com/tools"
     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="com.code2care.android.togglebuttonexample.MainActivity" >

     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentLeft="true"
     android:layout_alignParentTop="true"
     android:layout_marginLeft="11dp"
     android:background="#FFFFEE"
     android:orientation="vertical" >

     android:id="@+id/button1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button" />





Conclusion



    fill_parent and match_parent are the same, used when we want the height or width of a view to be as big as its parent view, fill_parent being deprecated.

    wrap_content is used when we want the view to occupy only as much space as required by it.











Top




Posts related to android.


1. Share image and text Twitter using your Android Application Programatically

2. The Android Virtual Device 'myEmulator' is currently running an emulator and cannot be deleted.

3. Make Android View Scrollable both Horizontally and Vertically

4. Can we move apps like WhatsApp, Facebook to external MicroSD card

5. Parsing Data for android-21 failed unsupported major.minor version 51.0

6. Android : Prevent App for rotation landscape or portrait

7. ADT quit unexpectedly error on Mac OSX Android Eclipse SDK

8. Android-Failed to install apk on device EOF Timeout Error

9. How to change Android EditText Cursor Color

10. JavaDocs for Android SDK Eclipse IDE

11. Two Buttons next to each other in Android Layout

12. Change Title text for Android Activity using java code

13. How to add Newline to text in Android TextView

14. Android : Unable to load VM from snapshot : Mac OS X Error

15. INVALID FILE NAME: MUST CONTAIN ONLY [a-z0-9_.] Android Eclipse Error

16. Hide Tittle bar and Navigation bar from android activity

17. appcompat_v7 errors after updates to API level 21 Material Theme

18. How to Copy Text to Android Clipboard Programatically ClipboardManager (Both Old and New SDK)

19. [Solution] Running Android Lint has encountered a problem NullPointerException Error

20. Remove Trailing zeros BigDecimal Java

    more...






Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-17