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.
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:
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.