Android – Difference Between MATCH_PARENT, FILL_PARENT and WRAP_CONTENT

Views refer to as a user interface in android. The front end of the application is made by using widgets and views. The prominent language used for the user interface in android is XML. There are different types of Views in the Android Studio such as TextView, ImageView, EditTextView, etc. They all are in the form of view which can be used to make an attractive user interface. Every view has different functionality – TextView provides a view where we can display any text, ImageView provides a view where we can display any image and EditTextView provides a view where the user can write any text.

Attributes in XML

Every view has some defined attribute sets. These attributes help you to customize the view. There are different types of attributes to customize width, height, color, font, size, alignment, style, and many more. For example, if we have a TextView then the attributes will look like the below code, we have many more attributes related to TextView and other Views as well.

XML

<TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:fontFamily="sans-serif-medium"
  android:gravity="center"
  android:padding="16dp"
  android:text="Team A"
  android:textColor="@color/red"
  android:textSize="14sp" />

In this article, we will understand three values i.e match_parent, fill_parent, and wrap_content regarding  layout_width and layout_height attributes.

MATCH_PARENT

match_parent is used for referring to the parent size either through layout_width or layout_height attributes. If we set layout_height as match_parent then the view’s height will be as same as the parent’s height. The parent is the outer layout in which the view is present. If we set layout_width as match parent the view’s width will be as same as the parent’s width.

Example Code:

XML

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Match Parent Text"
        android:textSize="30sp"
        android:textColor="@color/black"/>

</LinearLayout>

Output:

FILL_PARENT

fill_parent is as same as match_parent. After API Level 8 and higher versions, the fill_parent is renamed as match_parent. So back in the day, match_parent was used as fill_parent and both the functionality is the same. fill_parent set the view according to their parent only. If we set layout_height as fill_parent, the height will match its parent height and if we set layout_width as fill_parent then the width will be as same as the parent width.

Example:

WRAP_CONTENT

wrap_content is used to wrap the view according to its actual size. It can be used with layout_height as well as layout_width. If we set layout_height as wrap_content then the height will be the same as the content size and if we set layout_width as wrap_content then the width will be the same as the content size. The size will be defined on the basis of content size, if the image size is small then the view will wrap only that image according to its size.

Example Code:

XML

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Wrap Content Text"
        android:textSize="30sp"
        android:textColor="@color/black"/>

</LinearLayout>

Output: