Which element is better for build dynamic part of layout?

20 Views Asked by At

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?

0

There are 0 best solutions below