How to center vertically the contents of ConstraintLayout in Android Studio?

Question

I am starting with Android Studio and I am trying to center the vertical contents of ConstraintLayout , but to no avail. I tried using android:gravity="center" , and I removed the app:layout_editor_absoluteY all the elements, but not like that ... 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> 

Answer 1

ConstraintLayout is quite flexible in the settings you can do, but from your description, I think the “Packed Chain” would fit your needs.

“Chain” means that all Views in a row are compressed to each other in both directions, so the top view limits the next view down, and the next view holds back up to the top view, etc. down the chain, then you have some options for how the chain behaves. So in your example (excess material 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 behavior of the chain, in this case chainStyle is packed , which means that all the images merge together. By default, they will be packed in the center of the screen, but you can change this by changing the attributes in the "head" view, for example, app:layout_constraintVertical_bias="0.9" will put them 90% down the screen.

Read more about circuits (including diagrams) in the ConstraintLayout manual here.