How to properly design a LinearLayout with TextViews on each side?

Question

I am trying to write a LinearLayout to be used as part of a ListView that displays two TextViews. One is the bank account name, and the other is the balance. I would like the account name to be on the left side of the layout and the balance to be on the right.

More specifically, I would like the balance to be right aligned, and the remaining space to the left will be used for the account name, but I haven't been able to figure it out. I've tried to use layout weights, but they don't work.

Here is the code that I have:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:id="@+id/accountNameTextView"
        android:layout_weight="2"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:textAppearanceSmall"
        android:id="@+id/accountBalanceTextView"
        android:layout_weight="1"/>
</LinearLayout>

But what happens is that both TextViews are placed together on the left side, leaving a bunch of white space to the right. How do I force the second TextView to be on the right side?

Answer 1

As soon as I posted this question I found the answer. Thank you to anyone who looked into this, but the problem was that the LinearLayout width was wrap content, so it would wrap the two TextViews next to each other. By changing it to this:

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

I was able to use the layout weights to achieve the design I wanted.

I also changed the layout weight slightly, here is what I have:

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:id="@+id/accountNameTextView"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:textAppearanceSmall"
        android:id="@+id/accountBalanceTextView"
        android:gravity="center_vertical"/>
</LinearLayout>

Answer 2

Try this code:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/accountBalanceTextView"
    android:textSize="30sp"
    android:id="@+id/accountNameTextView"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:textAppearance="?android:textAppearanceSmall"
    android:id="@+id/accountBalanceTextView"
    />
</RelativeLayout>

Answer 3

I suggest you to use RelativeLayout instead. Here is an example on how to do this in RelativeLayout

<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="${packageName}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="TextView" />

    <TextView
        android:id="@+id/gcmtv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/hello_world" />

</RelativeLayout>

But if you need to do this using LinearLayout, you can do something like this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${packageName}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView" />

    <TextView
        android:id="@+id/gcmtv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>

Answer 4

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/LinearLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal"
 android:weightSum=2>

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="tv1" />

<TextView
    android:id="@+id/tv2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/tv2" />

</LinearLayout>