How to center multiple Views together using ConstraintLayout? How to center multiple Views together using ConstraintLayout? android android

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.

enter image description here


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"