Set RelativeLayout child to fill unused space

Question

I have this layout:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/stat_brightness_off"
        android:layout_toLeftOf="@id/brightnessSeekBar" />

    <SeekBar
        android:id="@+id/brightnessSeekBar"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/brightnessSeekBar"
        android:src="@drawable/stat_brightness_on" />
</RelativeLayout>

I need the SeekBar to fill all the horizontal space, unused by ImageView's (they are about 64*64 px). What should I do?

Solution 1

Use the code provided below:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/stat_brightness_on" />

    <SeekBar
        android:id="@+id/brightnessSeekBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_toLeftOf="@id/img2"
        android:layout_toRightOf="@id/img1" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/stat_brightness_on" />

</RelativeLayout>

Solution 2

Set the SeekBar layout:

layout right of ImageView1, layout left of ImageView2, then set width to fill parent.

I believe that is what you're asking. You might also want to align ImageView1 parent left, and ImageView2 parent right.

Comments

[William]

In particular, the trick is to set the middle element to align to the left of the right element, and to the right of the left element.