1

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.

LiTTle
  • 1,811
  • 1
  • 20
  • 37
  • If you don't change the container width or the item widths, then the only other thing to change is the item spacing. – Cheticamp Jul 20 '22 at 13:55
  • @Cheticamp is it possible to be auto-calculated by the `ConstraintLayout Flow` and keep the G, H items out of sight? – LiTTle Jul 20 '22 at 14:03
  • I think that you would need to calculate the gap. See [setHorizontalGap(int)](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow#setHorizontalGap(int)). – Cheticamp Jul 20 '22 at 14:16

0 Answers0