I love Compound View

#android #xml

I love separating a piece of the UI to a compound view;
first here how to do it.
create the view in xml as normal,

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="40dp"
    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout"
    android:layout_height="76dp"
    >
    <TextView
        tools:text="سبت"
        android:fontFamily="@font/neo_sans_arabic"
        android:textStyle="bold"
        android:textColor="#FE000000"
        android:id="@+id/dayNameTextView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</merge>

as you see the parent tag is it will take where you gonna inflate it at as its parent.
we create new class that extends ConstraintLayout and infalte it using viewBinding:

class PlanDayView(context: Context, attributeSet: AttributeSet?=null) :
    ConstraintLayout(context, attributeSet) {
    var binding: FoodPlansDayBinding

    init {
        inflate(context, R.layout.food_plans_day, this)
        binding = FoodPlansDayBinding.bind(this)
    }


    fun render(uiDayView: UiDayView) {
           TODO("")
    }

}

then you make a model represent this Compound View:

data class UiDayView(
    val name: String,
    val number: String,
    val progress: Int,
    val isPassedOrToday: Boolean,
    val isFree: Boolean = false,
    val isSelected: Boolean = false,
    val onClick: (UiDayView)-> Unit,
)