Horizontal layout with TextViews aligned to left and right

Question

I have the following view structure:

------------------------------------
||------------||------------------||
||Text View 1 ||  Long Text View 3||
||------------||------------------||
||------------||------------------||
||Text 2      ||  View 4          ||
||------------||------------------||
------------------------------------

I want the following behavior:

1. Left column is aligned to the left
2. right column is aligned to the right border as a group, but TextViews are aligned to the left.
3. A column extends and takes space as long as enough space remains for other column.
4. If it is not enough space to fit both columns completely, horizontal space is divided 1/2 and text views wrap lines.

I've almost achieved this with two vertical LinearLayouts nested into horizontal LinearLayout. But #3 is not satisfied. If I set weight = 1 for both left and right columns they occupy 50% at most, even if there is more space.

How can I achieve the desired layout?

I have read Aligning textviews on the left and right edges in Android layout and other answers. Relativelayout does not work - in case of text overflow one column just overlaps another. Or if I specify "toTheRightOf" it first left column completely and then tries to fit right column ending with single char per line vertical text.

My xml:

    <LinearLayout
            android:orientation="horizontal"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
        <LinearLayout
                android:id="@+id/leftTopPanel"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="1dp"
                android:gravity="left"
                android:layout_weight="1">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="very very very long text "
                    style="@style/InfoTextStyle.Big"
                    android:id="@+id/leftTopText"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/leftTopText2"/>
        </LinearLayout>
        <LinearLayout
                android:id="@+id/rightTopPanel"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="1dp"
                android:layout_weight="1"
                android:gravity="right"
                >
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Also very very very long text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/rightTopText"
                    android:layout_gravity="left"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Shorter text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/rightTopText2"
                    android:layout_gravity="left"/>
        </LinearLayout>
    </LinearLayout>

Answer 1

This code is running for you...

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

<RelativeLayout
    android:id="@+id/Sperator"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" >

</RelativeLayout>

<RelativeLayout
    android:id="@+id/FirstLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@id/Sperator" >

    <TextView
        android:id="@+id/tvFirstLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="TextView"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvFirstParagraph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/tvFirstLabel"
        android:text="ASFDNASKLCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/SecondLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/Sperator" >

    <TextView
        android:id="@+id/tvSecondLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="YourLongTextView"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvSecondParagraph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/tvSecondLabel"
        android:text="ASFDNASKLsdfnjsacjsbnfsbfjhsbfjdsbfjhsbvfjhsbvfjbskCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

</RelativeLayout>

ScreenShoot is ;

Answer 2

This is runnung.. Please try this..

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

    <RelativeLayout
            android:id="@+id/FirstLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:minWidth="100dp" >

            <TextView
                    android:id="@+id/tvFirstLabel"
                    android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="TextView"
            android:textSize="24sp" />

            <TextView
                    android:id="@+id/tvFirstParagraph"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@id/tvFirstLabel"
                    android:text="fasfdsfsdfsdcvzxfasd" />

    </RelativeLayout>

    <RelativeLayout
            android:id="@+id/Sperator"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/FirstLayout" >

    </RelativeLayout>

    <RelativeLayout
            android:id="@+id/SecondLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/Sperator"
            android:minWidth="100dp" >

            <TextView
                    android:id="@+id/tvSecondLabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:text="YourLongTextView"
                    android:textSize="24sp" />

            <TextView
                    android:id="@+id/tvSecondParagraph"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@id/tvSecondLabel"
                    android:text="ASFDNASKLsdfnjsacjsbnfsbfjhsbfjdsbfjhsbvfjhsbvfjbskCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

    </RelativeLayout>

</RelativeLayout>

I hope this is help you :)

Answer 3

Ok, the following code works for me. If you want to let panels grow more than 50% width replace android:layout_width="0dp" with android:layout_width="wrap_content" in two RelativeLayouts.

    <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/relativeLayout">
        <RelativeLayout
                android:id="@+id/leftTopPanel"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginRight="1dp">
            <LinearLayout android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:orientation="vertical"
                          android:layout_alignParentLeft="true">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="very very very very text "
                        style="@style/InfoTextStyle.Big"
                        android:id="@+id/leftTopText"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/leftTopText2"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
                android:id="@+id/rightTopPanel"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content">
            <LinearLayout android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:orientation="vertical"
                          android:layout_alignParentRight="true">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="long text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/rightTopText"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Shorter text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/rightTopText2"/>
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>