How to create a layout where a Button is at least as long as a TextView?

Question

I am trying to achieve the following:

• I need to place a Button view somewhere in the layout
• There should be TextView right above this Button that is uses as label
• The size of the Button should depend on the size of the TextView. Since the app is localized the text width is not fixed but depends on the localized text that is uses as label.
• The Button should have a min. width of 150dp. If the width of the TextView is bigger than this, the Button should have the same width as the TextView.

This should look something like this:

Short Label
+-------------+
+-------------+

Very Long Label Text
+------------------+
+------------------+

I tried different solutions with LinearLayout or RelativeLayout as root layout but the problem is always the same: I was not able to fit the width of the Button to the width of the TextView. Giving the Button a minWidth of 150dp is no problem of course. But how to solve the second case with the long label?

<SomeRootLayout ...>
    <!-- also tried LinearLayout, but problem is the same... -->
    <RelativeLayout
        android:id="@+id/editTextAndLabelContainer"
        ...>

        <TextView
            android:id="@+id/labelTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A " />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/labelTV" />
    </RelativeLayout>
</SomeRootLayout>

If the Button has a "match_parent" width the width is not aligned the the TextView but set to the complete screen width.

How can I solve this?

Answer 1

Ok..do something like: layout:

 <LinearLayout
    android:id="@+id/editTextAndLabelContainer"
    android:weightSum="2"
    ...>

    <TextView
        android:id="@+id/labelTV"
        android:layoutWeight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A " />

    <Button
        android:id="@+id/button"
        android:layoutWeight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/labelTV" />
</LinearLayout>

Or as suggest by Lena..

And in your Java code: Add a TextWatcher in your textview ontextchange method..and in side after textchange method do something like:

int txtWidth = your_textViw.getWidth();
int btnWidth = your_button.getWidth();

if(txtWidth >= btnWidth)
  your_button.setWidth(txtWidth);

Answer 2

<RelativeLayout
        android:id="@+id/editTextAndLabelContainer"
        ...>

        <TextView
            android:id="@+id/labelTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A " />

        <Button
            android:id="@+id/button"
            android:layout_alignLeft="@+id/labelTV" //<== add this line
            android:layout_alignRight="@+id/labelTV" //<== add this line
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/labelTV" />
    </RelativeLayout>