How to place two views center horizontal in ConstraintLayout?

Question

In ConstraintLayout I need to assume two views as a group and place this group center horizontal in the parent like the below image:

This is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

I've already seen This Answer but it works when the two views have the same width. My Views have not the same width, so Guideline won't work!

How can I do this?

Possible duplicate of [How to center the elements in ConstraintLayout](https://stackoverflow.com/questions/43143468/how-to-center-the-elements-in-constraintlayout) — Alireza Bideli, Sep 21 '19 at 07:27
@SaranSankaran: Yeas I did. I added the code to the post. Can you take a look at it? — Alireza Noorali, Sep 21 '19 at 07:58
@AlirezaBideli it works when the two views have the same width. My question is not a duplicate. — Alireza Noorali, Sep 21 '19 at 07:59
you want to do both textview in center ? If you have image what type of view you want please post it — Shweta Chauhan, Sep 21 '19 at 08:21
I have added my answer and let me know if it's not match to your goal image. I will edit it. — Shweta Chauhan, Sep 21 '19 at 08:38
@ShwetaChauhan Thank you for your time. the Pawel's answer was simple and it worked. — Alireza Noorali, Sep 21 '19 at 09:16
okay NP. but if one textview size increase then it will not stay in the center. or maybe I understood your question wrong. — Shweta Chauhan, Sep 21 '19 at 09:21
@ShwetaChauhan I'll check this out and let you know. Thanks again for your guidance — Alireza Noorali, Sep 21 '19 at 09:23
@ShwetaChauhan I made the width and responded quite correctly — Alireza Noorali, Sep 21 '19 at 09:27

score 19 · Accepted Answer · answered Sep 21 '19 at 08:51

Your approach is good, but there's an error in how you specify the constraints. You can only set one start and one end constraint for each View, so you need to remove

app:layout_constraintEnd_toEndOf="parent"

from the first TextView and

app:layout_constraintStart_toStartOf="parent"

from the second because they are causing the chain to be invalid.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Thank you man, I think my brain is tired of working. I made a ridiculous mistake — Alireza Noorali, Sep 21 '19 at 09:37

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You can achive your view using guidline and barrier.

Take vertical guildline in center. After left textview start constraint to barrier1 and right textview end constraint to barrier2.

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_50sdp"
        android:layout_marginEnd="@dimen/_5sdp"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="left"
        app:constraint_referenced_ids="view_a" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:layout_marginStart="@dimen/_5sdp"
        android:text="View B"
        app:layout_constraintEnd_toStartOf="@+id/barrier2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintBottom_toBottomOf="@id/view_a"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@id/view_a" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="view_b" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

How to place two views center horizontal in ConstraintLayout?

2 Answers2