How to keep a TextView center aligned within a RelativeLayout with mutliple TextViews

Question

I have this RelativeLayout with two TextViews, One with center aligned and the other end aligned,

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginEnd="@dimen/size_10dp"
                android:layout_marginStart="@dimen/size_10dp">

                <TextView
                    android:id="@+id/title_count_text"
                    fontPath="fonts/title_bold.ttf"
                    android:layout_width="wrap_content"
                    android:layout_height="60dp"
                    android:layout_alignParentEnd="true"
                    android:layout_gravity="center"
                    android:background="@color/background"
                    android:ellipsize="end"
                    android:gravity="center|center_vertical"
                    android:maxLines="1"
                    android:text="(0)"
                    android:paddingLeft="@dimen/size_5dp"
                    android:paddingStart="@dimen/size_5dp"
                    android:textColor="@color/textColorGrey"
                    android:textSize="@dimen/size_18dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/title_text"
                    fontPath="fonts/title_bold.ttf"
                    android:layout_width="wrap_content"
                    android:layout_height="60dp"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center"
                    android:ellipsize="end"
                    android:gravity="center"
                    android:maxLines="1"
                    android:text="This is a Sample Test"
                    android:textAlignment="center"
                    android:textColor="@color/textColorGrey"
                    android:textSize="@dimen/size_18dp"
                    android:textStyle="bold" />

            </RelativeLayout>

Looks something like this, Please find the image below,

Its working fine with small text length, but if I increase the text length it will overlap the counter text, Obviously the title_text is rendered after the title_count_text,

But if I add android:layout_toLeftOf="@+id/title_count_text" property to the title_text and change the width to match parent to make this TextView center aligned. the title_text will loose the center gravity.

Will look something like this, Please find the second attachment below

Although it might not be visible, but yeah its now shifted about the width of counter text to the left,

What i want to achieve is to preserve the center alignment of the title_textand when the text length is greater and it reaches the start of counter text view, it should clip the text and append ... to the end,

Any kind of help will be totally appreciated,

Thanks

TL:DR Not only center aligned but also needs to clip when it meets the counter text view, if text length is greater.

use linear layout and give weight 1 to 1st text view , max lines 1 — Manohar, Sep 27 '17 at 04:53
@Redman is right! No need to use relative layout, you just have to use liner layout and using its weight property you can make your textview in center. — Radhey, Sep 27 '17 at 04:58
Yea @Ankita, Not only center aligned but also needs to clip when it meets the counter text view, if text length is greater. — Sanoop Surendran, Sep 27 '17 at 05:09

score 1 · Answer 1 · answered Sep 27 '17 at 05:04

<TextView
                android:id="@+id/title_text"
                android:layout_toLeftOf="@+id/title_count_text"
                android:layout_alignParentLeft="true"
                fontPath="fonts/title_bold.ttf"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:text="This is a Sample Test"
                android:textAlignment="center"
                android:textColor="@color/textColorGrey"
                android:textSize="@dimen/size_18dp"
                android:textStyle="bold" />

I added the following two lines to your second text view to get the behavior you described:

android:layout_toLeftOf="@+id/title_count_text"
android:layout_alignParentLeft="true"

You may have to play around with the ellipsize settings though.

