LudvigH LudvigH - 3 months ago 33
Android Question

How to center text in android screen (not center in parent)

I want to center a small text in center of screen based on the default "Empty activity" as per code samples in Android Studio 2.1.

The layout xml file i use today is as provided below. I inflate it in the

OnCreate
method as normal through the
setContentView
, so the layout as defined in the xml dont fill the whole screen. Thus the
layout_centerInParent
will center my texts in the parent, but not center in screen. How do i get my text to center on screen, while keeping my action bar?

Illustration of problem
Centering in parent leads to "bad" position. Centering on screen would give "good" postion.

The problem. Centering in parent leads to "bad" position. Centering on screen would give "good" postion.

main_activity.xml

<?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:id="@+id/main_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.sara.internetcheck.MainActivity">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">

<TextView
android:id="@+id/text_header"
style="@style/TextAppearance.AppCompat.Headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="@string/good_news_title" />

<TextView
android:id="@+id/text_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_header"
android:text="@string/good_news_text" />
</RelativeLayout>
</RelativeLayout>

Answer

Use for example CoordinatorLayout. Elements in this layout has no relation between them so can be one on another.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/root_layout"
>

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="?attr/actionBarSize"
            android:text="Text not in center">

        </TextView>

    </RelativeLayout>


    <!-- This is centered TextView -->
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="?attr/actionBarSize"
        android:text="Text in center"
        >

    </TextView>
</android.support.design.widget.CoordinatorLayout>

Two important things:

  1. Centered TextView should be children of CoordinatorLayout
  2. To center in CoordinatorLayout use attribute android:layout_gravity="center"
  3. If we want exacly center we need to change margin because toolbar size is our not wanted difference for exactly center, i used android:layout_marginBottom="?attr/actionBarSize" to move TextView up by toolbar height.

Calculating screen and setting position programically is not good proposition, this can cause not wanted problems when for example user rotates screen.

Comments