<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:background="#888">


    <androidx.constraintlayout.widget.ConstraintLayout
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="@dimen/convert_400px"
        android:layout_height="@dimen/convert_270px"
        app:layout_constraintVertical_bias="0.32"
        >
        <ImageView
            android:id="@+id/jiahao"
            android:layout_width="@dimen/convert_50px"
            android:layout_height="@dimen/convert_50px"
            android:src="@drawable/jiahao"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.5"
            />

        <ImageView
            android:id="@+id/jianhao"
            android:layout_width="@dimen/convert_50px"
            android:layout_height="@dimen/convert_50px"
            android:src="@drawable/jianhao"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.develop.common.widget.RingControlView
        android:id="@+id/temp_ring_view"
        android:layout_width="@dimen/convert_270px"
        android:layout_height="@dimen/convert_270px"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.32" />

    <com.develop.common.widget.RingControlView
        android:id="@+id/speed_ring_view"
        android:layout_width="@dimen/convert_270px"
        android:layout_height="@dimen/convert_270px"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.32" />

    <TextView
        android:id="@+id/tv_speed_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:textColor="#E60012"
        android:textSize="@dimen/convert_72px"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/speed_ring_view"
        app:layout_constraintEnd_toEndOf="@+id/speed_ring_view"
        app:layout_constraintStart_toStartOf="@+id/speed_ring_view"
        app:layout_constraintTop_toTopOf="@+id/speed_ring_view"
        app:layout_constraintVertical_bias="0.45" />

    <TextView
        android:id="@+id/tv_ring_temp_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="80°C"
        android:textColor="#E60012"
        android:textSize="@dimen/convert_72px"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/temp_ring_view"
        app:layout_constraintEnd_toEndOf="@+id/temp_ring_view"
        app:layout_constraintStart_toStartOf="@+id/temp_ring_view"
        app:layout_constraintTop_toTopOf="@+id/temp_ring_view"
        app:layout_constraintVertical_bias="0.45"
        tools:visibility="gone"/>

    <com.develop.common.widget.TimePickerView
        android:id="@+id/cl_set_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_marginBottom="@dimen/convert_387px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:time_color="@color/color_fff"
        tools:background="#aaa"
        tools:visibility="visible"/>

    <FrameLayout
        android:id="@+id/fl_direction"
        android:layout_width="@dimen/convert_240px"
        android:layout_height="@dimen/convert_240px"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.32">

        <ImageView
            android:id="@+id/iv_direction"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_direction" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_turn_right"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingStart="@dimen/convert_60px"
                android:text="@string/turn_left"
                android:textColor="@color/color_E60012"
                android:textSize="@dimen/convert_20px" />

            <TextView
                android:id="@+id/tv_turn_left"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingEnd="@dimen/convert_60px"
                android:text="@string/turn_right"
                android:textColor="@color/color_E5E5E5"
                android:textSize="@dimen/convert_20px" />
        </LinearLayout>

    </FrameLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_temp"
        android:layout_width="@dimen/convert_280px"
        android:layout_height="@dimen/convert_140px"
        android:layout_marginBottom="@dimen/convert_190px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/cl_cook_time">

        <View
            android:id="@+id/view_background_temp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_cook_item_selected" />

        <TextView
            android:id="@+id/tv_temp_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/convert_21px"
            android:layout_marginBottom="@dimen/convert_8px"
            android:includeFontPadding="false"
            android:text="80°C"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_40px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <ImageView
            android:id="@+id/view_icon_temp"
            android:layout_width="@dimen/convert_42px"
            android:layout_height="@dimen/convert_42px"
            android:layout_marginStart="@dimen/convert_11px"
            android:layout_marginTop="@dimen/convert_17px"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_cook_temp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_temp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_47px"
            android:text="@string/temperature"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_26px"
            app:layout_constraintBottom_toBottomOf="@+id/view_icon_temp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/view_icon_temp" />

        <TextView
            android:id="@+id/tv_cooking_temp_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_25px"
            android:layout_marginTop="@dimen/convert_16px"
            android:layout_marginBottom="@dimen/convert_11px"
            android:text="--80°C--"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_24px"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_time"
        android:layout_width="@dimen/convert_280px"
        android:layout_height="@dimen/convert_140px"
        app:layout_constraintEnd_toStartOf="@+id/cl_cook_speed"
        app:layout_constraintStart_toEndOf="@+id/cl_cook_temp"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <View
            android:id="@+id/view_background_time"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_cook_item_selected" />

        <TextView
            android:id="@+id/tv_set_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/convert_21px"
            android:layout_marginBottom="@dimen/convert_8px"
            android:includeFontPadding="false"
            android:text="00:60"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_40px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <ImageView
            android:id="@+id/view_icon_time"
            android:layout_width="@dimen/convert_42px"
            android:layout_height="@dimen/convert_42px"
            android:layout_marginStart="@dimen/convert_20px"
            android:layout_marginTop="@dimen/convert_17px"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_cook_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_70px"
            android:text="@string/time"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_26px"
            app:layout_constraintBottom_toBottomOf="@+id/view_icon_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/view_icon_time" />

        <TextView
            android:id="@+id/tv_cooking_time_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_25px"
            android:layout_marginTop="@dimen/convert_16px"
            android:layout_marginBottom="@dimen/convert_11px"
            android:text="--05:00--"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_24px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_speed"
        android:layout_width="@dimen/convert_280px"
        android:layout_height="@dimen/convert_140px"
        app:layout_constraintEnd_toStartOf="@+id/cl_cook_direction"
        app:layout_constraintStart_toEndOf="@+id/cl_cook_time"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <View
            android:id="@+id/view_background_speed"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_cook_item_selected" />

        <TextView
            android:id="@+id/tv_set_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/convert_21px"
            android:layout_marginBottom="@dimen/convert_8px"
            android:includeFontPadding="false"
            android:text="2"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_40px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <ImageView
            android:id="@+id/view_icon_speed"
            android:layout_width="@dimen/convert_46px"
            android:layout_height="@dimen/convert_46px"
            android:layout_marginStart="@dimen/convert_20px"
            android:layout_marginTop="@dimen/convert_13px"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_cook_quick"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_70px"
            android:text="@string/speed"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_26px"
            app:layout_constraintBottom_toBottomOf="@+id/view_icon_speed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/view_icon_speed" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_cook_direction"
        android:layout_width="@dimen/convert_280px"
        android:layout_height="@dimen/convert_140px"
        app:layout_constraintStart_toEndOf="@+id/cl_cook_speed"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/cl_cook_temp">

        <View
            android:id="@+id/view_background_direction"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_cook_item_selected" />

        <TextView
            android:id="@+id/tv_set_direction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:text="@string/turn_right"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_30px"
            android:layout_marginEnd="@dimen/convert_24px"
            android:layout_marginBottom="@dimen/convert_8px"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <ImageView
            android:id="@+id/view_icon_direction"
            android:layout_width="@dimen/convert_42px"
            android:layout_height="@dimen/convert_42px"
            android:layout_marginStart="@dimen/convert_22px"
            android:layout_marginTop="@dimen/convert_17px"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_cook_rotate"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/cook_panel_text" />

        <TextView
            android:id="@+id/tv_title_direction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/convert_70px"
            android:text="@string/direction"
            android:textColor="@color/cook_panel_text"
            android:textSize="@dimen/convert_26px"
            app:layout_constraintBottom_toBottomOf="@+id/view_icon_direction"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/view_icon_direction" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/btn_start"
        android:layout_width="@dimen/convert_550px"
        android:layout_height="@dimen/convert_98px"
        android:layout_marginBottom="@dimen/convert_50px"
        android:background="@drawable/bg_orange_button"
        android:gravity="center"
        android:text="@string/start"
        android:textColor="#ffffff"
        android:textSize="@dimen/convert_36px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn_reset"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/btn_reset"
        android:layout_width="@dimen/convert_550px"
        android:layout_height="@dimen/convert_98px"
        android:layout_marginBottom="@dimen/convert_50px"
        android:background="@drawable/bg_white_button_60px_stroke"
        android:gravity="center"
        android:text="@string/reset_button"
        android:textColor="@color/white"
        android:textSize="@dimen/convert_36px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_start" />

    <LinearLayout
        android:id="@+id/ll_step_complete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="@dimen/convert_60px">

        <View
            android:layout_width="@dimen/convert_110px"
            android:layout_height="@dimen/convert_110px"
            android:background="@drawable/ic_cook_complete"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DONE"
            android:textColor="@color/white"
            android:textSize="@dimen/convert_36px"
            android:layout_marginTop="@dimen/convert_17px"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="You are ready the next step"
            android:textColor="@color/white"
            android:textSize="@dimen/convert_30px"
            android:layout_marginTop="@dimen/convert_7px"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>