Yea.. Exactly.. How to make the ellipsize work.. Thats the ultimate question.. :( — Sanoop Surendran, Sep 27 '17 at 05:06

score 1 · Accepted Answer · answered Sep 27 '17 at 05:06

If you like then remove the padding of your Relative layout and add padding to title_text Textview

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    >

    <TextView
        android:id="@+id/title_count_text"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_alignParentEnd="true"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:gravity="center|center_vertical"
        android:maxLines="1"
        android:text="(0)"
        android:paddingLeft="@dimen/size_5dp"
        android:paddingStart="@dimen/size_5dp"
        android:textColor="@color/textColorGrey"
        android:textSize="@dimen/size_18dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:padding="16dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:gravity="center"
        android:maxLines="1"
        android:text="This is a Sample Test wehatb the  are u dongibng wjkl"
        android:textAlignment="center"
        android:textColor="@color/textColorGrey"
        android:textSize="@dimen/size_18dp"
        android:textStyle="bold" />

</RelativeLayout>

Finallyyyy!!... What magic did you use? lol :D Have been pulling my hair for the past 5 Hours. Thanks buddy. — Sanoop Surendran, Sep 27 '17 at 05:17

score 0 · Answer 3 · answered Sep 27 '17 at 05:02

0

As I mentioned above in above comment , use LinearLayout with width matchparent , orientation horizontal. Inside linear layout take 2 text views ,1st TextView width 0dp and weight 1, 2nd TextView width wrap content

answered Sep 27 '17 at 05:02

Manohar

22,116
9
108
144

Tired the same, Still the first textView is Shifted towards Left, – Sanoop Surendran Sep 27 '17 at 05:04
@Sanoop if you want ellipsize to work use `android:inputType="text"` in xml attribute – Manohar Sep 27 '17 at 05:08
Nop, Cant see any difference. :( – Sanoop Surendran Sep 27 '17 at 05:11

score 0 · Answer 4 · answered Sep 27 '17 at 05:07

Update title_text as following:

               <TextView
                android:id="@+id/title_text"
                fontPath="fonts/title_bold.ttf"
                android:layout_width="match_parent"
                android:layout_toLeftOf="@+id/title_count_text"
                android:ellipsize="end"
                android:layout_height="60dp"
                android:gravity="center"
                android:maxLines="1"
                android:text="This is a Sample Test"
                android:textColor="@color/textColorGrey"
                android:textSize="@dimen/size_18dp"
                android:textStyle="bold" />

The following 3 attributes are main to added:

                    android:layout_width="match_parent"
                    android:layout_toLeftOf="@+id/title_count_text"
                    android:ellipsize="end"

Also, remove :

                android:layout_centerInParent="true"
                android:layout_gravity="center"

score 0 · Answer 5 · answered Sep 27 '17 at 05:16

Try this :-

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginEnd="@dimen/size_10dp"
        android:layout_marginStart="@dimen/size_10dp">

        <TextView
            android:id="@+id/title_count_text"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="@color/background"
            android:textAlignment="center"
            android:ellipsize="end"
            android:maxLines="1"
            android:gravity="center"
            android:text="(0)"
            android:paddingLeft="@dimen/size_5dp"
            android:paddingStart="@dimen/size_5dp"
            android:textColor="@color/textColorGrey"
            android:textSize="@dimen/size_18dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:layout_gravity="end"
            android:maxLines="1"
            android:gravity="center"
            android:text="This is a Sample Test"
            android:textAlignment="center"
            android:textColor="@color/textColorGrey"
            android:textSize="@dimen/size_18dp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Noo.. @Ankita aa .. it doesnt work, what this bascially do i assign the allotted space for both textViews, it wont clip the textview. :( :( Thanks for the effort. — Sanoop Surendran, Sep 27 '17 at 05:19

score -1 · Answer 6 · answered Sep 27 '17 at 05:05

-1

Try this and let me know,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#ff0000"
    android:weightSum="1"
    >
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:text="test"
        android:gravity="center"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.2"
        android:text="0"
        android:gravity="center"/>

</LinearLayout>

answered Sep 27 '17 at 05:05

Radhey

2,139
2
24
42

Down voter! can you plz comment the reason before applying solution?Do not downvote without applying your logic here.. – Radhey Sep 27 '17 at 05:09
Nop Doesnt work @Radhey Have tried this but the text lenght is greater the title_Text is not clipping. – Sanoop Surendran Sep 27 '17 at 05:12
add android:singleLine="true" , to the textview. – Radhey Sep 27 '17 at 05:16
Thanks for your effort, Totally appreciate it, there are a lot of users whose agenda is to degrade and self promote. +1 for your effort!! Happy coding.. – Sanoop Surendran Sep 27 '17 at 05:23

score -1 · Answer 7 · edited Jun 20 '20 at 09:12

Try this:-

Add android:layout_toStartOf="@+id/title_count_text" and android:maxLines="2" to the TextView with id "@+id/title_text". It worked for me.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginEnd="@dimen/dp10"
android:layout_marginStart="@dimen/dp10">

<TextView
    android:id="@+id/title_count_text"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_alignParentEnd="true"
    android:ellipsize="end"
    android:gravity="center|center_vertical"
    android:maxLines="1"
    android:paddingLeft="@dimen/dp5"
    android:paddingStart="@dimen/dp5"
    android:text="(0)"
    android:textSize="@dimen/dp18"
    android:textStyle="bold" />

<TextView
    android:id="@+id/title_text"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:layout_toStartOf="@+id/title_count_text"
    android:gravity="center"
    android:maxLines="2"
    android:text="This is a Sample Test This is a Sample Test This is a Sample Test This is a Sample Test"
    android:textAlignment="center"
    android:textSize="@dimen/dp18" />

</RelativeLayout>

How to keep a TextView center aligned within a RelativeLayout with mutliple TextViews

7 Answers7