CODEWITHSUNDEEP
androidandroid-layoutandroid-activity
Igor
Igor

Reputation: 673

How to center vertically the ConstraintLayout content in Android Studio?

I'm begginer with Android Studio and I'm trying to center vertically content of ConstraintLayout, but without success. I've tried to use android:gravity="center" and I removed the app:layout_editor_absoluteY of all the elements, but not happens... So, how can I centralize this?

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@layout/gradient"
    android:gravity="center"
    tools:context="com.test.test.MainActivity"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="0dp">

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:ems="10"
        android:hint="@string/lblEmail"
        android:inputType="textEmailAddress"
        android:textColorHint="@color/colorGray"
        android:background="@color/colorWhite"
        android:padding="15dp" />

    <EditText
        android:id="@+id/txtSenha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="@string/lblSenha"
        android:inputType="textPassword"
        android:textColorHint="@color/colorGray"
        android:background="@color/colorWhite"
        android:padding="15dp"
        app:layout_constraintTop_toBottomOf="@+id/txtEmail" />

    <Button
        android:id="@+id/btnEntrar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/lblEntrar"
        app:layout_constraintTop_toBottomOf="@+id/txtSenha" />

</android.support.constraint.ConstraintLayout>

Upvotes: 19

Views: 20745

Answers (1)

Lewis McGeary
Lewis McGeary

Reputation: 7922

ConstraintLayout is pretty flexible in the arrangements you can make, but from your description I think a "Packed Chain" would fit what your asking for.

A "Chain" means that all the Views in a line constrain to each other in both directions, so the top view constrains to the next view down and that next view constrains back up to the top view and so on down the chain. You then have some options for how the chain behaves. So in your example(extra stuff removed for simplicity):

<android.support.constraint.ConstraintLayout
 ....
 android:layout_width="match_parent"
 android:layout_height="match_parent">

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/txtSenha"
        app:layout_constraintVertical_chainStyle="packed" />

    <EditText
        android:id="@+id/txtSenha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toBottomOf="@+id/txtEmail"
        app:layout_constraintBottom_toTopOf="@+id/btnEntrar"/>

    <Button
        android:id="@+id/btnEntrar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toBottomOf="@+id/txtSenha"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

In a chain, the top view(or left for horizontal chains) is the "head" where you can change the behaviour of the chain, in this case the chainStyle is packed meaning the views all cram together. By default they will be packed in the centre of the screen, but you can change this by altering the attributes in the "head" view, eg app:layout_constraintVertical_bias="0.9" would put them 90% of the way down the screen instead.

More about chains (including diagrams) in the ConstraintLayout guidance here.

Upvotes: 30

Related Questions