androidkotlinandroid-linearlayoutandroid-constraintlayout

How to center the Flow widget within the ConstraintLayout?


I'm currently facing an issue with centering a Flow widget within a ConstraintLayout. The Flow widget contains two child TextView elements, and I want the entire Flow to be centered both horizontally and vertically within the ConstraintLayout. Despite using constraints, the widget doesn't appear to be centered as expected. I've tried adjusting the constraints and attributes, but the issue persists. Can anyone provide insights or suggestions on how to correctly center the Flow widget within the ConstraintLayout?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal"
    app:layout_constraintTop_toBottomOf="@+id/et_password">

    <TextView
        android:id="@+id/tv_submit"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_marginTop="@dimen/_50dp"
        android:background="@drawable/round_purple_corner"
        android:fontFamily="@font/inter_regular"
        android:gravity="center"
        android:padding="15dp"
        android:paddingHorizontal="@dimen/_10dp"
        android:text="Update"
        android:textColor="@color/white"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_cancel"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_marginTop="@dimen/_50dp"
        android:background="@drawable/round_black_corner"
        android:fontFamily="@font/inter_regular"
        android:gravity="center"
        android:padding="15dp"
        android:paddingHorizontal="@dimen/_10dp"
        android:text="My Sales"
        android:textColor="@color/white"
        android:textSize="@dimen/_16sp" />

</LinearLayout>

Solution

  •         <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cl_ac_re"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="@dimen/_20dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cd_otheritem">
    
                <androidx.constraintlayout.helper.widget.Flow
                    android:id="@+id/flow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:constraint_referenced_ids="text_view_accept,text_view_reject"
                    app:flow_horizontalGap="@dimen/_10dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent" />
    
                <TextView
                    android:id="@+id/text_view_accept"
                    android:layout_width="150dp"
                    android:layout_height="35dp"
                    android:layout_marginHorizontal="@dimen/_10dp"
                    android:layout_marginTop="@dimen/_5dp"
                    android:background="@drawable/shape_rounded_10"
                    android:fontFamily="@font/inter_regular"
                    android:gravity="center"
                    android:paddingVertical="@dimen/_10dp"
                    android:text="@string/accept"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_12sp" />
    
                <TextView
                    android:id="@+id/text_view_reject"
                    android:layout_width="150dp"
                    android:layout_height="35dp"
                    android:layout_marginHorizontal="@dimen/_10dp"
                    android:layout_marginTop="@dimen/_5dp"
                    android:background="@drawable/shape_rounded_10"
                    android:backgroundTint="@color/_393F48"
                    android:fontFamily="@font/inter_regular"
                    android:gravity="center"
                    android:text="@string/reject"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_12sp" />
    
            </androidx.constraintlayout.widget.ConstraintLayout>
    

    this layout creates a row of two buttons with rounded corners (text_view_accept and text_view_reject) inside a ConstraintLayout. The Flow widget helps in horizontally arranging the buttons, and each button is individually styled with specific dimensions, background, and text properties.