Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a linearlayout filling remaining space in a relativelayout?

Tags:

I've got a relativelayout with three linearlayouts as children. The last one has a fixed height and has android:layout_alignParentBottom set to "true". While the middle one is properly positioned below the first one, it goes as far as the bottom of the screen, so that its lower part is overlapped by the third one.

What's wrong?

Thanks

<?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" >      <LinearLayout         android:id="@+id/category"         android:layout_width="fill_parent"         android:layout_height="50dp"         android:layout_alignParentTop="true"         android:orientation="horizontal" >          <ImageView             android:id="@+id/back_btn"             android:layout_width="29dp"             android:layout_height="34dp"             android:layout_gravity="center_vertical"             android:src="@drawable/red_arrow_left" />          <TextView             android:id="@+id/cat_name"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:layout_gravity="center_vertical"             android:gravity="center"             android:textSize="20sp" />     </LinearLayout>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_below="@+id/category"         android:layout_marginTop="10dp"         android:orientation="horizontal" >          <ListView             android:id="@+id/android:list"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white" />          <TextView             android:id="@+id/android:empty"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white"             android:padding="10dp"             android:text="@string/no_item" />     </LinearLayout>      <LinearLayout         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/nav_bar"         android:layout_width="fill_parent"         android:layout_height="40dp"         android:layout_alignParentBottom="true"         android:orientation="horizontal" >     //stuff      </LinearLayout> </RelativeLayout> 
like image 825
jul Avatar asked May 04 '11 08:05

jul


People also ask

What is the difference between RelativeLayout and LinearLayout?

LinearLayout means you can align views one by one (vertically/ horizontally). RelativeLayout means based on relation of views from its parents and other views.

How do I fix the view to the bottom of LinearLayout?

You can set the layout_height="0dp" of your header, footer and ScrollView and define a layout_weight . Just play around with the values until you find out which works best. The resulting heights of header and footer would dynamically change with the screensize.

How do I set gravity center in RelativeLayout?

To center something in a RelativeLayout, you use android:layout_centerInParent="true" on the child. If you try to center several childs, they'll end up under/over each other.


2 Answers

You could try using layout weights to control the relative sizes of the child layouts. There is an article on my blog which gives some information on the use of layout weights.

As an example, try this:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical" >      <LinearLayout         android:id="@+id/category"         android:layout_width="fill_parent"         android:layout_height="50dp"         android:orientation="horizontal" >          <ImageView             android:id="@+id/back_btn"             android:layout_width="29dp"             android:layout_height="34dp"             android:layout_gravity="center_vertical" />          <TextView             android:id="@+id/cat_name"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:layout_gravity="center_vertical"             android:gravity="center"             android:textSize="20sp" />     </LinearLayout>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_below="@+id/category"         android:layout_marginTop="10dp"         android:layout_weight="1"         android:orientation="horizontal" >          <ListView             android:id="@+id/android:list"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white" />          <TextView             android:id="@+id/android:empty"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white"             android:padding="10dp"             android:text="no_item" />     </LinearLayout>      <LinearLayout         android:id="@+id/nav_bar"         android:layout_width="fill_parent"         android:layout_height="40dp"         android:orientation="horizontal" >     //stuff      </LinearLayout> </LinearLayout> 

The RelativeLayout has been replaced by a LinearLayout, all of the relative positioning tags have been removed, and a layout_weight attribute has been added to the centre LinearLayout which will cause it to stretch to fill the available space.

like image 184
Mark Allison Avatar answered Oct 11 '22 10:10

Mark Allison


Nooo... the solution is much simpler! You forgot to say that you wanted the second linear layout to be above the third one :) Yes, the second linear layout must have BOTH android:layout_below="@+id/category" and android:layout_above="@+id/nav_bar". I tested it and it works.

But of course, you can use weights to achieve the same results, it is just going to be harder...

Here is your XML with the change I mentioned (tested it in eclipse):

<?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" >      <LinearLayout         android:id="@+id/category"         android:layout_width="fill_parent"         android:layout_height="50dp"         android:layout_alignParentTop="true"         android:orientation="horizontal" >          <ImageView             android:id="@+id/back_btn"             android:layout_width="29dp"             android:layout_height="34dp"             android:layout_gravity="center_vertical"             android:src="@drawable/red_arrow_left" />          <TextView             android:id="@+id/cat_name"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:layout_gravity="center_vertical"             android:gravity="center"             android:textSize="20sp" />     </LinearLayout>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_above="@+id/nav_bar"         android:layout_below="@+id/category"         android:layout_marginTop="10dp"         android:orientation="horizontal" >          <ListView             android:id="@+id/android:list"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white" />          <TextView             android:id="@+id/android:empty"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:background="@android:color/white"             android:cacheColorHint="@android:color/white"             android:padding="10dp"             android:text="@string/no_item" />     </LinearLayout>      <LinearLayout         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/nav_bar"         android:layout_width="fill_parent"         android:layout_height="40dp"         android:layout_alignParentBottom="true"         android:orientation="horizontal" > //stuff      </LinearLayout> </RelativeLayout> 
like image 31
Alexandru Cristescu Avatar answered Oct 11 '22 09:10

Alexandru Cristescu