Center a TextView on a Android Screen

This article covers centering a View in an Android layout. Prior to the introduction of ConstraintLayout centering a View was not neccessarily intuitive. This short article covers the XML attributes to center a TextView in a layout other then ConstraintLayout. (Note that in British English center is spelt centre).

For many Android apps the screens are designed using layouts. Prior to the introduction of the ConstraintLayout nested layouts would be required to implement certain designs. Whilst ConstaintLayout improves performance and simplifies nesting, the early design support for ConstaintLayout in Android Studio was poor. Fortunately that is improving with each new release of Studio. However, for simple screens the older layout types, such as RelativeLayout and LinearLayout, can still be useful.

Centering in ConstraintLayout

When a new project is created in Android Studio, and an Empty Activity is chosen in the Create New Project wizard, the activity_main.xml has a ConstraintLayout with a centered TextView:

In this default ConstraintLayout the defined constraints cause the TextView to be centered.

...
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
...

For move information on the ConstraintLayout see Build a Responsive UI with ConstraintLayout at Android Developers.

But what about centering a TextView in the older Android layouts?

Understand How Layouts Center Views

Setting the correct XML attributes to move a ViewGroup or widget (View) to the middle of the app’s display is easier if you know how Android screens are laid out for the older layouts. Everything on the screen is built up in rectangles, starting with the screen itself. A LinearLayout (which is a ViewGroup) sitting on the screen is a rectangle, a TextView in the LinearLayout is a rectangle.

Each rectangle has two sets of layout attributes associated with it, attributes that refer to its contents, and attributes that refer to its parent's layout requirements. For the parent's layout requirements the attributes all start with layout_. Think of them as attributes that lay outside of the rectangle. The number of layout_ attributes that a widget, such as a TextView, can access will vary depending upon the ViewGroup it is inside.

The two layout_ attributes that are always required are android:layout_width and android:layout_height. These are set to tell the parent ViewGroup how big the rectangle should be to contain the child widget or ViewGroup. These are usually set to either match_parent (in earlier Android releases called fill_parent), which lets the ViewGroup decide how big the rectangle should be (usually as big as possible), or wrap_content which makes the rectangles just big enough to hold the View that is inside of them. However, they can also be set to physical dimensions, such as setting layout_height to 40px to make the View’s height 40 pixels high.

What if a TextView needed to be centered in a RelativeLayout. Looking at the various layout attributes for the TextView it would appear that android:layout_gravity="center" would work. However, this has no effect because the default RelativeLayout arranges child Views based on each ones position. Instead, to center the TextView set android:gravity="center" for the RelativeLayout itself. Because the android:gravity attribute does not start with layout_ it refers to the RelativeLayout contents, in this case the TextView. This time centering works, provided the TextView’s android:layout_width and android:layout_height are set to wrap_content, making it small enough to be moved to the central location.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!" />    
</RelativeLayout>

For this very simple layout the LinearLayout is identical.

<?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="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!" />
</LinearLayout>

See Also

• Layouts article at the Android Developers documentation.
• See the Android Example Projects page for lots of Android sample projects with source code.
• For a full list of all the articles in Tek Eye see the full site alphabetical Index.