Question

I do have a layout that contains a WebView and a Gallery on top. I would like to give the Gallery 20% of the screen always. The WebView should occupy the 80% always.

Usually this works with layout_weight in all my layouts where the higher value is the smaller view and 1 is the biggest view. In this layout it is completely different. Here I need to use a higher value for the bigger element and it doesn’t stay at fixed ratio.

Any help is highly appreciated.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical" >

    <Gallery 
        android:id="@+id/gallery"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:spacing="2dip" />       

    <View
        android:background="@android:color/white"
        android:layout_height="1dip"
        android:layout_marginTop="6dip"
        android:layout_width="fill_parent" />

    <WebView
        android:id="@+id/webview"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:layout_width="fill_parent" />
</LinearLayout>

Answer 1

Weight is used to distribute the extra space AFTER taking into account any height/width values set. For a vertical LinearLayout, if you want to ensure a 20/80 ratio (ignoring the separator), you should set a height of zero (doesn’t matter which unit) for the components. Otherwise, Android will take into account their height first and only distribute the remaining space in the ratio of the weights.

As an example, consider having a (horizontal LinearLayout) container with width 100 pixels, and two components both with weights 1, but with widths set to 10 pixels and 30 pixels respectively. To calculate their sizes we first subtract the widths from the container size: 100 – 10 – 30 = 60. Then we divide it up in the ratio of weights: 60 / (1+1) = 30, and distribute each part accordingly. The first view will have width 10+30 = 40, while the second view will have width 30+30 = 60, even though they had the same weight.

Try the following layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical" >

<Gallery 
    android:id="@+id/gallery"
    android:layout_height="0px"
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:spacing="2dip" />       

<View
    android:background="@android:color/white"
    android:layout_height="1dip"
    android:layout_marginTop="6dip"
    android:layout_width="fill_parent" />

<WebView
    android:id="@+id/webview"
    android:layout_height="0px"
    android:layout_weight="5"
    android:layout_width="fill_parent" />
</LinearLayout>