I'd like to make a layout like this: sample layout image
This is gonna be a list of descriptions for items. Each big blue rectangle - single item which I get from database, or json, nevermind. The main issue is these little black rectangles with red and green rectangle inside. The rest parts like big pink square and wide dark blue rectangles are static - each item has a picture, title and cost. But black rectangles are various features, and each item has various amount of them. Some has only 2 features, and some other - 7 or even more. So these part of layout is dynamic and I don't know what is better for it. But for sure it should not be single line.
I can show you what I've made: as image As xml (all items features are hardcoded for now, cause I don't have data yet and this is just a sample):
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp"
android:background="@color/item_preview_background">
<ImageView
android:id="@+id/item_pic"
android:src="@drawable/example_img"
android:layout_width="@dimen/item_pic_w"
android:layout_height="@dimen/item_pic_h"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/info_bar"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/item_pic"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/info_bar_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="@+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SAMPLE TEXT"
android:textStyle="bold"
android:textColor="@color/item_name"
android:textSize="@dimen/item_preview_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="@+id/item_cost_pic"
android:src="@drawable/img_cost"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@id/item_cost_value"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="@+id/item_cost_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4100 (1300)"
android:textStyle="bold"
android:textColor="@color/item_cost"
android:textSize="@dimen/item_preview_cost"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<GridLayout
android:id="@+id/item_features"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="4"
app:layout_constraintTop_toBottomOf="@id/info_bar_top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:id="@+id/item_prop1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/item_prop1_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop1_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/item_prop2_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop2_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/item_prop3_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop3_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/item_prop4_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop4_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/item_prop5_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop5_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/item_prop6_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop6_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_prop7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/item_prop7_pic"
android:layout_width="@dimen/item_preview_props_pic_size"
android:layout_height="@dimen/item_preview_props_pic_size"
android:src="@drawable/feature_img_sample" />
<TextView
android:id="@+id/item_prop7_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
So could you tell me, is my layout fine (if so, is there any way to make nice margin for columns and rows?), or tell me how to make such layout properly?
