17

I have three views in a ConstraintLayout and want to align then like this:

enter image description here

Right now views B and C form a vertical chain, and A is centered relative to the chain. But how do I align the entire group centered in the parent? Note that View C may be GONE.

Euro
  • 558
  • 2
  • 6
  • 10

2 Answers2

19

Here is a visual answer without nesting layouts.

enter image description here

Steps

  1. Chain and pack B and C vertically
  2. Chain and pack A and C horizontally
  3. Align B and C horizontal centers
  4. Center A vertically

XML layout

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="69dp"
        android:layout_height="67dp"
        android:background="#fb0000"
        android:gravity="center"
        android:text="A"
        android:textColor="#000000"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="154dp"
        android:layout_height="73dp"
        android:background="#2000ff"
        android:gravity="center"
        android:text="B"
        android:textColor="#ffffff"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="187dp"
        android:layout_height="61dp"
        android:background="#f1a500"
        android:gravity="center"
        android:text="C"
        android:textColor="#000000"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

</android.support.constraint.ConstraintLayout>

Personal opinion

Switch to Flutter. The layout is much easier than ConstraintLayout.

Suragch
  • 428,106
  • 278
  • 1,284
  • 1,317
  • 3
    If view C might be `GONE`, then I think it would be easiest to wrap B and C in a `LinearLayout` and then do the rest of the layout with constraints. That would also solve the potential problem where B is wider than C. – Suragch Oct 09 '17 at 08:26
  • Its really awesome – Lavekush Agrawal Apr 10 '18 at 12:06
  • Thanks for a clear visual explanation. *Could you please point a guide explaining how to accomplish this through XML-design?* (I could, ofcourse, repeat the actions you demonstrate above, and examine the resulting XML, but I'm looking for a generic, thorough explanation). – Bliss Mar 03 '19 at 13:39
  • @Bliss, sorry I don't have one at the moment. If you make one feel free to add another answer or edit this one. – Suragch Mar 03 '19 at 17:12
  • It is much harder to follow this that to simply look at the XML code in the layout. – Lii May 07 '19 at 12:34
1

The easiest and most understandable way to center the group is to make it a group by nesting the views within a ConstraintLayout that, itself, is nested in a ConstraintLayout as follows:

<android.support.constraint.ConstraintLayout 
    android:id="@+id/outerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/innerLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        [A, B, and C views here...]

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

The outer layout could be another type of ViewGroup such as LinearLayout using gravity.

Other solutions are possible such as a creative use of chains, barriers or guidelines, but the simplicity of the outlined solution is the most attractive in my opinion.

Cheticamp
  • 56,919
  • 9
  • 74
  • 121
  • Using multiple layouts defeats the whole purpose of `ConstraintLayout`s: "`ConstraintLayout` allows you to create large and complex layouts with a flat view hierarchy **(no nested view groups)**." – user3738870 May 01 '20 at 22:47
  • @user3738870 You are right about the benefits of _ConstraintLayout_. Suragch's solution breaks if "C" is made `gone` which the OP says can happen, so the solution has a flaw but is, otherwise, excellent. Think about posting an answer here if you have a way to do all that the OP specifies with 100% _ConstraintLayout_. – Cheticamp May 02 '20 at 01:48