How to center horizontally 2 vertical views with ConstraintLayout

Question

I am trying to replicate this simple use case in ConstraintLayout. Basically it is 2 views left aligned to each other, but centered within parent.

Without CL, it would be as follows

FrameLayout
 match_parent
 match_parent

 LinearLayout
   orientation vertical
   width wrap_content
   height wrap_content
   layout_gravity center_horizontal
   gravity left

   View
    width wrap_content
   View
    width wrap_content

With CL im struggling how to center them both as a group, I can center them each, with constraints to left parent, right parent, however I want the group to be centered, and withing that group, left gravity. Ive tried using barriers to left and right of the two views, but it doesn center the chain horizontally. Basically I need a horizontal chain out of barriers, I think.

Edit:

I----AAA  ----I
I----BBBBB----I
I-------------I
I-------------I

Answer 1

You can do it programmatically:

xml:

<?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_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="28dp"
        android:background="#303F9F"
        android:text="Short Text"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="start" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="24dp"
        android:background="#303F9F"
        android:text="This is a very long text"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginRight="8dp"
        android:gravity="start" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

The background color is the see the change.

In code get width of the larger TextView and set it to the smaller one.

textView1 = findViewById(R.id.textView);
textView2 = findViewById(R.id.textView2);
textView1.measure(0,0);
textView2.measure(0,0);
int len1 = textView1.getMeasuredWidth();
int len2 = textView2.getMeasuredWidth();
if (len1 > len2) {
    textView2.getLayoutParams().width = len1;
} else {
    textView1.getLayoutParams().width = len2;
}

And you don't always have to use ConstraintLayout.

Answer 2

Maybe below code will address your problem

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text2 Test2 Test2"
    app:layout_constraintTop_toBottomOf="@id/centered"
    app:layout_constraintStart_toStartOf="@id/text1" />

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/centered"
    app:layout_constraintStart_toStartOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/centered"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.50" />

Answer 3

Assuming you have two views (view1 being the shorter but at the top and view2 being the longer but at the bottom).

You can do something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:apps="http://schemas.android.com/apk/res-auto">

    <View
        android:id="@+id/view1"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:background="@android:color/holo_blue_bright"
        apps:layout_constraintLeft_toLeftOf="@+id/view2"
        apps:layout_constraintTop_toTopOf="parent"
        apps:layout_constraintBottom_toTopOf="@+id/view2"
        apps:layout_constraintVertical_chainStyle="packed"
        />

    <View
        android:id="@+id/view2"
        android:layout_width="240dp"
        android:layout_height="30dp"
        android:background="@android:color/holo_blue_dark"
        apps:layout_constraintLeft_toLeftOf="parent"
        apps:layout_constraintRight_toRightOf="parent"
        apps:layout_constraintTop_toBottomOf="@+id/view1"
        apps:layout_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>

Do note layout_constraintVertical_chainStyle set to packed being used that would have both views pushed together.

Also, observe the constraints between both the views to enable it to be laid out the way you want. View2, in a way, is dictating to view1 on how it is centred. A good thing about using ConstraintLayout here is that you don't need to define an extra group (ViewGroup) just to lump the two views together, just define the constraints well enough and it will do its magic.

This will produce something like this:

I'm not sure if this is what you are looking for?