ConstraintLayout Flow wrapping

870 Views Asked by At

I want to show an unknown number of elements (more than 1, less than 15) in a specific order as it is shown by the following image.
enter image description here

The elements G and H should not be shown to the user. The area should not be scrollable as well. The rendering should done the way the arrows point.

The xml file for the layout is the following

<androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cl_mini_games_container"
                android:layout_width="wrap_content"
                app:layout_constrainedWidth="true"
                app:layout_constraintHorizontal_bias="1"
                android:layout_height="wrap_content"
                tools:background="@color/black_transparent"
                android:clickable="true"
                android:focusable="true"
                android:padding="8dp"
                android:layout_marginVertical="32dp"
                android:layout_marginEnd="32dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/gl_center">

                <androidx.constraintlayout.helper.widget.Flow
                    android:id="@+id/flow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constrainedWidth="true"
                    app:constraint_referenced_ids="mini_game_1, mini_game_2, mini_game_3, mini_game_4, mini_game_5, mini_game_6, mini_game_7, mini_game_8"
                    app:flow_horizontalBias="0"
                    app:flow_horizontalGap="8dp"
                    app:flow_verticalBias="0"
                    app:flow_maxElementsWrap="2"
                    app:flow_verticalGap="8dp"
                    android:orientation="vertical"
                    app:flow_horizontalStyle="packed"
                    app:flow_wrapMode="aligned"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent">

                </androidx.constraintlayout.helper.widget.Flow>

                <include
                    android:id="@+id/mini_game_1"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_2"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_3"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_4"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_5"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_6"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_7"
                    layout="@layout/item_casino_mini_game" />

                <include
                    android:id="@+id/mini_game_8"
                    layout="@layout/item_casino_mini_game" />




            </androidx.constraintlayout.widget.ConstraintLayout>

The item_casino_mini_game is this one:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/mini_casino_game_tile_size"
    android:layout_height="@dimen/mini_casino_game_tile_size"
    app:cardBackgroundColor="@color/g600"
    tools:cardBackgroundColor="@color/prize_full_bet"
    app:layout_constraintDimensionRatio="1:1"
    tools:ignore="MissingConstraints"
    app:cardCornerRadius="8dp"
    tools:showIn="@layout/row_themed_casino_game_category">

    <ImageView
        android:id="@+id/img_mini_game"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

</androidx.cardview.widget.CardView>

The weird thing is that I achieve the following result:
enter image description here

As you can see the elements G and H are partially visible to user. How can I achieve to show no partially rendered items (G and H for this scenario) without resizing the parent element's width nor the child elements (A, B, C, ...) size?

I would prefer to do it with a ConstraintLayout Flow but any other solution is more than welcome.

0

There are 0 best solutions below