Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make multiple Views the same Width?

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>
like image 313
Wesley Wiser Avatar asked Jan 16 '11 21:01

Wesley Wiser


2 Answers

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>

alt text

like image 64
user432209 Avatar answered Nov 11 '22 12:11

user432209


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".

like image 33
Ted Hopp Avatar answered Nov 11 '22 13:11

Ted Hopp