Fixed proportion of layout on screen

Question

In my app, I have 2 linear layouts: one at the top, one at the bottom.

I'd like that whatever is inside these layout, the layout of the top occupies 60% of the height of the screen and the layout of the bottom 40%. Here is my XML code:

   <?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"
    android:layout_weight="1.0" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.6"
        android:orientation="vertical" 
         android:id="@+id/layout_top">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="0.4" 
        android:id="@+id/layout_bottom">
    </LinearLayout>

</LinearLayout>

When these layouts are empty, no problem, they have the good proportion.

The problem is that if I put a small listview in the top layout for e.g. then the layout will take the size of the listview and won't preserve the 60/40% proportion.

I'd like that even if my listview is small (only 3 item for eg), the layout preserve it's 60% and so put some empty space under my listview.

I've tried to change android:layout_height to match_parent but it doesn't change anything.

Answer 1

Try using this Layout it works for me

<?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"
    android:layout_weight="1.0" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="6"
        android:orientation="vertical" 
         android:id="@+id/layout_top"
         android:background="#FF0000">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:orientation="vertical"
        android:layout_weight="4" 
        android:id="@+id/layout_bottom"
        android:background="#FF00FF">
    </LinearLayout>

</LinearLayout>

The trick is to set up a layout_height="0dip" instead of wrap_content in portrait mode and layout_with="0dip" instead of wrap_content in Landscape mode you can use layout-land folder for that.

Answer 2

layout_weight specify extra space in the layoutfot the view. you should try measuring your screen first like:

Display display = ((WindowManager) 
  getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
int width = display.getHeight();

and then doing some calculation like width*0.6 and 0.4 , this way your layout will always have 60 40 ratio.

Hope This Helps

Answer 3

try layout_height = 0dp in both the children LinearLayouts. Its happening because you have wrap_content which is probably overriding the layout_weight effect.

Answer 4

Simply in your parent layout, replace android:layout_weight="1.0" with android:weightSum="1.0"

This works by setting the weight sum of the parent layout and the weights of the children layouts. The weight of the children should be equal to the weight sum of the parent. Take a look at this http://blog.stylingandroid.com/archives/312