How to Position Views Properly in Layouts

Hey everyone,

Have you ever wondered what the difference between layout_gravity and gravity is? Or been frustrated because you included android:layout_gravity=”center” in your view but nothing was centering? In this tutorial I’ll try to address those issues and focus on the LinearLayout class.

First off, the difference between android:gravity and android:layout_gravity is that android:gravity positions the contents of that view (i.e. what’s inside the view), whereas android:layout_gravity positions the view with respect to its parent (i.e. what the view is contained in). If this isn’t clear to you now, then maybe after these examples it will become clear.

Say you have an example Layout like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:gravity="center" >
    <TextView  
    	android:layout_width="wrap_content" 
   	android:layout_height="wrap_content"
    	android:text="@string/hello" />
    <ImageView
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:src="@drawable/icon" />
    </LinearLayout>
</LinearLayout>

Which looks like:

And you’re wondering…

“Why is this not centering? I have two views, and I’m using gravity on the parent view so that its children (i.e. the TextView and ImageView) will be centered inside.”

Well check out what happens when you click the LinearLayout in the XML preview:

See what happened? Because your parent LinearLayout has width “wrap_content”, it’s essentially “hugging” the two views inside and so they have no space to center themselves in. What’s the fix? Change the width to “fill_parent” and see what happens:

So now that we let the parent view expand to fill the entire width of the screen, its contents have room to actually center themselves and so we’re done.

Now, let’s say that we want the TextView to stay to the left and the ImageView to go to the right. The example XML is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content" >
    <TextView  
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="left"
    	android:text="@string/hello" />
    <ImageView
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="right"
    	android:src="@drawable/icon" />
    </LinearLayout>
</LinearLayout>

And you’re thinking…

“Okay so my my parent fills the entire width and I tell the TextView to position itself with respect to its parent on the left, and I tell the ImageView to position itself with respect to its parent on the right, but how come it doesn’t work?”

Well my honest answer is: I don’t know.

[UPDATE]
It’s recently been brought to my attention (thanks to reader Sam Duke) that the “layout_gravity” property can only be used orthogonally with the orientation of the LinearLayout.

In other words, if you have a horizontal LinearLayout, then by construction, each inside child view can only have layout_gravity top, bottom, and center. The intuition behind this is that the LinearLayout is already told to place each child view horizontally adjacent to each other (left to right), and so it only allows vertical specification for the layout_gravity of each child. Vice versa for a vertical LinearLayout.

For a more in-depth explanation, I direct you to:

http://sandipchitale.blogspot.co.uk/2010/05/linearlayout-gravity-and-layoutgravity.html
[END UPDATE]

I’m not sure why this aspect of the layout is so unintuitive but there’s a fix! Simply wrap the desired view that you want to shift to the right in another LinearLayout who has width “fill_parent” and tell it to position its children to the right! To be precise, the new XML example looks like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content" >
    <TextView  
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="left"
    	android:text="@string/hello" />
    <!-- New Layout -->
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:gravity="right" >
    <ImageView
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:src="@drawable/icon" />
    </LinearLayout>
    </LinearLayout>
</LinearLayout>

So notice how we removed the layout_gravity=”right” from the ImageView and instead set android:gravity=”right” in the new LinearLayout. There’s no good reason for this besides that in my experience android:gravity has just worked better than layout_gravity (sometimes the behavior works as intended, and other times even I’m stumped for long periods of time). But any who, now we are left with:

And so we see the new layout in action as it fills the rest of the parent width and allows the ImageView to have the space it needs to position itself to the right!

And finally, I’ll conclude with two screen shots which illustrate the difference between layout_gravity and gravity:

<?xml version="1.0" encoding="utf-8"?>
<!-- layout_gravity example -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="200px" >
     <TextView  
    	android:layout_width="wrap_content"
    	android:layout_height="100px"
    	android:gravity="center"
    	android:text="@string/hello" />
    </LinearLayout>
</LinearLayout>

Again, why it does not center horizontally escapes me, but from the image you can see that at least the TextView is centering itself vertically within its parent LinearLayout. Notice however that the text in the TextView is clipped to the top, and now notice what happens when we include android:gravity=”center” in the TextView from our previous example:

So you see the TextView centering its internal contents!

That’s it for now on working with layouts. Of course I can’t provide examples for every sort of layout but hopefully the ideas and concepts behind these examples will help you when you’re making your own custom layouts!

Happy coding.

– jwei