Matt
Matt

Reputation: 4989

RelativeLayout Two TextViews Centered Above Buttons

So in my layout, I've got two buttons on the same line, one left aligned and one right aligned. I also have TextViews above the buttons to serve as labels, but they too are aligned left and right respectively. I'd like them to instead be centered above the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible.

Thanks in advance.

Upvotes: 1

Views: 2998

Answers (2)

Adinia
Adinia

Reputation: 3731

I've just tried with two levels of RelativeLayers, and here is the output: enter image description here

and the code:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/textView2"
            android:layout_centerHorizontal="true"
            android:text="Label longer than the button" >
        </TextView>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/textView1"
            android:text="Button short" >
        </Button>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativeLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/textView2"
            android:text="Button some longer" >
        </Button>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="Test" >
        </TextView>
    </RelativeLayout>
</RelativeLayout>

Upvotes: 2

DKIT
DKIT

Reputation: 3481

Create a tablelayout with 2 columns and 2 rows.

Make first and last columnn shrinkable, and middle column stretchable.

|----|-------------------|-----|
|  1 |                   |  2  |
|----|-------------------|-----|
|  3 |                   |  4  |
|----|-------------------|-----|

Put your labels at 1 and 2, and buttons at 3 and 4. Then center all column content.

Upvotes: 2

Related Questions