How to make multiple Views the same Width?

Question

As part of a larger UI, I have a RelativeLayout with three Views that I would like to have the same width. The three views are "stacked" on top of each other like this

1. ImageView
2. TextView
3. ImageView

I've tried various things such as setting the Views' android:layout_width to "wrap_content", setting android:layout_width to "0px" and android:layout_weight to "1" as suggested by this answer, and placing the Views in a LinearLayout with no success.

How can I get these three views to be the same width?

Relevant portion of the layout xml:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="0px"
    android:layout_weight="1">
        <ImageView
            android:layout_above="@string/window_text"
            android:layout_below="@string/eighteen_id"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:paddingTop="5dp"
            android:layout_alignParentRight="true"
            android:paddingBottom="5dp"
            android:src="@drawable/line1"
            android:id="@string/line_1_id"/>
        <TextView
            android:layout_above="@string/line_2_id"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:gravity="right"
            android:layout_centerVertical="true"
            android:textColor="#000000"
            android:id="@string/window_text"/>
        <ImageView
            android:layout_above="@string/top_row_id"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingTop="5dp"
            android:paddingBottom="10dp"
            android:src="@drawable/line1"
            android:id="@string/line_2_id"/>
</RelativeLayout>

Answer 1

This is very simple, see below. The "magic" is simple. Set the parent to wrap_content, and the child views to fill parent. The smaller child views then always get set to the size of the largest child view.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/bottom_row"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/view1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="123" />

        <Button
            android:id="@+id/view2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="more text" />

         <Button
            android:id="@+id/view3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="even more text" />
    </LinearLayout>
</RelativeLayout>

Answer 2

Did you try setting android:layout_width="fill_parent" for the two image views, just like you have it for the TextView? If you want the three views to be the width of the widest, you can wrap all three in a LinearLayout that has android:layout_width="wrap_content".

Answer 3

You can get the image views to fill the parent width by setting android:scaleType="" in the ImageView but if the text doesn't fill the screen width and you want the image width to match the text width exactly, you'll have to do it programatically by getting the text views width and then setting the imageview's width to that.