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 a parent has applied to 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.png
match_parent_example.png
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 the same as match_parent, fill_parent was deprecated in API level 8. So if you are using API level 8 or above you must avoid using fill_parent

Let's 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 behavior 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.

Let's create a new activity.xml file, with RelativeLayout parent View, now let's add a LinearLayout and set,

android:layout_width="wrap_content"
android:layout_height="wrap_content"
wrap_content_example.png
wrap_content_example.png

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

Let's 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.

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 being as big as its parent view, fill_parent being deprecated.

wrap_content_with_button.png
wrap_content_with_button.png

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

Advertisements
Try Out Code2care Dev Tools:

Advertisements



Android Java Linux Microsoft Google Python macOS Notepad++ Microsoft Teams CSS PHP SharePoint Html Linux C Programs Bootstrap jQuery Sublime Android Studio Facebook Eclipse WhatsApp News MySQL Json HowTos JavaScript FTP S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency