Android TextView Align text to Right and Left

Question

I'm trying to have a TextView that has two pieces of text, one aligned against the far left and one against the far right. I can put spaces between the two words, but I was wondering if there is a better technique?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@drawable/background_common"
    android:id="@+id/LinearLayout0123">

   <TextView
        android:layout_width="300dp"
        android:layout_height="40dp"
        android:textColor="@color/Black"
        android:textStyle="bold"
        android:textSize="15dp"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/selector_social_facebook_twitter"
        android:text="Right Text                                  Left Text" />
</LinearLayout>

score 26 · Accepted Answer · answered May 23 '12 at 17:39

Here's another method:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_common">
    <TextView
        android:text="Left Text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"/>
    <TextView
        android:text="Right Text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"/>
</FrameLayout>

Layout_gravity tells the parent where to put the child. In a FrameLayout, children can go anywhere and are unobstructed by other children. If there is overlap, the last child added is on top. Good luck!

But it doesn't work properly when you want to use back button to clear the entered text because when ever you focus edit text it set the cursor at the begging of entered text. — mahboub_mo, Sep 27 '17 at 12:34

score 4 · Answer 2 · answered May 23 '12 at 17:32

Why not have two textviews instead of jamming the text into a single textView

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="300dip"
    android:layout_height="fill_parent" 
    android:background="@drawable/background_common"
    android:id="@+id/LinearLayout0123">

   <TextView
        android:layout_weight="1"
        android:layout_width="0dip"
        android:layout_height="40dp"
        android:textColor="@color/Black"
        android:textStyle="bold"
        android:textSize="15dp"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/selector_social_facebook_twitter"
        android:text="Left Text" />

   <TextView
        android:layout_weight="1"
        android:layout_width="0dip"
        android:layout_height="40dp"
        android:textColor="@color/Black"
        android:textStyle="bold"
        android:textSize="15dp"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/selector_social_facebook_twitter"
        android:text="Right Text" />
</LinearLayout>

You can set android:gravity="right" on the right text box if you want the text to be aligned to the right

score 4 · Answer 3 · answered Jul 25 '17 at 17:01

If all you need is a single line (label: ... value, or something like that), you can actually achieve this using the Alignment span. The only problem is, that the span works for the whole paragraph, so you have to put your left/right texts into separate paragraphs and merge them using a "zero-line-height" span into one line.

Something like this:

public void setLeftRightText(TextView view, String left, String right) {
    SpannableString merged = new SpannableString(left + "\n" + right);
    merged.setSpan(
            new AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL),
            0, left.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    );
    merged.setSpan(
            new LineOverlapSpan(),
            left.length(), left.length() + 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    );
    merged.setSpan(
            new AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE),
            left.length() + 1, left.length() + 1 + right.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    );
    view.setText(merged);
}

Where the LineOverlapSpan is implemented like this:

public class LineOverlapSpan implements LineHeightSpan {
    @Override
    public void chooseHeight(final CharSequence text, final int start, final int end, final int spanstartv, final int v, final Paint.FontMetricsInt fm) {
        fm.bottom += fm.top;
        fm.descent += fm.top;
    }
}

See this answer for more details.

score 1 · Answer 4 · edited Jul 05 '17 at 10:25

This will definitely work for you...

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:text="Left Side"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dp"
        android:text="Right Side"
        android:textSize="15sp"
        android:textStyle="bold" />
</RelativeLayout>

Parthiban Thirumoorthy · Answer 5 · 2015-06-01T09:31:46.570

This might be better because it doesn't allow the texts to overlap.

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

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="start" />

    <TextView
        android:id="@+id/sub_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1
        android:layout_gravity="end" />
</LinearLayout>

score 0 · Answer 6 · answered Mar 07 '18 at 12:59

This is the simplest way I've found to do it. The trick is to use match_parent on the second text view so it takes up the remaining space and allows the gravity attribute to move the text to the end.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left Aligned" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:text="Right Aligned" />
</LinearLayout>

Android TextView Align text to Right and Left

6 Answers6

Linked