VoiceAI-Android/app/src/main/res/layout/fragment_clone_voice.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="cloneVoiceViewModel"
            type="com.atmob.voiceai.module.clonevoice.CloneVoiceViewModel" />

        <import type="com.atmob.voiceai.module.clonevoice.CloneState" />

        <import type="com.atmob.voiceai.utils.DateUtil" />

        <import type="com.atmob.common.ui.SizeUtil" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <androidx.core.widget.NestedScrollView
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Space
                    android:id="@+id/space_status"
                    android:layout_width="match_parent"
                    android:layout_height="@{SizeUtil.getStatusBarHeight(), default=@dimen/app_status_bar_height}"
                    app:layout_constraintTop_toTopOf="parent" />

                <Space
                    android:id="@+id/space1"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    app:layout_constraintDimensionRatio="360:50"
                    app:layout_constraintTop_toBottomOf="@id/space_status" />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:src="@drawable/bg_clone_voice_head_background"
                    app:layout_constraintDimensionRatio="1080:620"
                    app:layout_constraintTop_toTopOf="parent" />

                <ImageView
                    android:id="@+id/iv_logo"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:src="@drawable/icon_clone_voice_logo"
                    app:layout_constraintDimensionRatio="216:203"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/space1"
                    app:layout_constraintWidth_percent="0.1833333333333333" />

                <Space
                    android:id="@+id/space2"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    app:layout_constraintDimensionRatio="360:50"
                    app:layout_constraintTop_toBottomOf="@+id/iv_logo" />

                <TextView
                    android:id="@+id/tv_clone_tip"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/clone_voice_padding"
                    android:text="@{cloneVoiceViewModel.cloneTip}"
                    android:textColor="@color/white"
                    android:textSize="26sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/space2"
                    tools:text="CREATE YOUR OWN \nAI VOICE" />

                <TextView
                    android:id="@+id/tv_clone_hint"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="@dimen/clone_voice_padding"
                    android:layout_marginTop="12dp"
                    android:text="@string/clone_voice_hint"
                    android:textColor="@color/white80"
                    android:textSize="14sp"
                    app:layout_constraintTop_toBottomOf="@+id/tv_clone_tip" />


                <Space
                    android:id="@+id/space3"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    app:layout_constraintDimensionRatio="360:56"
                    app:layout_constraintTop_toBottomOf="@+id/tv_clone_hint" />

                <TextView
                    android:id="@+id/tv_clone_hint2"
                    isGone="@{cloneVoiceViewModel.cloneState == CloneState.CLONE_SUCCESS}"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="@dimen/clone_voice_padding"
                    android:text="@string/clone_voice_hint2"
                    android:textColor="@color/white80"
                    android:textSize="14sp"
                    app:layout_constraintTop_toBottomOf="@+id/space3" />

                <Space
                    android:id="@+id/space4"
                    isGone="@{cloneVoiceViewModel.cloneState == CloneState.CLONE_SUCCESS}"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    app:layout_constraintDimensionRatio="360:12"
                    app:layout_constraintTop_toBottomOf="@+id/tv_clone_hint2" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    isGone="@{cloneVoiceViewModel.cloneState != CloneState.NO_UPLOAD_DATA}"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/clone_voice_padding"
                    app:layout_constraintTop_toBottomOf="@+id/space4"
                    tools:visibility="gone">

                    <View
                        android:id="@+id/v_clone_upload"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:background="@drawable/bg_clone_card"
                        android:onClick="@{()-> cloneVoiceViewModel.onLocalUploadClick()}"
                        app:layout_constraintDimensionRatio="312:80"
                        app:layout_constraintTop_toTopOf="parent" />

                    <ImageView
                        android:id="@+id/iv_clone_upload"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginStart="16dp"
                        android:src="@drawable/icon_clone_upload"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload"
                        app:layout_constraintWidth_percent="0.1" />

                    <TextView
                        android:id="@+id/tv_clone_upload"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="10dp"
                        android:text="@string/clone_voice_upload"
                        android:textColor="@color/white"
                        android:textSize="17sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toTopOf="@+id/tv_clone_upload_tips"
                        app:layout_constraintStart_toEndOf="@+id/iv_clone_upload"
                        app:layout_constraintTop_toTopOf="@+id/iv_clone_upload"
                        app:layout_constraintVertical_chainStyle="packed" />

                    <TextView
                        android:id="@+id/tv_clone_upload_tips"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="@string/clone_voice_upload_tips"
                        android:textColor="@color/white80"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_clone_upload"
                        app:layout_constraintStart_toStartOf="@+id/tv_clone_upload"
                        app:layout_constraintTop_toBottomOf="@+id/tv_clone_upload" />

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginEnd="16dp"
                        android:src="@drawable/icon_clone_right_arrow"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload"
                        app:layout_constraintWidth_percent="0.1" />

                    <View
                        android:id="@+id/v_clone_record"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:layout_marginTop="8dp"
                        android:background="@drawable/bg_clone_card"
                        android:onClick="@{()-> cloneVoiceViewModel.onRecordClick()}"
                        app:layout_constraintDimensionRatio="312:80"
                        app:layout_constraintTop_toBottomOf="@+id/v_clone_upload" />

                    <ImageView
                        android:id="@+id/iv_clone_record"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginStart="16dp"
                        android:src="@drawable/icon_clone_record"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_record"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_record"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_record"
                        app:layout_constraintWidth_percent="0.1" />

                    <TextView
                        android:id="@+id/tv_clone_record"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="10dp"
                        android:text="@string/clone_voice_record"
                        android:textColor="@color/white"
                        android:textSize="17sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toTopOf="@+id/tv_clone_record_tips"
                        app:layout_constraintStart_toEndOf="@+id/iv_clone_record"
                        app:layout_constraintTop_toTopOf="@+id/iv_clone_record"
                        app:layout_constraintVertical_chainStyle="packed" />

                    <TextView
                        android:id="@+id/tv_clone_record_tips"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="@string/clone_voice_record_tips"
                        android:textColor="@color/white80"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_clone_record"
                        app:layout_constraintStart_toStartOf="@+id/tv_clone_record"
                        app:layout_constraintTop_toBottomOf="@+id/tv_clone_record" />

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginEnd="16dp"
                        android:src="@drawable/icon_clone_right_arrow"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_record"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_record"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_record"
                        app:layout_constraintWidth_percent="0.1" />

                </androidx.constraintlayout.widget.ConstraintLayout>


                <androidx.constraintlayout.widget.ConstraintLayout
                    isGone="@{cloneVoiceViewModel.cloneState != CloneState.UPLOAD_CHOICE_LOCAL &amp;&amp; cloneVoiceViewModel.cloneState != CloneState.UPLOAD_CHOICE_RECORDING}"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/clone_voice_padding"
                    app:layout_constraintTop_toBottomOf="@+id/space4"
                    tools:visibility="gone">

                    <View
                        android:id="@+id/v_clone_upload_preview"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:background="@drawable/bg_clone_card"
                        app:layout_constraintDimensionRatio="312:298"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:id="@+id/tv_clone_upload_preview"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:ellipsize="middle"
                        android:gravity="center"
                        android:singleLine="true"
                        android:text="@{cloneVoiceViewModel.uploadPreviewName}"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload_preview"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload_preview"
                        app:layout_constraintVertical_bias="0.1083032490974729"
                        tools:text="Love_story.MP3" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="@{cloneVoiceViewModel.uploadPreviewSize}"
                        android:textColor="@color/white50"
                        android:textSize="14sp"
                        app:layout_constraintEnd_toEndOf="@+id/tv_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/tv_clone_upload_preview"
                        app:layout_constraintTop_toBottomOf="@+id/tv_clone_upload_preview"
                        tools:text="2.5MB" />

                    <SeekBar
                        android:id="@+id/voice_seek_bar"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginHorizontal="10dp"
                        android:max="@{(int)cloneVoiceViewModel.totalDuration}"
                        android:maxHeight="2dp"
                        android:minHeight="2dp"
                        android:paddingStart="6dp"
                        android:paddingEnd="6dp"
                        android:progress="@{(int)cloneVoiceViewModel.currentDuration}"
                        android:progressDrawable="@drawable/shape_preview_clone_audio_seekbar"
                        android:splitTrack="false"
                        android:thumb="@drawable/shape_preview_audio_seekbar_thumb"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload_preview"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload_preview"
                        app:layout_constraintVertical_bias="0.3146853146853147"
                        tools:progress="30" />

                    <TextView
                        android:id="@+id/tv_current_time"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="6dp"
                        android:layout_marginTop="3dp"
                        android:text="@{DateUtil.formatDuration(cloneVoiceViewModel.currentDuration)}"
                        android:textColor="@color/white50"
                        android:textSize="12sp"
                        app:layout_constraintLeft_toLeftOf="@+id/voice_seek_bar"
                        app:layout_constraintTop_toBottomOf="@+id/voice_seek_bar"
                        tools:text="00:53" />

                    <TextView
                        android:id="@+id/tv_total_time"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="6dp"
                        android:text="@{DateUtil.formatDuration(cloneVoiceViewModel.totalDuration)}"
                        android:textColor="@color/white50"
                        android:textSize="12sp"
                        app:layout_constraintEnd_toEndOf="@id/voice_seek_bar"
                        app:layout_constraintTop_toBottomOf="@+id/voice_seek_bar"
                        app:layout_constraintTop_toTopOf="@+id/tv_current_time"
                        tools:text="02:53" />


                    <ImageView
                        android:id="@+id/iv_voice_reduce"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@drawable/icon_voice_reduce"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_play"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintHorizontal_bias="0.1739130434782609"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/iv_play" />

                    <ImageView
                        android:id="@+id/iv_play"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@{cloneVoiceViewModel.isPlay ? @drawable/icon_voice_playing: @drawable/icon_voice_suspend}"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload_preview"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload_preview"
                        app:layout_constraintVertical_bias="0.4961832061068702"
                        app:layout_constraintWidth_percent="0.1"
                        tools:src="@drawable/icon_voice_playing" />

                    <ImageView
                        android:id="@+id/iv_voice_speed"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@drawable/icon_voice_speed_up"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_play"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintHorizontal_bias="0.8260869565217391"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/iv_play" />

                    <TextView
                        android:id="@+id/tv_voice_speed"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:background="@drawable/bg_voice_ai_btn"
                        android:gravity="center"
                        android:onClick="@{()-> cloneVoiceViewModel.onCloneVoiceClick(cloneVoiceViewModel.cloneState)}"
                        android:text="@string/clone_voice_btn_txt"
                        android:textColor="@color/colorPrimary"
                        android:textSize="17sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload_preview"
                        app:layout_constraintDimensionRatio="256:48"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload_preview"
                        app:layout_constraintVertical_bias="0.808"
                        app:layout_constraintWidth_percent="0.7111111111111111" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:onClick="@{()-> cloneVoiceViewModel.cloneState == CloneState.UPLOAD_CHOICE_LOCAL ? cloneVoiceViewModel.onLocalReSelectClick() : cloneVoiceViewModel.onReRecordClick()}"
                        android:text="@{cloneVoiceViewModel.cloneState == CloneState.UPLOAD_CHOICE_LOCAL ?  @string/clone_voice_reselect: @string/clone_voice_start_over }"
                        android:textColor="@color/colorPrimaryVariant"
                        android:textSize="17sp"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_upload_preview"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_upload_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_upload_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_upload_preview"
                        app:layout_constraintVertical_bias="0.960431654676259"
                        tools:text="Reselect" />


                </androidx.constraintlayout.widget.ConstraintLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    isGone="@{cloneVoiceViewModel.cloneState != CloneState.CLONE_SUCCESS}"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/clone_voice_padding"
                    app:layout_constraintTop_toBottomOf="@+id/space4"
                    tools:visibility="visible">

                    <View
                        android:id="@+id/v_clone_success_preview"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:background="@drawable/bg_clone_card"
                        app:layout_constraintDimensionRatio="312:154"
                        app:layout_constraintTop_toTopOf="parent" />

                    <ImageView
                        android:id="@+id/iv_clone_success"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@drawable/icon_clone_success"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_success_preview"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintEnd_toEndOf="@id/v_clone_success_preview"
                        app:layout_constraintHorizontal_bias="0.072463768115942"
                        app:layout_constraintStart_toStartOf="@+id/v_clone_success_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_success_preview"
                        app:layout_constraintVertical_bias="0.2542372881355932"
                        app:layout_constraintWidth_percent="0.1" />

                    <TextView
                        android:id="@+id/tv_clone_success_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="12dp"
                        android:text="@string/clone_voice_success_title"
                        android:textColor="@color/white"
                        android:textSize="17sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toTopOf="@+id/tv_clone_success_hint"
                        app:layout_constraintStart_toEndOf="@+id/iv_clone_success"
                        app:layout_constraintTop_toTopOf="@+id/iv_clone_success"
                        app:layout_constraintVertical_chainStyle="packed" />

                    <TextView
                        android:id="@+id/tv_clone_success_hint"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="20dp"
                        android:text="@string/clone_voice_success_desc"
                        android:textColor="@color/white80"
                        android:textSize="12sp"
                        app:layout_constraintBottom_toBottomOf="@id/iv_clone_success"
                        app:layout_constraintEnd_toEndOf="@+id/v_clone_success_preview"
                        app:layout_constraintStart_toStartOf="@+id/tv_clone_success_title"
                        app:layout_constraintTop_toBottomOf="@+id/tv_clone_success_title" />

                    <TextView
                        android:id="@+id/tv_clone_used"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:background="@drawable/bg_use_clone_voice"
                        android:gravity="center"
                        android:onClick="@{()->cloneVoiceViewModel.useCloneVoiceClick()}"
                        android:text="@string/clone_voice_used_txt"
                        android:textColor="@color/white"
                        android:textSize="15sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/v_clone_success_preview"
                        app:layout_constraintDimensionRatio="162:36"
                        app:layout_constraintHorizontal_chainStyle="packed"
                        app:layout_constraintLeft_toLeftOf="@+id/v_clone_success_preview"
                        app:layout_constraintRight_toLeftOf="@+id/tv_clone_delete"
                        app:layout_constraintTop_toTopOf="@+id/v_clone_success_preview"
                        app:layout_constraintVertical_bias="0.8305084745762712"
                        app:layout_constraintWidth_percent="0.45" />

                    <TextView
                        android:id="@+id/tv_clone_delete"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginStart="12dp"
                        android:background="@drawable/bg_clone_voice_delete"
                        android:gravity="center"
                        android:onClick="@{()-> cloneVoiceViewModel.onDeleteClick()}"
                        android:text="@string/clone_voice_delete_txt"
                        android:textColor="@color/colorPrimary"
                        android:textSize="15sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/tv_clone_used"
                        app:layout_constraintDimensionRatio="98:36"
                        app:layout_constraintLeft_toRightOf="@+id/tv_clone_used"
                        app:layout_constraintRight_toRightOf="@+id/v_clone_success_preview"
                        app:layout_constraintTop_toTopOf="@+id/tv_clone_used"
                        app:layout_constraintWidth_percent="0.2722222222222222" />

                </androidx.constraintlayout.widget.ConstraintLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/clone_voice_record_layout"
                    isGone="@{cloneVoiceViewModel.cloneState != CloneState.RECORDING_VOICE}"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/clone_voice_padding"
                    app:layout_constraintTop_toBottomOf="@+id/space4"
                    tools:visibility="gone">

                    <View
                        android:id="@+id/v_record_audio_preview"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:background="@drawable/bg_clone_card"
                        app:layout_constraintDimensionRatio="312:309"
                        app:layout_constraintTop_toTopOf="parent" />


                    <ImageView
                        android:id="@+id/iv_record_audio"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginStart="12dp"
                        android:layout_marginTop="10dp"
                        android:src="@drawable/icon_clone_voice_record"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_record_audio_preview"
                        app:layout_constraintWidth_percent="0.05" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="3dp"
                        android:text="@string/record_title"
                        android:textColor="@color/white80"
                        android:textSize="12sp"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_record_audio"
                        app:layout_constraintStart_toEndOf="@+id/iv_record_audio"
                        app:layout_constraintTop_toTopOf="@+id/iv_record_audio" />

                    <Space
                        android:id="@+id/space6"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        app:layout_constraintDimensionRatio="360:8"
                        app:layout_constraintTop_toBottomOf="@+id/iv_record_audio" />

                    <View
                        android:id="@+id/v_divider"
                        android:layout_width="0dp"
                        android:layout_height="1dp"
                        android:layout_marginHorizontal="12dp"
                        android:background="@color/white20"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toBottomOf="@+id/space6" />

                    <com.atmob.voiceai.widget.AutoScrollTextView
                        android:id="@+id/tv_record_example"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="12dp"
                        android:layout_marginTop="6dp"
                        android:scrollbarSize="0dp"
                        android:scrollbars="vertical"
                        android:text="@string/record_example_txt"
                        android:textColor="@color/white"
                        android:textSize="16sp"
                        app:layout_constraintDimensionRatio="288:122"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toBottomOf="@+id/v_divider" />

                    <View
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:background="@drawable/bg_record_bottom_shadow"
                        app:layout_constraintBottom_toBottomOf="@+id/tv_record_example"
                        app:layout_constraintDimensionRatio="288:40"
                        app:layout_constraintEnd_toEndOf="@+id/tv_record_example"
                        app:layout_constraintStart_toStartOf="@+id/tv_record_example" />

                    <TextView
                        android:id="@+id/tv_record_time"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="25sp"
                        android:text="@{cloneVoiceViewModel.recordTimeTxt}"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/v_record_audio_preview"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toTopOf="@+id/v_record_audio_preview"
                        app:layout_constraintVertical_bias="0.6928571428571429"
                        tools:text="00:05.62" />

                    <TextView
                        android:text="@{cloneVoiceViewModel.recordStateDesc}"
                        android:id="@+id/tv_record_state_desc"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:textSize="12sp"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toBottomOf="@+id/tv_record_time"
                        tools:text="Can't clone yet, Keep speaking loud and clear"
                        tools:textColor="#FF5656" />

                    <Space
                        android:id="@+id/space7"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        app:layout_constraintDimensionRatio="360:25.5"
                        app:layout_constraintTop_toBottomOf="@+id/tv_record_state_desc" />

                    <View
                        app:layout_constraintHorizontal_bias="0.5714285714285714"
                        android:id="@+id/v_record_audio_20sec"
                        android:layout_width="3dp"
                        android:layout_height="14dp"
                        android:background="#7C7D88"
                        app:layout_constraintBottom_toBottomOf="@+id/progress_record_bar"
                        app:layout_constraintEnd_toEndOf="@+id/progress_record_bar"
                        app:layout_constraintStart_toStartOf="@+id/progress_record_bar"
                        app:layout_constraintTop_toTopOf="@+id/progress_record_bar" />

                    <TextView
                        android:text="@string/record_20_sec"
                        android:layout_marginTop="4dp"
                        android:textColor="@color/white50"
                        android:textSize="12sp"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_20sec"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_20sec"
                        app:layout_constraintTop_toBottomOf="@+id/v_record_audio_20sec"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <View
                        app:layout_constraintHorizontal_bias="0.8571428571428571"
                        android:id="@+id/v_record_audio_30sec"
                        android:layout_width="3dp"
                        android:layout_height="14dp"
                        android:background="#7C7D88"
                        app:layout_constraintBottom_toBottomOf="@+id/progress_record_bar"
                        app:layout_constraintEnd_toEndOf="@+id/progress_record_bar"
                        app:layout_constraintStart_toStartOf="@+id/progress_record_bar"
                        app:layout_constraintTop_toTopOf="@+id/progress_record_bar" />


                    <TextView
                        android:text="@string/record_30_sec"
                        android:layout_marginTop="4dp"
                        android:textColor="@color/white50"
                        android:textSize="12sp"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_30sec"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_30sec"
                        app:layout_constraintTop_toBottomOf="@+id/v_record_audio_30sec"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <com.atmob.voiceai.widget.AudioProgressBar
                        android:id="@+id/progress_record_bar"
                        android:layout_width="0dp"
                        app:startColor="@color/voice_record_0_20"
                        android:layout_height="4dp"
                        progressColor="@{cloneVoiceViewModel.recordProgressColor}"
                        progress="@{cloneVoiceViewModel.recordProgress}"
                        android:layout_marginHorizontal="16dp"
                        android:background="#7C7D88"
                        max="@{(int)cloneVoiceViewModel.recordMaxTime}"
                        app:layout_constraintEnd_toEndOf="@+id/v_record_audio_preview"
                        app:layout_constraintStart_toStartOf="@+id/v_record_audio_preview"
                        app:layout_constraintTop_toBottomOf="@+id/space7" />

                    <Space
                        android:id="@+id/space5"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        app:layout_constraintDimensionRatio="360:25"
                        app:layout_constraintTop_toBottomOf="@+id/v_record_audio_preview" />

                    <View
                        android:id="@+id/v_record_audio"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginHorizontal="@dimen/clone_voice_padding"
                        android:background="@drawable/bg_recording_btn"
                        android:onClick="@{()-> cloneVoiceViewModel.onRecordingClick(cloneVoiceViewModel.showStopRecord,cloneVoiceViewModel.recordProgress)}"
                        app:layout_constraintDimensionRatio="312:48"
                        app:layout_constraintTop_toBottomOf="@+id/space5" />

                    <ImageView
                        android:id="@+id/iv_stop"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@{cloneVoiceViewModel.showStopRecord ? @drawable/icon_record_stop: @drawable/icon_record_reset}"
                        app:layout_constraintBottom_toBottomOf="@+id/v_record_audio"
                        app:layout_constraintDimensionRatio="1:1"
                        app:layout_constraintHorizontal_chainStyle="packed"
                        app:layout_constraintLeft_toLeftOf="@+id/v_record_audio"
                        app:layout_constraintRight_toLeftOf="@+id/tv_stop"
                        app:layout_constraintTop_toTopOf="@+id/v_record_audio"
                        app:layout_constraintWidth_percent="0.0666666666666667" />

                    <TextView
                        android:id="@+id/tv_stop"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="6dp"
                        android:text="@{cloneVoiceViewModel.showStopRecord ? @string/record_stop: @string/record_reset}"
                        android:textColor="@color/white"
                        android:textSize="17sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="@+id/iv_stop"
                        app:layout_constraintLeft_toRightOf="@+id/iv_stop"
                        app:layout_constraintRight_toRightOf="@+id/v_record_audio"
                        app:layout_constraintTop_toTopOf="@+id/iv_stop" />

                </androidx.constraintlayout.widget.ConstraintLayout>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.core.widget.NestedScrollView>

        <View
            android:id="@+id/v_status_bar"
            android:layout_width="match_parent"
            android:layout_height="@{SizeUtil.getStatusBarHeight(), default=@dimen/app_status_bar_height}"
            android:alpha="0"
            android:background="@color/colorPrimary"
            app:layout_constraintTop_toTopOf="parent" />


        <View
            android:id="@+id/v_menu"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="0"
            android:background="@color/colorPrimary"
            app:layout_constraintDimensionRatio="360:65"
            app:layout_constraintTop_toBottomOf="@+id/v_status_bar" />


        <View
            android:id="@+id/v_vip_bg"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="@dimen/app_common_page_horizontal_padding"
            android:background="@drawable/bg_voice_ai_vip"
            android:onClick="@{()-> cloneVoiceViewModel.onGoGetIntegralClick()}"
            app:layout_constraintBottom_toBottomOf="@+id/v_menu"
            app:layout_constraintDimensionRatio="80:28"
            app:layout_constraintStart_toStartOf="@+id/v_menu"
            app:layout_constraintTop_toTopOf="@+id/v_menu"
            app:layout_constraintWidth_percent="0.2222222222222222" />


        <ImageView
            android:id="@+id/iv_vip"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/icon_total_integration"
            app:layout_constraintBottom_toBottomOf="@+id/v_vip_bg"
            app:layout_constraintDimensionRatio="39:42"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintLeft_toLeftOf="@+id/v_vip_bg"
            app:layout_constraintRight_toLeftOf="@+id/tv_vip_title"
            app:layout_constraintTop_toTopOf="@+id/v_vip_bg"
            app:layout_constraintWidth_percent="0.0344444444444444" />


        <TextView
            android:id="@+id/tv_vip_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:text="@{String.valueOf(cloneVoiceViewModel.credit)}"
            android:textColor="@color/colorPrimaryVariant"
            android:textSize="14dp"
            app:layout_constraintBottom_toBottomOf="@+id/v_vip_bg"
            app:layout_constraintLeft_toRightOf="@+id/iv_vip"
            app:layout_constraintRight_toRightOf="@+id/v_vip_bg"
            app:layout_constraintTop_toTopOf="@+id/v_vip_bg"
            tools:text="200" />

        <ImageView
            android:id="@+id/iv_setting"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="16dp"
            android:onClick="@{()->cloneVoiceViewModel.onSettingClick()}"
            android:src="@drawable/icon_clone_setting"
            app:layout_constraintBottom_toBottomOf="@+id/v_menu"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="@+id/v_menu"
            app:layout_constraintTop_toTopOf="@+id/v_menu"
            app:layout_constraintWidth_percent="0.0888888888888889" />



    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>