Home » Android » user interface – Vertically centering a view in Android

user interface – Vertically centering a view in Android

Posted by: admin April 23, 2020 Leave a comment

Questions:

I’m trying to center a View vertically on screen with the following layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <EditText 
        android:text="example text"  
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" />
</LinearLayout>

However it doesn’t work. The EditText is still at the top of the screen. Can someone explain what I’m doing wrong here?

NOTE: if I add center_horizontal to the layout_gravity attribute then it centers it horizontally, but still does not center vertically.

UPDATE: using android:gravity="center_vertical" on the parent worked. I still don’t understand why android:layout_gravity="center_vertical" on the child didn’t work.

How to&Answers:

I track the answer on Google groups, here it is © Romain Guy:

Well, first of all RelativeLayout ignores layout_gravity. Then you need to know that gravity means “apply gravity to the content of this view” whereas layout_gravity means “apply gravity to this view within its parent.” So on a TextView, gravity will align the text within the bounds of the TextView whereas layout_gravity will align the TextView within the bounds of its parent.

Answer:

The simple and quick answer is to add android:gravity="center_vertical" to the parent(containing) view. For those who want to know why, please refer to @Bostone ‘s answer.

Answer:

There are three ways you can center a view vertically. I recommend using the ConstraintLayout now.

1. Horizontal LinearLayout

The key is orientation=”horizontal”. You can’t center horizontally for orientation=”vertical”.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="example text"/>

</LinearLayout>

2. RelativeLayout

With a RelativeLayout you can use layout_centerVertical="true".

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="example text"/>

</RelativeLayout> 

3. ConstraintLayout

It is easiest to show you this one.

enter image description here

Here is the XML. It still would need a horizontal constraint to be added.

<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"
    tools:context="com.example.constraintlayout.MainActivity"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="example text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="16dp"/>

</android.support.constraint.ConstraintLayout>