How to center text in textView in this case?

Question

I want to put the text in textView_title and textView_subtitle to the center of the screen. May I know what is a good way to do it? I tried android:layout_gravity and android:gravity and they do not work.

Below is the XML file with a constraint layout.

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView_login"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent">

            <TextView
                    android:id="@+id/textView_title"
                    android:lines="1"
                    android:ellipsize="end"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="@id/textView_subtitle"
                    tool:text="textView"/>

            <TextView
                    android:id="@+id/textView_subtitle"
                    android:lines="1"
                    android:ellipsize="end"
                    android:textColor="@color/foodDollarYellow"
                    android:textSize="12sp"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/textView_title"
                    app:layout_constraintBottom_toBottomOf="parent"
                    tool:text="textView"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <TextView
                android:id="@+id/textView_login"
                android:textAlignment="textEnd"
                android:text="註冊/登入"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                tool:ignore="HardcodedText"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

layout

Check this out https://stackoverflow.com/questions/432037/how-do-i-center-text-horizontally-and-vertically-in-a-textview — Atish Agrawal, Jan 29 '20 at 13:56
The gravity attribute only brings the text to the middle of the textView, not the center of the screen where I circled because there is a another textView on the right @atish — gd08xxx, Jan 29 '20 at 14:00

Tamir Abutbul · Accepted Answer · 2020-01-31T11:14:51.647

Add android:textAlignment="center" to your textViews and make the parent width equal to the screen width:

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="?attr/actionBarSize"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="1"
            android:text="text1"
            android:textAlignment="center"
            app:layout_constraintBottom_toTopOf="@id/textView_subtitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView_subtitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="1"
            android:text="text2"
            android:textAlignment="center"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView_title" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/textView_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="註冊/登入"
        android:textAlignment="textEnd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />



</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

If you want to avoid nesting you can achieve this using single layout:

   <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:text="text1"
        android:textAlignment="center"
        app:layout_constraintBottom_toTopOf="@id/textView_subtitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:text="text2"
        android:textAlignment="center"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textView_title" />


    <TextView
        android:id="@+id/textView_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="註冊/登入"
        android:textAlignment="textEnd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/textView_title"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

And it will look like this:

You can achieve this layout with or without nesting, but it is more recommended to avoid nesting when possible if you are using constaintLayout

Edit

This is the new layout: (I have added 1 Guildeline)

 <androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/constraintLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/textView_subtitle"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline2"
    app:layout_constraintTop_toTopOf="parent">


</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.7" />

<TextView
    android:id="@+id/textView_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="註冊/登入"
    android:textAlignment="textEnd"
    app:layout_constraintBottom_toBottomOf="@+id/textView_subtitle"
    app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
    app:layout_constraintStart_toStartOf="@+id/guideline2"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="MissingConstraints" />

<TextView
    android:id="@+id/textView_subtitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:text="long longggggggggggggggggggggggggggggggggggggggggg"
    android:textAlignment="center"
    android:textSize="12sp"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/textView_title"
    app:layout_constraintTop_toBottomOf="@+id/textView_title" />

<TextView
    android:id="@+id/textView_title"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:text="longggggggggggggggggggggggggggggggggg"
    android:textAlignment="center"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Here is how it will look:

this works but when the text in textView_title and textView_subtitle is too long, the text will cover textView_login — gd08xxx, Jan 31 '20 at 05:34

Wini · Answer 2 · 2020-01-29T14:20:02.883

Solution 1: add in your textview:

app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"

hence:

<TextView
    android:id="@+id/textView_login"
    android:textAlignment="textEnd"
    android:text="註冊/登入"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:ignore="MissingConstraints" />

Solution 2

use relative layout instead of constraint(im taking about the first constraint layout not second) then

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

<RelativeLayout

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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/relative"
 >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView_login"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/textView_title"
            android:lines="1"
            android:ellipsize="end"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/textView_subtitle"
      />

        <TextView
            android:id="@+id/textView_subtitle"
            android:lines="1"
            android:ellipsize="end"
            android:textColor="@color/foodDollarYellow"
            android:textSize="12sp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView_title"
            app:layout_constraintBottom_toBottomOf="parent"
  />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/textView_login"
        android:textAlignment="textEnd"
        android:text="註冊/登入"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_centerHorizontal="true"
        tools:ignore="MissingConstraints" />

</RelativeLayout>

android:layout_centerHorizontal="true" this line bring your textview in centretop

hope my answer helped...

How to center text in textView in this case?

2 Answers2

Edit