CODEWITHSUNDEEP
android
c12
c12

Reputation: 9827

Android TextView Align text to Right and Left

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>

Upvotes: 13

Views: 70787

Answers (6)

Carson Holzheimer
Carson Holzheimer

Reputation: 2963

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>

Upvotes: 0

daemontus
daemontus

Reputation: 1157

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.

Upvotes: 4

Mitul Goti
Mitul Goti

Reputation: 2619

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>

Upvotes: 1

Parthiban Thirumoorthy
Parthiban Thirumoorthy

Reputation: 36

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>

Upvotes: 1

Zaid Daghestani
Zaid Daghestani

Reputation: 8615

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!

Upvotes: 26

dymmeh
dymmeh

Reputation: 22306

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

Upvotes: 4

Related Questions