How to center multiple Views together using ConstraintLayout?
Take a look at my answer here.
ContraintLayout
contains a feature - Chains
- that makes it possible to implement what you are asking:
Chains provide group-like behavior in a single axis (horizontally or vertically).
A set of widgets are considered a chain if they a linked together via a bi-directional connection
Once a chain is created, there are two possibilities:
- Spread the elements in the available space
- A chain can also be "packed", in that case the elements are grouped together
As for your case, you'll have to pack your label
and description
TextViews and center them in you parent vertically:
(make sure you use a version of ConstraintLayout
that supports chains)
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="16dp" android:text="TextView" app:layout_constraintBottom_toTopOf="@+id/button" app:layout_constraintLeft_toRightOf="@+id/imageView2" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_chainStyle="packed"/> <TextView android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:text="Button\nMkay" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/imageView2" app:layout_constraintTop_toBottomOf="@+id/textView"/> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginTop="16dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@mipmap/ic_launcher"/> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@mipmap/ic_launcher"/> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:srcCompat="@mipmap/ic_launcher"/></android.support.constraint.ConstraintLayout>
Update 25-06-2019 (@Saeid Z):
Now in constraint layout 1.1.3 we must use app:layout_constraintHorizontal_chainStyle="packed"
instead of app:layout_constraintVertical_chainPacked="true"
Set app:layout_constraintVertical_bias="0.5"
to the views that need to be centered vertically, bias attribute only works if you specify the constraints for the boundaries (e.g. top and bottom for vertical bias, left and right for horizontal bias)
An example:
<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/constraintLayout"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="@id/constraintLayout" app:layout_constraintBottom_toBottomOf="@id/constraintLayout" app:layout_constraintVertical_bias="0.5" /></android.support.constraint.ConstraintLayout>
Got it working in my layout here: https://github.com/hidroh/tldroid/blob/master/app/src/main/res/layout/activity_main.xml, pretty much similar layout, though I position things at 1/3rd of screen height.
To center something vertically or horizontally, set an opposing constraint on the layout.
Centered Vertically
app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
Centered Horizontally
app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent"