<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#ffffff"
    xmlns:tools="http://schemas.android.com/tools"
    tools:background="#555">
    
    <ImageView
        android:id="@+id/iv_top_banner"
        android:layout_width="@dimen/convert_550px"
        android:layout_height="match_parent"
        android:src="#ccc"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#80000000"
        app:layout_constraintStart_toStartOf="@+id/iv_top_banner"
        app:layout_constraintEnd_toEndOf="@+id/iv_top_banner"/>

    <ImageView
        android:id="@+id/view_back"
        android:layout_width="@dimen/convert_60px"
        android:layout_height="@dimen/convert_60px"
        android:src="@drawable/ic_cook_detail_back"
        android:padding="@dimen/convert_6px"
        android:layout_marginTop="@dimen/convert_16px"
        android:layout_marginStart="@dimen/convert_26px"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
        android:id="@+id/view_more"
        android:layout_width="@dimen/convert_60px"
        android:layout_height="@dimen/convert_60px"
        android:src="@drawable/ic_detail_more"
        android:background="@drawable/shape_e83f97_round_30px"
        android:padding="@dimen/convert_12px"
        android:layout_marginTop="@dimen/convert_52px"
        android:layout_marginEnd="@dimen/convert_40px"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
        android:id="@+id/view_like"
        android:layout_width="@dimen/convert_60px"
        android:layout_height="@dimen/convert_60px"
        android:src="@drawable/ic_unlike"
        android:background="@drawable/shape_white_round_30px"
        android:padding="@dimen/convert_16px"
        android:layout_marginTop="@dimen/convert_24px"
        app:layout_constraintStart_toStartOf="@+id/view_more"
        app:layout_constraintTop_toBottomOf="@+id/view_more"/>

    <ImageView
        android:id="@+id/view_hide"
        android:layout_width="@dimen/convert_60px"
        android:layout_height="@dimen/convert_60px"
        android:src="@drawable/ic_visible"
        android:background="@drawable/shape_1eabdb_round_30px"
        android:padding="@dimen/convert_12px"
        android:layout_marginTop="@dimen/convert_24px"
        app:layout_constraintStart_toStartOf="@+id/view_like"
        app:layout_constraintTop_toBottomOf="@+id/view_like"/>

    <com.develop.common.widget.StarView
        android:id="@+id/start_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/convert_52px"
        android:layout_marginStart="@dimen/convert_40px"
        app:layout_constraintStart_toStartOf="@+id/iv_top_banner"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/tv_food_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="Guacamole 12345678"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_48px"
        android:textStyle="bold"
        android:layout_marginTop="@dimen/convert_26px"
        android:layout_marginStart="@dimen/convert_40px"
        android:layout_marginEnd="@dimen/convert_130px"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/start_layout"
        app:layout_constraintStart_toStartOf="@+id/iv_top_banner"/>

    <TextView
        android:id="@+id/tv_food_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Preparation: 10 min\nReady in: 40 min"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_26px"
        android:lineSpacingExtra="@dimen/convert_16px"
        android:layout_marginTop="@dimen/convert_30px"
        android:layout_marginStart="@dimen/convert_37px"
        app:layout_constraintStart_toStartOf="@+id/tv_food_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_food_name"/>

    <TextView
        android:id="@+id/tv_easy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Easy"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_26px"
        android:layout_marginTop="@dimen/convert_12px"
        app:layout_constraintStart_toStartOf="@+id/tv_food_time"
        app:layout_constraintTop_toBottomOf="@+id/tv_food_time"/>

    <View
        android:id="@+id/view_icon1"
        android:layout_width="@dimen/convert_40px"
        android:layout_height="@dimen/convert_40px"
        android:background="@drawable/ic_detail_time"
        android:layout_marginTop="@dimen/convert_29px"
        android:layout_marginEnd="@dimen/convert_6px"
        app:layout_constraintTop_toBottomOf="@+id/tv_food_name"
        app:layout_constraintEnd_toStartOf="@+id/tv_food_time"/>

    <View
        android:id="@+id/view_icon2"
        android:layout_width="@dimen/convert_40px"
        android:layout_height="@dimen/convert_40px"
        android:background="@drawable/ic_detail_easy"
        android:layout_marginTop="@dimen/convert_56px"
        app:layout_constraintStart_toStartOf="@+id/view_icon1"
        app:layout_constraintTop_toBottomOf="@+id/view_icon1"/>

    <TextView
        android:id="@+id/tv_jar_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="2 JARS"
        android:textColor="#fff"
        android:textSize="@dimen/convert_30px"
        android:layout_marginStart="@dimen/convert_40px"
        android:layout_marginBottom="@dimen/convert_228px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/iv_top_banner"/>

    <TextView
        android:id="@+id/tv_serving_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/serving_sizes"
        android:textColor="#fff"
        android:textSize="@dimen/convert_30px"
        android:layout_marginEnd="@dimen/convert_40px"
        app:layout_constraintTop_toTopOf="@+id/tv_jar_count"
        app:layout_constraintEnd_toEndOf="parent"/>

    <View
        android:id="@+id/view_serving"
        android:layout_width="@dimen/convert_35px"
        android:layout_height="@dimen/convert_35px"
        android:background="@drawable/ic_cook_serving"
        android:layout_marginEnd="@dimen/convert_12px"
        app:layout_constraintEnd_toStartOf="@+id/tv_serving_size"
        app:layout_constraintTop_toTopOf="@+id/tv_serving_size"
        app:layout_constraintBottom_toBottomOf="@+id/tv_serving_size"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_start_cooking"
        android:layout_width="@dimen/convert_470px"
        android:layout_height="@dimen/convert_98px"
        android:background="@drawable/bg_download_button"
        android:layout_marginBottom="@dimen/convert_50px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/iv_top_banner"
        app:layout_constraintEnd_toEndOf="@+id/iv_top_banner">

        <com.develop.common.widget.DownloadProgressView
            android:id="@+id/view_progress"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageView
            android:id="@+id/view_icon"
            android:layout_width="@dimen/convert_66px"
            android:layout_height="@dimen/convert_66px"
            android:src="@drawable/ic_detail_cook_start"
            android:visibility="gone"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_download"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <TextView
            android:id="@+id/tv_download"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/convert_36px"
            android:textColor="#ffffff"
            android:layout_gravity="center_vertical"
            android:text="@string/start_cooking"
            android:layout_marginStart="@dimen/convert_21px"
            app:layout_goneMarginStart="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/view_icon"
            app:layout_constraintEnd_toEndOf="parent"/>

        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="@dimen/convert_36px"
            android:text="0%"
            android:visibility="gone"
            android:includeFontPadding="false"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/tv_download_state"/>

        <TextView
            android:id="@+id/tv_download_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/convert_26px"
            android:textColor="#fff"
            android:text="@string/downloading"
            android:visibility="gone"
            android:includeFontPadding="false"
            app:layout_constraintTop_toBottomOf="@+id/tv_progress"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <ImageView
        android:id="@+id/iv_tab1"
        android:layout_width="@dimen/convert_100px"
        android:layout_height="@dimen/convert_100px"
        android:layout_marginTop="@dimen/convert_100px"
        android:layout_marginStart="@dimen/convert_60px"
        android:src="@drawable/ic_detail_tab1"
        android:padding="@dimen/convert_16px"
        android:background="@drawable/bg_detail_tab_selector"
        android:elevation="@dimen/convert_8px"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:tint="@color/color_cook_tab_tint"/>

    <ImageView
        android:id="@+id/iv_tab2"
        android:layout_width="@dimen/convert_100px"
        android:layout_height="@dimen/convert_100px"
        android:src="@drawable/ic_detail_tab2"
        android:padding="@dimen/convert_28px"
        android:background="@drawable/bg_detail_tab_selector"
        android:elevation="@dimen/convert_8px"
        app:layout_constraintTop_toTopOf="@+id/iv_tab1"
        app:layout_constraintStart_toEndOf="@+id/iv_tab1"
        app:layout_constraintEnd_toStartOf="@+id/iv_tab3"
        app:tint="@color/color_cook_tab_tint"/>

    <ImageView
        android:id="@+id/iv_tab3"
        android:layout_width="@dimen/convert_100px"
        android:layout_height="@dimen/convert_100px"
        android:src="@drawable/ic_detail_tab3"
        android:padding="@dimen/convert_28px"
        android:background="@drawable/bg_detail_tab_selector"
        android:elevation="@dimen/convert_8px"
        app:layout_constraintTop_toTopOf="@+id/iv_tab1"
        app:layout_constraintStart_toEndOf="@+id/iv_tab2"
        app:layout_constraintEnd_toStartOf="@+id/iv_tab4"
        app:tint="@color/color_cook_tab_tint"/>

    <ImageView
        android:id="@+id/iv_tab4"
        android:layout_width="@dimen/convert_100px"
        android:layout_height="@dimen/convert_100px"
        android:src="@drawable/ic_detail_tab4"
        android:padding="@dimen/convert_28px"
        android:background="@drawable/bg_detail_tab_selector"
        android:elevation="@dimen/convert_8px"
        app:layout_constraintTop_toTopOf="@+id/iv_tab1"
        app:layout_constraintStart_toEndOf="@+id/iv_tab3"
        app:layout_constraintEnd_toStartOf="@+id/iv_top_banner"
        app:tint="@color/color_cook_tab_tint" />

    <FrameLayout
        android:id="@+id/fl_tab_content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/iv_top_banner"
        app:layout_constraintTop_toBottomOf="@+id/iv_tab1"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_func_more"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#66000000"
        android:elevation="@dimen/convert_20px"
        android:visibility="gone">

        <com.develop.common.widget.CircleBgImageView
            android:id="@+id/view_more_close"
            android:layout_width="@dimen/convert_60px"
            android:layout_height="@dimen/convert_60px"
            android:src="@drawable/ic_cook_detail_window_close"
            app:bgColor="#E83F97"
            android:padding="@dimen/convert_10px"
            android:layout_marginTop="@dimen/convert_52px"
            android:layout_marginEnd="@dimen/convert_40px"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <LinearLayout
            android:layout_width="@dimen/convert_252px"
            android:layout_height="wrap_content"
            android:paddingVertical="@dimen/convert_40px"
            android:layout_marginEnd="@dimen/convert_53px"
            app:layout_constraintTop_toBottomOf="@+id/view_more_close"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="@dimen/convert_35px"
            android:background="@drawable/bg_cook_detail_more"
            android:paddingStart="@dimen/convert_40px"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_more_score"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/ic_more_star"
                android:text="@string/score"
                android:textColor="#1a1a1a"
                android:textSize="@dimen/convert_30px"
                android:gravity="center_vertical"
                android:drawablePadding="@dimen/convert_13px"/>

            <TextView
                android:id="@+id/tv_more_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/ic_more_share"
                android:text="@string/share"
                android:textColor="#1a1a1a"
                android:textSize="@dimen/convert_30px"
                android:gravity="center_vertical"
                android:drawablePadding="@dimen/convert_13px"
                android:layout_marginTop="@dimen/convert_40px"/>

            <TextView
                android:id="@+id/tv_more_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/ic_more_delete"
                android:text="@string/delete"
                android:textColor="#1a1a1a"
                android:textSize="@dimen/convert_30px"
                android:gravity="center_vertical"
                android:drawablePadding="@dimen/convert_13px"
                android:layout_marginTop="@dimen/convert_40px"/>

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>