Android wrap_content and fill_parent example

In Android, you always put either “wrap_content” or “fill_parent” on component’s attribute “layout_width” and “layout_height“, did you wonder what’s the different?

See following definition :

  1. wrap_content – The component just want to display big enough to enclose its content only.
  2. fill_parent – The component want to display as big as its parent, and fill in the remaining spaces. (renamed match_parent in API Level 8)

Above terms may not make sense now, let see following demonstration :

1. wrap_content

A button component, set “wrap_content” on both width and height attribute. It tell Android to display the button big enough to enclose it’s content “Button ABC” only.


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

    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button ABC"/>
     
</RelativeLayout>
android wrap-content example1

2. fill_parent – width

Change the “layout_width” to “fill_parent“, now, the button’s width will fill in the remaining spaces, just as big as it’s parent “RelativeLayout“, but button’s height is still big enough to enclose it’s content only.


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

    <Button
        android:id="@+id/btnButton1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button ABC"/>
     
</RelativeLayout>
android wrap-content example2

3. fill_parent – height

Change the “layout_height” to “fill_parent“, now, the button’s height will fill in the remaining spaces, just as big as it’s parent “RelativeLayout“, but button’s width is still big enough to enclose it’s content only.


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

    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button ABC"/>
     
</RelativeLayout>
android wrap-content example3

4. fill_parent – width, height

Change the both “layout_width” and “layout_height” to “fill_parent“, the button will display as big as the whole device screen, it just fill in the entire screen space.


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

    <Button
        android:id="@+id/btnButton1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Button ABC"/>
     
</RelativeLayout>
android wrap-content example4
Note
Actually, you can specifying an exact width and height, but it’s not recommended, due to Android variety of devices screen size. You just do not know what size of Android device is running your fantasy application.

References

  1. Android XML Layouts documentation
  2. Android ViewGroup.LayoutParams documentation

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Abhijeet
Guest
Abhijeet

Thank you for sharing the Demos for wrap_content vs fill_parent

?????
Guest
?????

????

G.VINODH KUMAR
Guest
G.VINODH KUMAR

It”s usefull my carrier, Thank uuuuuuuuu………

deniz Balç?k
Guest
deniz Balç?k

You are the MAN! :)

Iman Syaefulloh
Guest
Iman Syaefulloh

Thanks, it’s understandable for me.

FSDDF
Guest
FSDDF

It’s very easily understandable …Thank you

trackback
Desarrollando Android #5

[…] repasar las propiedades wrap_content y demás de los layout_width (aquí, aquí y aquí) y los pesos de los que hemos hablado. Básicamente, este diseño mío crea una […]

Ralph
Guest
Ralph

great tutorial. thanks a lot..
hope more tutorial will come

qinghai
Guest
qinghai

Thank you very much

Vipin Prabhakaran
Guest
Vipin Prabhakaran

Really simple explanation. I was able to understand very clearly. Thank you

siva
Guest
siva

super demonstration , i like very much thanks a lot and very useful for android beginners..

ez
Guest
ez

Simple and to the point. Well done

Android Guru
Guest
Android Guru

How to check whether Wi-Fi internet access is active or not in a device. Take a look at the post:
http://android.programmerguru.com/android-check-wifi-internet-connection/

Rajanikanth
Guest
Rajanikanth

Thank you alot….

Surya
Guest
Surya

I love your demonstration.. Admirable.. I’m unable to install android SDK in my windows 7.. I have already installed JDK, Eclipse helios.. Can you suggest me??

jay
Guest
jay

Nice Post ….

winni56
Guest
winni56

Very usefull

Laurentiu
Guest
Laurentiu

Thanks a lot for this tutorials. I just started learning Java and Android programming and you examples are very good !!!!

Sarika
Guest
Sarika

Very nice website sir,i got many useful information from your site.

mm
Guest
mm

@Nguyen Thang: Relative means we can fix the labels any where , but linear means its fixed by giving value by us

Zegarki
Guest
Zegarki

Good Tutorials! I`m student and i prepare for ma studies form your website :)

kai
Guest
kai

thank you ^^

trackback
Android Tutorial

[…] Android wrap_content and fill_parent example The different between wrap_content and fill_parent to control the component’s width and height. […]

sekhar
Guest
sekhar

nice explanation

Khanh Nguyen
Guest
Khanh Nguyen

Thanks ….. nice sharing!

Pras
Guest
Pras

i have created android Calculator app in Eclipse. if i want to run that app i need eclipse must and should.

But i want to make that app run without eclipse in any system as a normal apps run .

just download and run then time app has to be run.

If any one knows help me Pls

Nguyen Thang
Guest
Nguyen Thang

The difference between linearlayout and relativelayout????

kuluval
Guest
kuluval

Very use full….well explained
… thank you sir