Search code examples
androidandroid-constraintlayout

Center horizontally group of elements inside the ConstraintLayout

I have to place three components inside the constraint layout: image, and on the right of the image two textviews one above other. Both text views are centered along the image. enter image description here They all together should be centered horizontally inside.

There is my code :

   <com.google.android.material.card.MaterialCardView
    android:id="@+id/downloadPlan"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:clickable="true"
    android:focusable="true"
    app:cardBackgroundColor="@color/orange"
    app:cardCornerRadius="32dp"
    app:cardElevation="0dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="12dp"
        android:paddingBottom="12dp">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginEnd="12dp"
            android:adjustViewBounds="true"
            android:contentDescription="@null"
            android:src="@drawable/ic_download"
            android:tint="@color/violet"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintEnd_toStartOf="@id/title"
            app:layout_constraintHorizontal_bias="0.4"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/violet"
            android:textSize="14sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/icon"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/size"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/violet"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@id/title"
            app:layout_constraintTop_toBottomOf="@id/title" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

Is it possible to achieve this centering without the adding of nested layout?

Solution

    1. First arrange the title and size TextView vertically in the parent. You can use chaining to center them vertically in the parent with packed chain style.

    2. Then arrange the icon wrt to the title and make them horizontally center again with packed chain style.

    3. Finally, instead of centering two TextView to be in center with the Icon, you can make the Icon to be in center with the two TextView.

    Below is the final code, ignore colors and icon drawable.

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="12dp"
            android:paddingBottom="12dp">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/icon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginEnd="12dp"
                android:adjustViewBounds="true"
                android:contentDescription="@null"
                android:src="@drawable/ic_add"
                android:tint="#000000"
                app:layout_constraintBottom_toBottomOf="@id/size"
                app:layout_constraintEnd_toStartOf="@id/title"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@id/title" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" Download Test Plan"
                android:textColor="#000000"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toTopOf="@id/size"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/icon"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed" />

            <TextView
                android:id="@+id/size"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="PDF"
                android:textColor="#000000"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@id/title"
                app:layout_constraintTop_toBottomOf="@id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>

    Sample Output :

    Sample UI output