androidandroid-layouttextviewandroid-relativelayoutlayout-gravity

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


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.


Solution

  • 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>