Data-Recover-Android/app/src/main/res/layout/activity_preview.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="previewViewModel"
            type="com.datarecovery.master.module.preview.PreviewViewModel" />

        <import type="com.datarecovery.master.module.preview.PreviewActivity" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        tools:ignore="contentDescription">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/preview_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:navigationIcon="@drawable/icon_back">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@{previewViewModel.title}"
                android:textColor="#202020"
                android:textSize="17sp"
                android:textStyle="bold"
                tools:text="Preview" />
        </androidx.appcompat.widget.Toolbar>

        <View
            android:id="@+id/preview_background"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#F8F8F8"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/preview_header" />

        <ImageView
            android:id="@+id/preview_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            app:imageUri="@{previewViewModel.previewUri}"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_IMG}"
            app:layout_constraintBottom_toBottomOf="@id/preview_background"
            app:layout_constraintTop_toTopOf="@id/preview_background" />

        <SurfaceView
            android:id="@+id/preview_video"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_VIDEO}"
            app:layout_constraintBottom_toBottomOf="@id/preview_background"
            app:layout_constraintTop_toTopOf="@id/preview_background" />

        <ImageView
            android:id="@+id/preview_play"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/icon_preview_video_play"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_VIDEO || previewViewModel.isPlaying}"
            app:layout_constraintBottom_toBottomOf="@id/preview_video"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintLeft_toLeftOf="@id/preview_video"
            app:layout_constraintRight_toRightOf="@id/preview_video"
            app:layout_constraintTop_toTopOf="@id/preview_video"
            app:layout_constraintWidth_percent="0.1333333333333333" />

        <View
            android:id="@+id/preview_audio_background"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginHorizontal="@dimen/app_common_page_horizontal_padding"
            android:background="@drawable/bg_preview_audio"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_AUDIO}"
            app:layout_constraintBottom_toBottomOf="@id/preview_audio_play"
            app:layout_constraintDimensionRatio="328:88"
            app:layout_constraintTop_toTopOf="@id/preview_audio_play" />

        <ImageView
            android:id="@+id/preview_audio_play"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginHorizontal="@dimen/app_common_page_horizontal_padding"
            android:src="@{previewViewModel.isPlaying ? @drawable/icon_preview_audio_pause : @drawable/icon_preview_audio_play}"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_AUDIO}"
            app:layout_constraintBottom_toTopOf="@id/preview_bottom"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintLeft_toLeftOf="@id/preview_audio_background"
            app:layout_constraintTop_toTopOf="@id/preview_background"
            app:layout_constraintWidth_percent="0.0888888888888889"
            tools:src="@drawable/icon_preview_audio_pause" />

        <SeekBar
            android:id="@+id/preview_audio_seekbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginHorizontal="@dimen/app_common_page_horizontal_padding"
            android:progress="10"
            android:progressDrawable="@drawable/shape_preview_audio_seekbar"
            android:splitTrack="false"
            android:thumb="@drawable/shape_preview_audio_seekbar_thumb"
            app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_AUDIO}"
            app:layout_constraintBottom_toBottomOf="@id/preview_audio_play"
            app:layout_constraintDimensionRatio="252:14"
            app:layout_constraintLeft_toRightOf="@id/preview_audio_play"
            app:layout_constraintRight_toRightOf="@id/preview_audio_background"
            app:layout_constraintTop_toTopOf="@id/preview_audio_play" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/preview_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent">

            <View
                android:id="@+id/v_bottom"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:background="@color/white"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="360:72" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:background="@drawable/bg_common_btn"
                android:gravity="center"
                android:text="@string/export"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="@id/v_bottom"
                app:layout_constraintDimensionRatio="328:44"
                app:layout_constraintEnd_toEndOf="@+id/v_bottom"
                app:layout_constraintStart_toStartOf="@id/v_bottom"
                app:layout_constraintTop_toTopOf="@id/v_bottom"
                app:layout_constraintWidth_percent="0.9111111111111111" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:isGone="@{previewViewModel.type != PreviewActivity.TYPE_IMG}"
                app:layout_constraintBottom_toTopOf="@+id/v_bottom">

                <View
                    android:id="@+id/v_preview_img_bottom"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:background="@drawable/bg_preview_img_bottom"
                    app:layout_constraintDimensionRatio="360:103"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/tv_preview_img_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/app_common_page_horizontal_padding"
                    android:text="@string/preview_img_create_time"
                    android:textColor="#A7A7A7"
                    android:textSize="12sp"
                    app:layout_constraintBottom_toBottomOf="@+id/v_preview_img_bottom"
                    app:layout_constraintStart_toStartOf="@+id/v_preview_img_bottom"
                    app:layout_constraintTop_toTopOf="@+id/v_preview_img_bottom"
                    app:layout_constraintVertical_bias="0.1627906976744186" />


                <TextView
                    android:id="@+id/tv_preview_file_type"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/app_common_page_horizontal_padding"
                    android:text="@string/preview_img_file_type"
                    android:textColor="#A7A7A7"
                    android:textSize="12sp"
                    app:layout_constraintBottom_toBottomOf="@+id/v_preview_img_bottom"
                    app:layout_constraintStart_toStartOf="@+id/v_preview_img_bottom"
                    app:layout_constraintTop_toTopOf="@+id/v_preview_img_bottom" />

                <TextView
                    android:id="@+id/tv_preview_file_size"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/app_common_page_horizontal_padding"
                    android:text="@string/preview_img_file_size"
                    android:textColor="#A7A7A7"
                    android:textSize="12sp"
                    app:layout_constraintBottom_toBottomOf="@+id/v_preview_img_bottom"
                    app:layout_constraintStart_toStartOf="@+id/v_preview_img_bottom"
                    app:layout_constraintTop_toTopOf="@+id/v_preview_img_bottom"
                    app:layout_constraintVertical_bias="0.8372093023255814" />

                <TextView
                    app:layout_constraintStart_toEndOf="@+id/tv_preview_img_name"
                    app:layout_constraintBaseline_toBaselineOf="@+id/tv_preview_img_name"
                    android:textColor="#404040"
                    android:textSize="12sp"
                    android:layout_marginStart="12dp"
                    tools:text="2023-06-26  16:21"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    app:layout_constraintStart_toEndOf="@+id/tv_preview_file_type"
                    app:layout_constraintBaseline_toBaselineOf="@+id/tv_preview_file_type"
                    android:textColor="#404040"
                    android:textSize="12sp"
                    android:layout_marginStart="12dp"
                    tools:text="PNG"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    app:layout_constraintStart_toEndOf="@+id/tv_preview_file_size"
                    app:layout_constraintBaseline_toBaselineOf="@+id/tv_preview_file_size"
                    android:textColor="#404040"
                    android:textSize="12sp"
                    android:layout_marginStart="12dp"
                    tools:text="14.10KB"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </androidx.constraintlayout.widget.ConstraintLayout>

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