浏览代码

调整页面布局 支持滚动 适配

Pq 2 年之前
父节点
当前提交
31c93ac12a
共有 1 个文件被更改,包括 354 次插入336 次删除
  1. 354 336
      musictuner/src/main/res/layout/activity_music_tuner_layout.xml

+ 354 - 336
musictuner/src/main/res/layout/activity_music_tuner_layout.xml

@@ -1,349 +1,367 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout 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"
     android:background="@drawable/shape_music_tuner_bg"
+    android:orientation="vertical"
     tools:context=".MusicTunerActivity">
 
     <include
         android:id="@+id/toolbar_include"
         layout="@layout/common_toolbar_layout_white" />
 
-    <TextView
-        android:id="@+id/tv_music_hz_standard"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="10dp"
-        android:includeFontPadding="false"
-        android:paddingStart="12dp"
-        android:text="A4=440Hz"
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_16"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_dash_board_bg"
-        app:layout_constraintTop_toBottomOf="@+id/toolbar_include" />
-
-    <ImageView
-        android:id="@+id/iv_music_hz_tip"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="5dp"
-        android:src="@drawable/icon_music_hz_tip"
-        android:visibility="gone"
-        app:layout_constraintBottom_toBottomOf="@+id/tv_music_hz_standard"
-        app:layout_constraintLeft_toRightOf="@+id/tv_music_hz_standard"
-        app:layout_constraintTop_toTopOf="@+id/tv_music_hz_standard" />
-
-    <ImageView
-        android:id="@+id/iv_dash_board_bg"
+    <ScrollView
+        android:overScrollMode="never"
+        android:scrollbars="none"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="43dp"
-        android:layout_marginEnd="8dp"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_dash_board"
-        app:layout_constraintTop_toBottomOf="@+id/toolbar_include" />
-
-    <com.cooleshow.musictuner.widget.DashBoardView
-        android:id="@+id/view_dash_board"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginBottom="42dp"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_dash_board_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_dash_board_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_dash_board_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_dash_board_bg" />
-
-    <View
-        android:id="@+id/helper_view1"
-        android:layout_width="1px"
-        android:layout_height="1px"
-        android:layout_marginBottom="9dp"
-        app:layout_constraintBottom_toBottomOf="@+id/view_dash_board"
-        app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
-        app:layout_constraintRight_toRightOf="@+id/view_dash_board" />
-
-    <View
-        android:id="@+id/view_ball"
-        android:layout_width="90dp"
-        android:layout_height="90dp"
-        android:background="@drawable/shape_dash_board_center_ball"
-        app:layout_constraintBottom_toBottomOf="@+id/helper_view1"
-        app:layout_constraintLeft_toLeftOf="@+id/helper_view1"
-        app:layout_constraintRight_toRightOf="@+id/helper_view1"
-        app:layout_constraintTop_toTopOf="@+id/helper_view1" />
-
-    <ImageView
-        android:visibility="gone"
-        android:id="@+id/iv_correct"
-        android:layout_marginBottom="10dp"
-        app:layout_constraintBottom_toTopOf="@+id/view_ball"
-        app:layout_constraintRight_toRightOf="@+id/view_ball"
-        app:layout_constraintLeft_toLeftOf="@+id/view_ball"
-        android:src="@drawable/icon_music_tuner_correct_tag"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"/>
-
-    <TextView
-        android:id="@+id/tv_difference"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="22dp"
-        android:layout_marginBottom="10dp"
-        android:includeFontPadding="false"
-        android:text="0¢"
-        android:textColor="@color/color_00ffcf"
-        android:textSize="@dimen/sp_26"
-        android:textStyle="bold"
-        app:layout_constraintLeft_toLeftOf="@+id/view_ball"
-        app:layout_constraintRight_toRightOf="@+id/view_ball"
-        app:layout_constraintTop_toTopOf="@+id/view_ball"
-        tools:text="28¢" />
-
-
-    <TextView
-        android:id="@+id/tv_before_result_voice_tones"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="44dp"
-        android:layout_marginTop="10dp"
-        android:textColor="@color/color_999999"
-        android:textSize="12sp"
-        android:textStyle="bold"
-        app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
-        app:layout_constraintTop_toBottomOf="@+id/view_dash_board"
-        tools:text="C" />
-
-    <TextView
-        android:id="@+id/tv_after"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="44dp"
-        android:textColor="@color/color_999999"
-        android:textSize="12sp"
-        android:textStyle="bold"
-        app:layout_constraintRight_toRightOf="@+id/view_dash_board"
-        app:layout_constraintTop_toTopOf="@+id/tv_before_result_voice_tones"
-        tools:text="C" />
-
-
-    <TextView
-        android:id="@+id/tv_result"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="14dp"
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_14"
-        app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
-        app:layout_constraintRight_toRightOf="@+id/view_dash_board"
-        app:layout_constraintTop_toTopOf="@+id/view_dash_board"
-        tools:text="B0:30Hz" />
-
-    <ImageView
-        android:id="@+id/iv_left_hole"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="28dp"
-        android:layout_marginTop="24dp"
-        android:src="@drawable/icon_music_hole"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/iv_dash_board_bg" />
-
-    <ImageView
-        android:id="@+id/iv_hz_reduce"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="12dp"
-        android:src="@drawable/icon_music_hz_reduce"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_left_hole"
-        app:layout_constraintLeft_toRightOf="@+id/iv_left_hole"
-        app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
-
-    <ImageView
-        android:id="@+id/iv_right_hole"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="28dp"
-        android:src="@drawable/icon_music_hole"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
-
-
-    <ImageView
-        android:id="@+id/iv_hz_add"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="12dp"
-        android:src="@drawable/icon_music_hz_add"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_right_hole"
-        app:layout_constraintRight_toLeftOf="@+id/iv_right_hole"
-        app:layout_constraintTop_toTopOf="@+id/iv_right_hole" />
-
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="CALIB"
-        android:textColor="@color/color_999999"
-        android:textSize="@dimen/sp_16"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_left_hole"
-        app:layout_constraintLeft_toRightOf="@+id/iv_hz_reduce"
-        app:layout_constraintRight_toLeftOf="@+id/iv_hz_add"
-        app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
-
-    <ImageView
-        android:id="@+id/iv_bottom_bg"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="6dp"
-        android:adjustViewBounds="true"
-        android:src="@drawable/bg_music_tuner_bottom"
-        app:layout_constraintTop_toBottomOf="@+id/iv_hz_reduce" />
-
-    <ProgressBar
-        android:id="@+id/progress"
-        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
-        android:layout_width="0dp"
-        android:layout_height="8dp"
-        android:layout_marginBottom="26dp"
-        android:layout_marginStart="26dp"
-        android:layout_marginEnd="26dp"
-        android:max="50"
-        android:progress="48"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
-        android:progressDrawable="@drawable/shape_tuner_diff_progress_drawable" />
-
-    <TextView
-        android:id="@+id/tv_result_voice_tones"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:textColor="@color/white"
-        android:textSize="38sp"
-        android:textStyle="bold"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg"
-        tools:text="C" />
-
-    <TextView
-        android:id="@+id/tv_original_result_title"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="39dp"
-        android:text="Concert"
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_14"
-        app:layout_constraintHorizontal_chainStyle="spread"
-        app:layout_constraintLeft_toLeftOf="@+id/tv_original_result"
-        app:layout_constraintRight_toRightOf="@+id/tv_original_result"
-        app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg" />
-
-    <TextView
-        android:id="@+id/tv_transposing_result_title"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="F# ins."
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_14"
-        app:layout_constraintLeft_toLeftOf="@+id/tv_transposing_result"
-        app:layout_constraintRight_toRightOf="@+id/tv_transposing_result"
-        app:layout_constraintTop_toTopOf="@+id/tv_original_result_title" />
-
-    <TextView
-        android:id="@+id/tv_original_result"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="10dp"
-        android:gravity="center"
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_38"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_transposing_tag"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
-        app:layout_constraintRight_toLeftOf="@+id/iv_transposing_tag"
-        app:layout_constraintTop_toTopOf="@+id/iv_transposing_tag"
-        tools:text="A#" />
-
-
-    <ImageView
-        android:id="@+id/iv_transposing_tag"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/icon_transposing_tag"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg" />
-
-    <TextView
-        android:id="@+id/tv_transposing_result"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="10dp"
-        android:gravity="center"
-        android:textColor="@color/white"
-        android:textSize="@dimen/sp_38"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_transposing_tag"
-        app:layout_constraintLeft_toRightOf="@+id/iv_transposing_tag"
-        app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_transposing_tag"
-        tools:text="A#" />
-
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/group_transposing"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:visibility="gone"
-        app:constraint_referenced_ids="tv_transposing_result,iv_transposing_tag,tv_original_result,tv_transposing_result_title,tv_original_result_title" />
-
-    <ImageView
-        android:id="@+id/iv_left_bg"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/bg_tuning_fork"
-        app:layout_constraintHorizontal_chainStyle="packed"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toLeftOf="@+id/iv_right_bg"
-        app:layout_constraintTop_toBottomOf="@+id/iv_bottom_bg" />
-
-
-    <ImageView
-        android:id="@+id/iv_right_bg"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/bg_tuner_music"
-        app:layout_constraintLeft_toRightOf="@+id/iv_left_bg"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/iv_left_bg" />
-
-    <ImageView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/icon_tuning_fork"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_left_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_left_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_left_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_left_bg" />
-
-
-    <ImageView
-        android:id="@+id/iv_play_fork"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/icon_music_tuner_normal"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_right_bg"
-        app:layout_constraintLeft_toLeftOf="@+id/iv_right_bg"
-        app:layout_constraintRight_toRightOf="@+id/iv_right_bg"
-        app:layout_constraintTop_toTopOf="@+id/iv_right_bg" />
-
-    <ImageView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/icon_bottom_hole"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/iv_left_bg" />
-</androidx.constraintlayout.widget.ConstraintLayout>
+        android:layout_height="match_parent">
+
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+
+            <TextView
+                android:id="@+id/tv_music_hz_standard"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="10dp"
+                android:includeFontPadding="false"
+                android:paddingStart="12dp"
+                android:text="A4=440Hz"
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_16"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_dash_board_bg"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/iv_music_hz_tip"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="5dp"
+                android:src="@drawable/icon_music_hz_tip"
+                android:visibility="gone"
+                app:layout_constraintBottom_toBottomOf="@+id/tv_music_hz_standard"
+                app:layout_constraintLeft_toRightOf="@+id/tv_music_hz_standard"
+                app:layout_constraintTop_toTopOf="@+id/tv_music_hz_standard" />
+
+            <ImageView
+                android:id="@+id/iv_dash_board_bg"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="43dp"
+                android:layout_marginEnd="8dp"
+                android:adjustViewBounds="true"
+                android:scaleType="fitXY"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintLeft_toLeftOf="parent"
+                android:src="@drawable/bg_dash_board"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <com.cooleshow.musictuner.widget.DashBoardView
+                android:id="@+id/view_dash_board"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:layout_marginBottom="42dp"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_dash_board_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_dash_board_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_dash_board_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_dash_board_bg" />
+
+            <View
+                android:id="@+id/helper_view1"
+                android:layout_width="1px"
+                android:layout_height="1px"
+                android:layout_marginBottom="9dp"
+                app:layout_constraintBottom_toBottomOf="@+id/view_dash_board"
+                app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
+                app:layout_constraintRight_toRightOf="@+id/view_dash_board" />
+
+            <View
+                android:id="@+id/view_ball"
+                android:layout_width="84dp"
+                android:layout_height="84dp"
+                android:background="@drawable/shape_dash_board_center_ball"
+                app:layout_constraintBottom_toBottomOf="@+id/helper_view1"
+                app:layout_constraintLeft_toLeftOf="@+id/helper_view1"
+                app:layout_constraintRight_toRightOf="@+id/helper_view1"
+                app:layout_constraintTop_toTopOf="@+id/helper_view1" />
+
+            <ImageView
+                android:id="@+id/iv_correct"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="10dp"
+                android:src="@drawable/icon_music_tuner_correct_tag"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@+id/view_ball"
+                app:layout_constraintLeft_toLeftOf="@+id/view_ball"
+                app:layout_constraintRight_toRightOf="@+id/view_ball" />
+
+            <TextView
+                android:id="@+id/tv_difference"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="22dp"
+                android:layout_marginBottom="10dp"
+                android:includeFontPadding="false"
+                android:text="0¢"
+                android:textColor="@color/color_00ffcf"
+                android:textSize="@dimen/sp_26"
+                android:textStyle="bold"
+                app:layout_constraintLeft_toLeftOf="@+id/view_ball"
+                app:layout_constraintRight_toRightOf="@+id/view_ball"
+                app:layout_constraintTop_toTopOf="@+id/view_ball"
+                tools:text="28¢" />
+
+
+            <TextView
+                android:id="@+id/tv_before_result_voice_tones"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="44dp"
+                android:layout_marginTop="10dp"
+                android:textColor="@color/color_999999"
+                android:textSize="12sp"
+                android:textStyle="bold"
+                app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
+                app:layout_constraintTop_toBottomOf="@+id/view_dash_board"
+                tools:text="C" />
+
+            <TextView
+                android:id="@+id/tv_after"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="44dp"
+                android:textColor="@color/color_999999"
+                android:textSize="12sp"
+                android:textStyle="bold"
+                app:layout_constraintRight_toRightOf="@+id/view_dash_board"
+                app:layout_constraintTop_toTopOf="@+id/tv_before_result_voice_tones"
+                tools:text="C" />
+
+
+            <TextView
+                android:id="@+id/tv_result"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="14dp"
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_14"
+                app:layout_constraintLeft_toLeftOf="@+id/view_dash_board"
+                app:layout_constraintRight_toRightOf="@+id/view_dash_board"
+                app:layout_constraintTop_toTopOf="@+id/view_dash_board"
+                tools:text="B0:30Hz" />
+
+            <ImageView
+                android:id="@+id/iv_left_hole"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="28dp"
+                android:layout_marginTop="24dp"
+                android:src="@drawable/icon_music_hole"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/iv_dash_board_bg" />
+
+            <ImageView
+                android:id="@+id/iv_hz_reduce"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="12dp"
+                android:src="@drawable/icon_music_hz_reduce"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_left_hole"
+                app:layout_constraintLeft_toRightOf="@+id/iv_left_hole"
+                app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
+
+            <ImageView
+                android:id="@+id/iv_right_hole"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="28dp"
+                android:src="@drawable/icon_music_hole"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
+
+
+            <ImageView
+                android:id="@+id/iv_hz_add"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="12dp"
+                android:src="@drawable/icon_music_hz_add"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_right_hole"
+                app:layout_constraintRight_toLeftOf="@+id/iv_right_hole"
+                app:layout_constraintTop_toTopOf="@+id/iv_right_hole" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="CALIB"
+                android:textColor="@color/color_999999"
+                android:textSize="@dimen/sp_16"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_left_hole"
+                app:layout_constraintLeft_toRightOf="@+id/iv_hz_reduce"
+                app:layout_constraintRight_toLeftOf="@+id/iv_hz_add"
+                app:layout_constraintTop_toTopOf="@+id/iv_left_hole" />
+
+            <ImageView
+                android:id="@+id/iv_bottom_bg"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="6dp"
+                android:adjustViewBounds="true"
+                android:src="@drawable/bg_music_tuner_bottom"
+                app:layout_constraintTop_toBottomOf="@+id/iv_hz_reduce" />
+
+            <ProgressBar
+                android:id="@+id/progress"
+                style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+                android:layout_width="0dp"
+                android:layout_height="8dp"
+                android:layout_marginStart="26dp"
+                android:layout_marginEnd="26dp"
+                android:layout_marginBottom="26dp"
+                android:max="50"
+                android:progress="48"
+                android:progressDrawable="@drawable/shape_tuner_diff_progress_drawable"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg" />
+
+            <TextView
+                android:id="@+id/tv_result_voice_tones"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textColor="@color/white"
+                android:textSize="38sp"
+                android:textStyle="bold"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg"
+                tools:text="C" />
+
+            <TextView
+                android:id="@+id/tv_original_result_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="39dp"
+                android:text="Concert"
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_14"
+                app:layout_constraintHorizontal_chainStyle="spread"
+                app:layout_constraintLeft_toLeftOf="@+id/tv_original_result"
+                app:layout_constraintRight_toRightOf="@+id/tv_original_result"
+                app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg" />
+
+            <TextView
+                android:id="@+id/tv_transposing_result_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="F# ins."
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_14"
+                app:layout_constraintLeft_toLeftOf="@+id/tv_transposing_result"
+                app:layout_constraintRight_toRightOf="@+id/tv_transposing_result"
+                app:layout_constraintTop_toTopOf="@+id/tv_original_result_title" />
+
+            <TextView
+                android:id="@+id/tv_original_result"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="10dp"
+                android:gravity="center"
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_38"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_transposing_tag"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
+                app:layout_constraintRight_toLeftOf="@+id/iv_transposing_tag"
+                app:layout_constraintTop_toTopOf="@+id/iv_transposing_tag"
+                tools:text="A#" />
+
+
+            <ImageView
+                android:id="@+id/iv_transposing_tag"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/icon_transposing_tag"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_bottom_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_bottom_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_bottom_bg" />
+
+            <TextView
+                android:id="@+id/tv_transposing_result"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="10dp"
+                android:gravity="center"
+                android:textColor="@color/white"
+                android:textSize="@dimen/sp_38"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_transposing_tag"
+                app:layout_constraintLeft_toRightOf="@+id/iv_transposing_tag"
+                app:layout_constraintRight_toRightOf="@+id/iv_bottom_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_transposing_tag"
+                tools:text="A#" />
+
+            <androidx.constraintlayout.widget.Group
+                android:id="@+id/group_transposing"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="gone"
+                app:constraint_referenced_ids="tv_transposing_result,iv_transposing_tag,tv_original_result,tv_transposing_result_title,tv_original_result_title" />
+
+            <ImageView
+                android:id="@+id/iv_left_bg"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/bg_tuning_fork"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintRight_toLeftOf="@+id/iv_right_bg"
+                app:layout_constraintTop_toBottomOf="@+id/iv_bottom_bg" />
+
+
+            <ImageView
+                android:id="@+id/iv_right_bg"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/bg_tuner_music"
+                app:layout_constraintLeft_toRightOf="@+id/iv_left_bg"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintTop_toTopOf="@+id/iv_left_bg" />
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/icon_tuning_fork"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_left_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_left_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_left_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_left_bg" />
+
+
+            <ImageView
+                android:id="@+id/iv_play_fork"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/icon_music_tuner_normal"
+                app:layout_constraintBottom_toBottomOf="@+id/iv_right_bg"
+                app:layout_constraintLeft_toLeftOf="@+id/iv_right_bg"
+                app:layout_constraintRight_toRightOf="@+id/iv_right_bg"
+                app:layout_constraintTop_toTopOf="@+id/iv_right_bg" />
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/icon_bottom_hole"
+                app:layout_constraintLeft_toLeftOf="parent"
+                app:layout_constraintRight_toRightOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/iv_left_bg" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </ScrollView>
+</LinearLayout>