Question

I’m making a layout (XML file) in Android that has two child views (one on the right side of the screen and one on the left). I want the view on the right to take up a pre-determined space (in dp) and have the view on the left take up all the remaining space up to a limit, at which point it will stop expanding and the two layouts will just move further apart as the screen gets larger.

The odd thing is this would be very easy if I wanted the view on the right side to be the one that expands, and the view on the left to be the one that takes up a preset space. If you set each view to the width you want (in a horizontal linear layout) Android will automatically shrink the one on the left in the event that both views don’t fit.

I would like to do this in one layout file; this layout is already designed for displays between sw512dp-land and sw765dp-land.

The code below would work if I could find a way to make Android shrink the layout on the left (when layouts both cannot fit at the size specified). But by default the system will shrink the layout on the right first.

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

<RelativeLayout
    android:id="@+id/left"
    android:layout_width="150dip"
    android:layout_height="fill_parent"
    android:background="@color/red" >
</RelativeLayout>

<LinearLayout
    android:id="@+id/right"
    android:layout_width="100dip"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@color/green" >
</LinearLayout>

This code (from @Lokesh) would work if I didn’t need the layout on the left to stop expanding at a certain point.

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

<LinearLayout
    android:id="@+id/left"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_toLeftOf="@+id/right"
    android:background="@color/red" >

</LinearLayout>

<LinearLayout
    android:id="@+id/right"
    android:layout_width="100dip"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@color/green" >
</LinearLayout>

It would also be nice to know if anyone thinks this isn’t possible so I can resort to doing it pragmatically or changing my approach to the layout.

Thanks!

Answer 1

This works for me. I’ve set the right layout to 100dip, change as per your needs.

<?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"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_toLeftOf="@+id/right"
        android:background="@color/red" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="100dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@color/green" >
    </LinearLayout>

</RelativeLayout>

EDIT 1: I used the background color just to distinctly show the layouts. Not necessary at all. 🙂

EDIT 2: If you want a way to expand the left layout upto only a limit then try this –

<?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"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_toLeftOf="@+id/right">
        <LinearLayout 
                            android:id="@+id/inner"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"         
            android:background="@color/yellow">

            <TextView
                android:id="@+id/myTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="This will expand only to a limit"
                android:maxWidth="300dip"
                android:textAppearance="?android:attr/textAppearanceLarge" 
                android:background="@color/red" />

        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="100dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@color/green" >
    </LinearLayout>

</RelativeLayout>

Here you need to place your widgets in inner layout and this is what it looks like in different screens.

3.1in HVGA

5.2in QVGA

Colors used : red(#FFFF00), yellow(#FFFFFF00), green(#FF00FF00).