Android wrap_content vs fill_parent

 

While developing layouts in Android to specify layout_height & layout_width you have used either  wrap_content or fill_parent (match_parent). Let us compare Android wrap_content vs fill_parent.

 

  • wrap_content : The component will occupy space over  its parent only as per its content-size. We can imagine that with a balloon, the balloon will occupy space depending upon air filled inside it i.e. wrap_content. In case of TextView / Button they will occupy space based on the length of the string, for ImageView based on size(resolution) of the image. In case of a parent layout with wrap_content it will occupy the screen based on size of all its child components.
  • fill_parent (also called match_parent) : No matter what the size of the content is, the component will acquire all the space of its parent. If screen is the direct parent to the component, then it will completely fill the screen & if the component will be part of some other parent layout, then it will occupy all the size of that parent layout. (See the below Output image to understand this)

 

Output of project Wrap_content vs Fill_parent


  •  Talking about our 3rd button, it is inside parent linear-layout which is covered by blue background. So while using layout_width=”fill_parent” for 3rd button it will just fill up its parent i.e. blue area in width & not the whole screen.

 



Download
Source Code : WrapContent FillParent.zip


 

Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) WrapContentFillParent which you might have downloaded from above or you can follow the scripts below by copying it to implement  in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/WrapContentFillParent/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1.  activity_main.xml 

Explaining above Code :

  • Line 11-12 we have added layout_height=”wrap_content”  &  layout_width=”wrap_content”. That means our button will take shape based on the size of the string. Update the text & you will see the change.
  • Line 18-19 we have made layout_width=”fill_parent” which means, irrespective of size of the text-string the button will fill up the parent i.e. screen horizontally.
  • Line 24-28 We have added a Linear-Layout which will be now direct parent to our 3rd Button. We have made width of this Linear Layout 200dp, whatever you see in blue-background is part of this linear-layout.
  • Line 33 Inside our 3rd button we have made layout_width=”fill_parent”. Here you will notice that the button will scale only upto 200dp since its parent Linear Layout has max width 200dp.

 

 

2. MainActivity.java

Nothing special here in MainActivity.java, just the usual lines.

Click here to see Output

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.