Overlapped Textview when text size increased + RelativeLayout

Question

I have tried everything but not succeed yet.

What Happening. When title text is small it should come in center of parent which works perfectly, but when text size is big its overlapped to its left sided component

What i want : it shouldn't not overlap but comes to next of settings Textview. it should be adjust when size increased.

small size

big size

Code

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@android:color/darker_gray" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Settings"
            android:gravity="center_vertical"
            android:layout_alignParentLeft="true"
            android:textColor="@android:color/holo_orange_dark"
            android:textSize="16.0sp" />


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
            android:padding="4dp"
            android:gravity="center"
            android:layout_toLeftOf="@+id/txtBack"
            android:textColor="@android:color/white"
            android:textSize="19sp" />
</RelativeLayout>

why are you using relative layout instead of work will relative layout. — dex, Mar 15 '16 at 07:37

score 1 · Accepted Answer · answered Mar 15 '16 at 07:46

Because you are using match_parent for those two TextViews, that is why they will being overlapped, based on your code, you can try to add a fix padding for the second TextView. For example, we consider the width of the first TextView's text "Settings" is 100dp, so we can change the code as below.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@android:color/darker_gray" >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Settings"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="16.0sp" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:paddingLeft="100dp"
        android:paddingRight="100dp"            
        android:gravity="center"
        android:layout_toLeftOf="@+id/txtBack"
        android:textColor="@android:color/white"
        android:textSize="19sp" />
</RelativeLayout>

thanks its help me but it must be single line. and string should be visible not dot dot — Kishore Jethava, Mar 15 '16 at 08:23
Understand, then I think you need to use auto scale text view, here is what you need. http://stackoverflow.com/a/5535672/1297615 — BobGao, Mar 15 '16 at 08:42

score 0 · Answer 2 · answered Mar 15 '16 at 07:40

set id to your first TextView and then make second TextView toRightOf first one.

Like This

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@android:color/darker_gray" >


    <TextView

        android:id="@+id/textview1"

        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Settings"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="16.0sp" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:layout_toRightOf="@id/textview1"

        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:padding="4dp"
        android:gravity="center"
        android:layout_toLeftOf="@+id/txtBack"
        android:textColor="@android:color/white"
        android:textSize="19sp" />
</RelativeLayout>

I hope this will help.

score 0 · Answer 3 · answered Mar 15 '16 at 07:44

Try this,

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@android:color/darker_gray" >


    <TextView
        android:id="@+id/txtSetting"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Settings"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="16.0sp" />


    <TextView
        android:layout_toRightOf="@+id/txtSetting"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:padding="4dp"
        android:gravity="center"
        android:layout_toLeftOf="@+id/txtBack"
        android:textColor="@android:color/white"
        android:textSize="19sp" />
</RelativeLayout>

score 0 · Answer 4 · answered Mar 15 '16 at 07:45

Use layout_toLeftOf ,alignParentLeft and alignParentRight

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Settings"
        android:id="@+id/txtBack"
                  android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
                android:layout_toLeftOf="@+id/selectaccount"
        android:textColor="@android:color/holo_orange_dark"
       android:textAppearance="?android:attr/textAppearanceMedium" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:padding="4dp"
        android:gravity="center"
        android:layout_alignParentRight="true"

        android:textColor="@android:color/white"
        android:textAppearance="?android:attr/textAppearanceMedium" />

what about when text is small sized.?? either small or big it should comes in center of parent — Kishore Jethava, Mar 15 '16 at 07:51

score 0 · Answer 5 · answered Mar 15 '16 at 07:45

Just Replace Your Code By Below:

<RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:background="@android:color/darker_gray" >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Settings"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="16.0sp"
        android:id="@+id/txtSettings" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:padding="4dp"
        android:gravity="center"
        android:layout_toRightOf="@+id/txtSettings"
        android:layout_toLeftOf="@+id/txtBack"
        android:textColor="@android:color/white"
        android:textSize="19sp" />
 </RelativeLayout>

but it not center of parent (relativelayout). try with 4 text word — Kishore Jethava, Mar 15 '16 at 07:48
One more thing are you using txtBack ??? as In current code I am not able to see txtBack declared.. So please check it and if you are not using then let me know . — Vickyexpert, Mar 15 '16 at 08:12

score 0 · Answer 6 · answered Mar 15 '16 at 08:01

change second textview to this:

<TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hiiiiiiiiiiiii StackOverflower!!!!!!!!!!!"
        android:padding="4dp"
        android:gravity="center"
        android:layout_toRightOf="@+id/firstTextview"
        android:textColor="@android:color/white"
        android:textSize="19sp" />

Overlapped Textview when text size increased + RelativeLayout

6 Answers6