How to center vertically the ConstraintLayout content in Android Studio?
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.
Related videos on Youtube
Igor
"Porque as pessoas que são loucas o suficiente para pensar que podem mudar o mundo, são as que de fato, mudam." - Steve Jobs
Updated on August 29, 2022Comments
-
Igor over 1 year
I'm begginer with Android Studio and I'm trying to center vertically content of
ConstraintLayout
, but without success. I've tried to useandroid:gravity="center"
and I removed theapp: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>
-
Jhonycage about 7 yearsjust to make clear you want to center the elements inside the constraint Layout or the constraint layout itself?
-