how to set width which is equal to another widget on android

Question

I need to draw a horizontal line below a text field such that the width of the line equals the text width (not the width of the full screen).

In my app I have a textview below a view(Horizontal line). The width of the line view should be equal to the width of the textview. I tried android:layout_width="wrap_content" and "match_parent", which does not solve the problem.

This is xml coding sample:

         ......
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="28dp"
            android:text="PopUpWindow"
            android:textAppearance="?android:attr/textAppearanceLarge" />


            <View
                android:id="@+id/separator"
                android:layout_width="wrap_content"
                android:layout_height="0.3dp"
                android:layout_below="@+id/textView1"
                android:background="#ffffff" />
             ......

image of the screen is:

enter image description here

please help me.

You could programmatically get the width of your textview, via its `LayoutParams`, then apply this width to your horizontal line, also using `LayoutParams`. You 'll find *lots* of examples for setting width in Java. — Sébastien, Apr 02 '12 at 13:54

score 96 · Accepted Answer · edited Jun 01 '16 at 10:11

96

If you use a RelativeLayout you can use the align-attributes:

<View
    android:id="@+id/separator"
    android:layout_width="0dp"
    android:layout_height="0.3dp"
    android:layout_below="@+id/textView1"
    android:layout_alignLeft="@+id/textView1"
    android:layout_alignRight="@+id/textView1"
    android:background="#ffffff" />

edited Jun 01 '16 at 10:11

Tim

41,901
18
127
145

answered Apr 02 '12 at 13:55

Jave

31,598
14
77
90

5

For better support for right-to-left layouts you should also add `android:layout_alignStart="@+id/textView1"` and `android:layout_alignEnd="@+id/textView1"` – Shishdem May 20 '15 at 10:36
what if I'm using LinearLayout? – Shirish Herwade Jan 12 '17 at 13:15
@ShirishHerwade Check out some of the other answers below. :) – Jave Jan 13 '17 at 08:19

Argus9 · Answer 2 · 2013-05-12T19:47:30.873

If you're using a Layout other than a RelativeLayout, you can match the widths of your widgets programmatically, such as in this example:

layout.xml:

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here's some text"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some more text"
        />
</LinearLayout>

Notice that both text fields are both set to wrap_content.

Main.java:

TextView tv1 = (TextView) findViewById(R.id.text1);
TextView tv2 = (TextView) findViewById(R.id.text2);

if(tv1.getWidth() < tv2.getWidth())
    tv1.setWidth(tv2.getWidth());
else
    tv2.setWidth(tv1.getWidth());

If you have multiple widgets that you want to have a uniform width, just repeat the above code for the new element. For example, let's say there was a button I wanted to adjust the width to, to match the other elements:

if(tv2.getWidth() < button)
    tv2.setWidth(button.getWidth());
else
    button.setWidth(tv2.getWidth());

Give it a try and let me know. It worked for me so it should work for you too. I believe it should also do the commands if your user rotates their device orientation, so no matter how they're using their device your views will look great. — Argus9, May 14 '13 at 16:35
OMG, I was looking for this for half of my day. Thanks @Argus9 — Swathi, Jun 10 '19 at 06:33

score 4 · Answer 3 · answered Jul 08 '16 at 13:21

If you don't want to use RelativeLayout then you can set parent's width to wrap content and parent's width will become equal to biggest child. Then you can set the width of the small child to match_parent and it'll match the width of required view.

  <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical|left"
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/navHeaderName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/profile_progress_bar"
            android:text="This is a large text"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />


        <ProgressBar
            android:id="@id/profile_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            android:progress="45" />
    </LinearLayout>

score 3 · Answer 4 · answered Apr 02 '12 at 14:12

Use RelativeLayout and use these two attribute in horizontal line view

 android:layout_alignLeft="@+id/textView1"     android:layout_alignRight="@+id/textView1"




<RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.23" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="67dp"
            android:text="this is TextView" />


        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="10dp"
            android:layout_alignLeft="@+id/textView1"
            android:layout_alignRight="@+id/textView1"
            android:layout_below="@+id/textView1"
            android:background="#FF0000"
            android:text="" />

    </RelativeLayout>

score 2 · Answer 5 · answered Dec 24 '14 at 19:35

What Jave said is correct - and the easiest, but what if you're not using a RelativeLayout to contain the View's ?

If you're customizing your UI within onCreate() then you'll find that obtaining the width from another widget will give you an incorrect result ! That's because the UI hasn't been set up yet.

But you can still set up your UI within onCreate... simply run code that executes after the UI is set up. This is achieved through use of the View.post() command.

The XML :

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center">

        <Button
            android:id="@+id/button_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:text="short string" />

        <Button
            android:id="@+id/button_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="this is a longer string" />

    </LinearLayout>

</RelativeLayout>

Java code:

private Button mButtonOne;
private Button mButtonTwo;

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    // inflate UI
    setContentView(R.layout.activity_example);

    // get references to UI elements
    mButtonOne = (Button)findViewById(R.id.button_one);
    mButtonTwo = (Button)findViewById(R.id.button_two);

    // Make buttons the same size (i.e. Button1.width = Button2.width)
    if ((mButtonOne != null) && (mButtonTwo != null))
    {
        mButtonOne.post(new Runnable()
        {
            @Override
            public void run()
            {
                mButtonOne.setWidth(mButtonTwo.getWidth());
            }
        });
    }
}

The result is that the Width of button_one will match the Width of button_two. This is a nicer look when the amount of text varies heavily between the two View's.

score 0 · Answer 6 · answered Apr 02 '12 at 13:57

It depends on your use case. If you plan to modify things in the layout dynamically and have them also sized the same as the TextView, you may want to wrap them in a parent view together. If it's a one-time thing, use RelativeLayout as suggested by the other answer here.

<LinearLayout android:orientation="vertical" ... > <!-- layout parameters as appropriate-->
<TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="28dp"
        android:text="PopUpWindow"
        android:textAppearance="?android:attr/textAppearanceLarge" />


        <View
            android:id="@+id/separator"
            android:layout_width="match_parent"
            android:layout_height="0.3dp"
            android:layout_below="@+id/textView1"
            android:background="#ffffff" />

 </LinearLayout>

score 0 · Answer 7 · answered Apr 02 '12 at 14:01

use following width attribute.

 <TextView
        android:id="@+id/textView1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="28dp"
        android:text="PopUpWindow"
        android:textAppearance="?android:attr/textAppearanceLarge" />


        <View
            android:id="@+id/separator"
            android:layout_width="150dp"
            android:layout_height="0.3dp"
            android:layout_below="@+id/textView1"
            android:background="#ffffff" />

how to set width which is equal to another widget on android

7 Answers7

Linked