Android: Vertical LinearLayout - Two image views, I want the bottom one to scale to be the width of the top one

I'm trying to get a vertical LinearLayout to display an imageview with a second imageview below it. I want the lower imageview to be the width of the top image view.

I'm trying the current layout xml:

            <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">   

                <ImageView
                android:id="@+id/image_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                />

                <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"> 
                    <ImageView
                    android:id="@+id/spacer"
                    android:layout_width="fill_parent"
                    android:开发者_运维百科layout_height="wrap_content"
                    android:background="@drawable/spacer"
                    />
                </LinearLayout>

            </LinearLayout>

The images will be displayed with a 'spacer' which is the full width of the screen, rather than the width of the image. The spacer is a fading edge graphic and I want it to be the same width as the image above it.

Note: the image for the top imageview is set programatically and could be a landscape or portrait image.

Anyone any thoughts on how to achieve this?

Thanks in advance!

A RelativeLayout will do. Use layout_below to achieve the vertical ordering and layout_widht="match_parent" to make the bottom image view as wide as possible with layout_alignLeft and layout_alignRight constraints:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:id="@+id/spacer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image_view"
        android:layout_alignLeft="@id/image_view"
        android:layout_alignRight="@id/image_view"
        android:background="@drawable/spacer" />

</RelativeLayout>

Sample output:

Using a slighly altered layout for demo purposes, warnings caused by missing contentDescriptions:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:background="#f00"/>

    <ImageView
        android:id="@+id/spacer"
        android:layout_width="fill_parent"
        android:layout_height="10dp"
        android:layout_below="@id/image_view"
        android:layout_alignLeft="@id/image_view"
        android:layout_alignRight="@id/image_view"
        android:background="#0f0" />

</RelativeLayout>

(Yes I know. Old question but no good answers and got bumped up by Community.)

Hey r3mo use the following code you can get what you want to achieve

<RelativeLayout android:layout_height = "fill_parent" android:layout_width = "fill_parent">
    <ImageView android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" android:id = "@+id/ImageView1"
        android:src = "@drawable/spacer"/>
    <ImageView android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" android:id = "@+id/ImageView2"
        android:src = "@drawable/spacer"
        android:layout_below = "@+id/ImageView1"/>
</RelativeLayout>

Use Table Layout Instead of Relative and LinearLayout To achieve this, as Table Layout Automatically provide same column with to all rows.