Android wrap_content too wide when centred text of TextView is long

Question

You can use either layout_gravity or gravity for text centring. With layout_gravity:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:breakStrategy="balanced"
/>

Short stretches of text will be displayed as:

[          Hello          ]

While long stretches will be: (A)

[ One lemming looking     ]
[ up.                     ]

So you might add:

    android:gravity="center"

And you'll get: (B)

[   One lemming looking   ]
[           up.           ]

However, I want to achieve this: (C)

[   One lemming looking   ]
[   up.                   ]

A does not look good, because text does not appear centred. This is especially true if there are more centred elements in the layout.

B does not look good, because the very short word "up" was put into the centre. Even if the text is longer, it doesn't look good, because the text has two jagged edges (left + right) instead of just one (to the right).

C is the same as A, but correctly centred. The reason why A does not look centred is because wrap_content assumes the width of the TextView is as wide as the parent's when the text wraps on another line, and does not compute the actual width of the block of text.

So, how do I achieve C? Is it possible?

Here's the full layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
/>
<TextView
    android:id="@+id/primary_form"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="start"
    android:textAppearance="@style/TextAppearance.AppCompat.Headline"
    android:textColor="@color/text_primary_on_lt"
    android:breakStrategy="balanced"
    tools:text="Primary form adfahdkahdfa "
/>
<TextView
    android:id="@+id/secondary_form"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="8dp"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    android:textColor="@color/text_secondary_on_lt"
    android:textStyle="italic"
    android:typeface="serif"
    android:breakStrategy="balanced"
    tools:text="Secondary form"
/>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
/>
</LinearLayout>

IMO, Simplest way to achieve this is to put all textviews with "left" tag in vertical linear layout which has "centre" tag and "wrap_content" width. — Dexter, Feb 05 '17 at 09:19
@Dexter Hm, no, doesn't work. My TextViews actually are inside a LinearLayout already. What you'll get is (A). — digory doo, Feb 05 '17 at 09:23
@pskink: I can't use fixed padding, because I don't know the text's length, so the padding might be a waste of available space. — digory doo, Feb 05 '17 at 09:25
Can you provide full xml (at least TextView part)? from current data, I am not able to visualize your UI. — Dexter, Feb 05 '17 at 09:27
so why do you want "3 space" padding on the left and on the right? (picture C) why it is 3 spaces, why not 4 or 5? — pskink, Feb 05 '17 at 09:28
@pskink: I want the textview to centre texts that occupy a single line only, while having the textview left-align longer texts, but the textview itself is to be centred. — digory doo, Feb 05 '17 at 09:30
but in C the text "One lemming looking up" could fit one line, so why two lines? — pskink, Feb 05 '17 at 09:31
@pskink: No, it doesn't fit, but the character-based example might not visualize it well enough. — digory doo, Feb 05 '17 at 09:33

Dexter · Accepted Answer · 2017-02-05T10:01:15.983

You can solve this in multiple ways, but I will show you two ways, First with old school linear layouts

<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"
    android:layout_marginLeft="32dp"
    android:layout_marginRight="32dp"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/primary_form"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:breakStrategy="balanced"
            android:gravity="start"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            tools:text="Primary form adfahdkahdfa " />

        <TextView
            android:id="@+id/secondary_form"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:breakStrategy="balanced"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:textStyle="italic"
            android:typeface="serif"
            tools:text="Secondary form" />
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

Now with latest constraint layout. This is more robust and recommended way. Assuming you want your primary text in middle and secondary text just below it,

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="32dp"
    android:layout_marginRight="32dp"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:breakStrategy="balanced"
        android:gravity="start"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintBottom_toTopOf="@+id/guideline16"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="Primary form adfahdkahdfa " />

    <TextView
        android:id="@+id/secondary_form"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:breakStrategy="balanced"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="italic"
        android:typeface="serif"
        app:layout_constraintLeft_toLeftOf="@+id/textView"
        app:layout_constraintTop_toTopOf="@+id/guideline16"
        tools:text="Secondary form" />


    <android.support.constraint.Guideline
        android:id="@+id/guideline16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50793654"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="288dp" />

    <FrameLayout
        android:id="@+id/layout1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/secondary_form" />

    <FrameLayout
        android:id="@+id/layout2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Ah, I see. Double nesting. Not very elegant, but seems to work! Thanks! — digory doo, Feb 05 '17 at 09:34
Hm, no doesn't work, I'm afraid. Texts are no longer centred. primary_form and secondary_form should act independently, too. — digory doo, Feb 05 '17 at 09:44
After playing around a bit, my conclusion is that your solution is better than what I actually wanted to achieve. :) — digory doo, Feb 05 '17 at 09:51
@digorydoo : in case you don't want nested linear layouts. I have updated answer :) — Dexter, Feb 05 '17 at 10:01
Thanks. I already did something similar with a RelativeLayout instead of a ConstraintLayout. — digory doo, Feb 05 '17 at 10:18

Android wrap_content too wide when centred text of TextView is long

1 Answers1