To center a text in the middle of your Android device screen, you need to set the right attributes in your XML layout.
What attributes to set inside your XML depends on what view type you’re using in your application.
This tutorial will help you learn how to center a text in a TextView
widget when using ConstraintLayout
, LinearLayout
, or RelativeLayout
view.
Let’s start with ConstraintLayout
first.
How to center text in Android using ConstraintLayout view
When you’re creating an activity using the ConstraintLayout
view, you can position your TextView
widget at the center of the layout by setting the layout_constraint
properties on the four sides of the TextView
.
Here’s an example of a TextView
centered inside a ConstraintLayout
:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Hello World!" />
</androidx.constraintlayout.widget.ConstraintLayout>
The layout_constraint
properties set on the four sides will pull the TextView
widget to the center of the layout.
How to center text in Android using LinearLayout view
When you have a LinearLayout
view, you can center the TextView
widget by setting the layout_width
and layout_height
attributes of the TextView
to match_parent
and the gravity
attribute to center
.
Here’s an example of the XML layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello World from Android" />
</LinearLayout>
You can also center multiple TextView
widgets by using the layout_weight
attribute.
The example below shows how to add the layout_weight
attribute to each TextView
widget and setting the value to 1
:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello World from Android" />
<TextView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello World from Android" />
</LinearLayout>
The code above will place two TextView
widgets horizontally inside the layout.
If you want the first TextView
widget to be above the second, you need to set the orientation
of the LinearLayout
to vertical
:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
Now you’ve learned how to center texts in a LinearLayout
view. Let’s see how to center a text in a RelativeLayout
view next.
How to center text in Android using RelativeLayout view
To center a text in a RelativeLayout
view, set the TextView
attribute as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hello World from Android" />
</RelativeLayout>
The layout_width
and layout_height
needs to be set to wrap_content
so that the size of the TextView
matches its content, and the layout_centerInParent
will center the TextView
widget relative to the parent view.
Since RelativeLayout
is used to display child views in relative position, it’s not ideal for placing two elements centered in the screen. I’d recommend you use LinearLayout
view for multiple centered child views.
And that’s how you can center a text when developing Android applications 😉