Android ConstraintLayout with Adaptable ImageView sizes

Question

I have a ConstraintLayout that will accept a variable amount of ImageViews... anywhere from 1 to 12. I would like the ImageViews to adpat in size according to the amount of the items. E.g. 1 or 2 items may have Width: 110 Height: 140 whereas when there are 6 or more items Width: 50 Height: 60. In other words all the items should fit into a constrained area an adapt in size accordingly.

<android.support.constraint.ConstraintLayout
        android:id="@+id/ingredient_CL"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:animateLayoutChanges="true"
        android:background="@drawable/item_border">

<ImageView
    android:id="@+id/ingredient_tool_0_iv"
    android:layout_width="110dp"
    android:layout_height="140dp"
    android:layout_marginStart="8dp" 
    android:scaleType="centerInside"
    android:visibility="@{step.quantity > 0 ? View.VISIBLE : View.GONE}" />

<ImageView
    android:id="@+id/ingredient_tool_1_iv"
    android:layout_width="110dp"
    android:layout_height="140dp"
    android:layout_marginStart="8dp"
    android:scaleType="centerInside"
    android:visibility="@{step.quantity > 1 ? View.VISIBLE : View.GONE}"/>

...

Any ideas?

Answer 1

If you have number of items that can vary based on some condition, you can use Staggered Grid Layout Manager to achieve what you want.

Staggered Grid View : It is basically an extension to Grid View but in this each Grid is of varying size(Height and width). Staggered Grid View shows asymmetric items in view.

RecyclerView supports StaggeredGridLayoutManager

A LayoutManager that lays out children in a staggered grid formation. It supports horizontal & vertical layout as well as an ability to layout children in reverse.

Refer below documentation links for understanding it better.

https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager

Android - Difference between Gridlayout and Staggered Gridlayout