增加调音器UI

BaseLibrary/src/main/res/values/colors.xml

@@ -151,6 +151,9 @@
     <color name="color_ff5100">#FF5100</color>
     <color name="color_1a2dc7aa">#1a2dc7aa</color>
     <color name="color_fbfbfb">#fbfbfb</color>
+    <color name="color_4effc2">#4EFFC2</color>
+    <color name="color_ff41d3">#FF41D3</color>
+    <color name="color_00ffcf">#00FFCF</color>
 
     <color name="color_25292e">#25292E</color>
     <color name="color_F8F8F8">#F8F8F8</color>

musictuner/src/main/java/com/cooleshow/musictuner/MusicTunerActivity.java

@@ -18,12 +18,15 @@ import android.view.LayoutInflater;
 import com.cooleshow.base.ui.activity.BaseActivity;
 import com.cooleshow.musictuner.bean.VoiceToneBean;
 import com.cooleshow.musictuner.databinding.ActivityMusicTunerLayoutBinding;
+import com.cooleshow.musictuner.utils.MusicTunerHelper;
 import com.cooleshow.musictuner.utils.VoiceDataUtils;
 
 public class MusicTunerActivity extends BaseActivity<ActivityMusicTunerLayoutBinding> {
 
-    public static void start(Context context){
-        Intent intent =new Intent(context,MusicTunerActivity.class);
+    private MusicTunerHelper mMusicTunerHelper;
+
+    public static void start(Context context) {
+        Intent intent = new Intent(context, MusicTunerActivity.class);
         context.startActivity(intent);
     }
 
@@ -43,33 +46,53 @@ public class MusicTunerActivity extends BaseActivity<ActivityMusicTunerLayoutBin
         return ActivityMusicTunerLayoutBinding.inflate(getLayoutInflater());
     }
 
-    private void test(){
-        AudioDispatcher dispatcher =
-                AudioDispatcherFactory.fromDefaultMicrophone(22050, 1024, 0);
-        PitchDetectionHandler pdh = new PitchDetectionHandler() {
-            @Override
-            public void handlePitch(PitchDetectionResult res, AudioEvent e) {
-                final float pitchInHz = res.getPitch();
-                final float probability = res.getProbability();
-                VoiceToneBean voiceToneBean = VoiceDataUtils.getInstance().searchTarget(pitchInHz);
-                runOnUiThread(new Runnable() {
-                    @Override
-                    public void run() {
-                        viewBinding.tvResult.setText(pitchInHz + "Hz");
-//                        if (voiceToneBean != null) {
-//                            mTvResultVoiceTones.setText(voiceToneBean.name);
-//                            mBeforeResultVoiceTones.setText(voiceToneBean.beforeName);
-//                            mAfterResultVoiceTones.setText(voiceToneBean.afterName);
-//                            mTvDifference.setText(voiceToneBean.difference);
-//                        }
-                    }
-                });
-//                Log.i("pq", "pitchInHz:" + pitchInHz);
-//                Log.i("pq", "probability:" + probability);
-            }
-        };
-        AudioProcessor p = new PitchProcessor(PitchProcessor.PitchEstimationAlgorithm.FFT_YIN, 22050, 1024, pdh);
-        dispatcher.addAudioProcessor(p);
-//        new Thread(dispatcher, "Audio Dispatcher").start();
+    private void test() {
+        if (mMusicTunerHelper == null) {
+            mMusicTunerHelper = new MusicTunerHelper(new MusicTunerHelper.OnEventListener() {
+                @Override
+                public void onResult(float pitchInHz) {
+                    VoiceToneBean voiceToneBean = VoiceDataUtils.getInstance().searchTarget(pitchInHz);
+                    runOnUiThread(new Runnable() {
+                        @Override
+                        public void run() {
+                            if (voiceToneBean != null) {
+                                viewBinding.tvResult.setText(getResultText(voiceToneBean));
+                                viewBinding.tvResultVoiceTones.setText(voiceToneBean.name);
+                                viewBinding.tvBeforeResultVoiceTones.setText(voiceToneBean.beforeName);
+                                viewBinding.tvAfter.setText(voiceToneBean.afterName);
+                                viewBinding.tvDifference.setText(getDifferenceText(voiceToneBean.difference));
+                            }
+                        }
+                    });
+                }
+            });
+        }
+        mMusicTunerHelper.start();
+    }
+
+    private String getResultText(VoiceToneBean voiceToneBean) {
+        if (voiceToneBean != null) {
+            int value = (int) voiceToneBean.voiceFrequencyValue;
+            return voiceToneBean.name + ":" + value + "Hz";
+        }
+        return "";
+    }
+
+    private String getDifferenceText(String diff) {
+        try {
+            double aDouble = Double.valueOf(diff);
+            return String.valueOf(Math.round(aDouble));
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return "";
+    }
+
+    @Override
+    protected void onDestroy() {
+        super.onDestroy();
+        if (mMusicTunerHelper != null) {
+            mMusicTunerHelper.release();
+        }
     }
 }

musictuner/src/main/java/com/cooleshow/musictuner/widget/DashBoardView.java

@@ -6,8 +6,12 @@ import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Path;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
 import android.graphics.Rect;
 import android.graphics.RectF;
+import android.graphics.Shader;
+import android.graphics.SweepGradient;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.util.TypedValue;
@@ -28,23 +32,25 @@ public class DashBoardView extends View {
     private int mRadius;
     private int mCenterX;
     private int mCenterY;
+    private int paddingBottom = SizeUtils.dp2px(9);
 
     private int mSection = 10; // 值域（mMax-mMin）等分份数
     private int mPortion = 10; // 一个mSection等分份数
     private int mStartAngle = 0; // 起始角度
     private float mSweepAngle = mSection * mPortion * 1.8f; // 绘制角度 左边50 右边50 一个刻度1.5度
 
-    private int longScaleLineWidth = dp2px(4);//长刻度线宽度
-    private int longScaleLineHeight = dp2px(12);//长刻度线高度
-    private int shortScaleLineWidth = dp2px(3);//短刻度线宽度
-    private int shortScaleLineHeight = dp2px(8);//短刻度线长度
+    private int longScaleLineWidth = SizeUtils.dp2px(4);//长刻度线宽度
+    private int longScaleLineHeight = SizeUtils.dp2px(12);//长刻度线高度
+    private int shortScaleLineWidth = SizeUtils.dp2px(3);//短刻度线宽度
+    private int shortScaleLineHeight = SizeUtils.dp2px(8);//短刻度线长度
     private Paint mLinePaint;
-    private Paint mCenterPointPaint;
+    private Paint mOuterGradientPaint;
     private String[] mTexts = new String[]{"50", "40", "30", "20", "10", "0", "10", "20", "30", "40", "50"};
     private Paint mTextValuePaint;
-    private Rect mRectText;
-    private RectF mRectFTextArc;
-    private Path mPath;
+    private RectF mGradientLineRectF;
+    private Paint mPointerPaint;
+    private int pointerAngle = 0;
+    private int currentProgress = 0;
 
     public DashBoardView(Context context) {
         this(context, null);
@@ -62,16 +68,12 @@ public class DashBoardView extends View {
     private void init() {
         mLinePaint = new Paint();
         mLinePaint.setStrokeCap(Paint.Cap.ROUND);
-        mLinePaint.setStrokeWidth(dp2px(1));
+        mLinePaint.setStrokeWidth(SizeUtils.dp2px(1));
         mLinePaint.setAlpha(120);
         mLinePaint.setDither(true);
         mLinePaint.setAntiAlias(true);
         mLinePaint.setColor(getResources().getColor(com.cooleshow.base.R.color.color_2dc7aa));
 
-        mCenterPointPaint = new Paint();
-        mCenterPointPaint.setStrokeWidth(dp2px(6));
-        mCenterPointPaint.setStrokeCap(Paint.Cap.ROUND);
-        mCenterPointPaint.setColor(Color.RED);
 
         mTextValuePaint = new Paint();
         mTextValuePaint.setAntiAlias(true);
@@ -81,9 +83,13 @@ public class DashBoardView extends View {
         mTextValuePaint.setTextAlign(Paint.Align.LEFT);
         mTextValuePaint.setStyle(Paint.Style.FILL);
         mTextValuePaint.setAlpha(160);
-        mRectText = new Rect();
-        mPath = new Path();
-        mRectFTextArc = new RectF();
+
+        mPointerPaint = new Paint();
+        mPointerPaint.setAntiAlias(true);
+        mPointerPaint.setDither(true);
+        mPointerPaint.setColor(Color.WHITE);
+        mPointerPaint.setStyle(Paint.Style.FILL);
+        mPointerPaint.setStrokeWidth(SizeUtils.dp2px(2));
     }
 
     @Override
@@ -94,23 +100,45 @@ public class DashBoardView extends View {
         width = MeasureSpec.getSize(widthMeasureSpec);
         height = MeasureSpec.getSize(heightMeasureSpec);
         cx = width / 2;
-        cy = height;
+        cy = height - paddingBottom;
         mRadius = (int) ((width / 2) * 0.8);
         mCenterX = cx;
         mCenterY = cy;
 
-        mTextValuePaint.getTextBounds("0", 0, "0".length(), mRectText);
-        mRectFTextArc.set(
-                mRectText.height(), mRectText.height(),
-                getMeasuredWidth() - mRectText.height(),
-                getMeasuredWidth() - mRectText.height()
+        initGradientPaint();
+
+        mGradientLineRectF = new RectF();
+        mGradientLineRectF.set(
+                (float) (cx - mRadius * 0.75),
+                (float) (cy - (mRadius * 0.75)),
+                (float) (cx + mRadius * 0.75),
+                (float) (cy + (mRadius * 0.75))
         );
     }
 
+    private void initGradientPaint() {
+        if (mOuterGradientPaint == null) {
+            //圆环渐变画笔设置
+            mOuterGradientPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
+            //设置圆环渐变色渲染
+            mOuterGradientPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
+            float position[] = {0f, 0.25f, 0.5f, 0.875f};
+            int[] colors = new int[]{getResources().getColor(com.cooleshow.base.R.color.color_4effc2), getResources().getColor(com.cooleshow.base.R.color.color_4effc2), getResources().getColor(com.cooleshow.base.R.color.color_ff41d3), getResources().getColor(com.cooleshow.base.R.color.color_4effc2)};
+            Shader mShader = new SweepGradient(cx, cy, colors, position);
+            mOuterGradientPaint.setShader(mShader);
+            mOuterGradientPaint.setStrokeCap(Paint.Cap.ROUND);
+            mOuterGradientPaint.setStyle(Paint.Style.STROKE);
+            mOuterGradientPaint.setStrokeWidth(SizeUtils.dp2px(18));
+        }
+    }
+
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
 //        canvas.drawLine(cx, cy, cx, 0, mCenterPointPaint);
+        canvas.drawArc(mGradientLineRectF, -180, 180, false, mOuterGradientPaint);
+        canvas.drawLine(cx, cy, cx, (float) (cy - mRadius * 0.75 - SizeUtils.dp2px(9)), mPointerPaint);
+
         float x0 = mCenterX;
         float y0 = height - mRadius;
         float x1 = mCenterX;
@@ -134,7 +162,6 @@ public class DashBoardView extends View {
         }
         canvas.restore();
 
-
         /**
          * 画短刻度
          * 同样采用canvas的旋转原理
@@ -182,28 +209,28 @@ public class DashBoardView extends View {
         Paint.FontMetrics fontMetrics = mTextValuePaint.getFontMetrics();
         float ascent = fontMetrics.ascent;
         float descent = fontMetrics.descent;
-        Log.i("pq","cx:"+cx);
+        Log.i("pq", "cx:" + cx);
         for (int i = 0; i < mTexts.length; i++) {
             float textWidth = mTextValuePaint.measureText(mTexts[i]);
             double a = i * 18 * Math.PI / 180;
             float baseX;
             float baseY;
-            if(i <5){
-                baseX = (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20))+ 0));
-            }else if(i == 5){
-                baseX = (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20))+ textWidth/2));
-            }else{
-                baseX= (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20)) + textWidth));
+            if (i < 5) {
+                baseX = (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20)) + 0));
+            } else if (i == 5) {
+                baseX = (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20)) + textWidth / 2));
+            } else {
+                baseX = (float) (cx - (Math.cos(a) * (mRadius + SizeUtils.dp2px(20)) + textWidth));
             }
             baseY = (float) (cy - Math.sin(a) *
                     (mRadius + SizeUtils.dp2px(10)));
-            Log.i("pq","baseX:"+baseX);
+            Log.i("pq", "baseX:" + baseX);
             canvas.drawText(mTexts[i], baseX, baseY, mTextValuePaint);
         }
     }
 
-    private int dp2px(int dp) {
-        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
-                Resources.getSystem().getDisplayMetrics());
+
+    private void countPointerPosition() {
+
     }
 }

musictuner/src/main/res/drawable/shape_dash_board_center_ball.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <gradient
+        android:angle="270"
+        android:endColor="#101318"
+        android:startColor="#1A1C21" />
+</shape>

musictuner/src/main/res/drawable/shape_music_tuner_bg.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient android:startColor="#1D2027"
+        android:endColor="#17181C"/>
+</shape>

musictuner/src/main/res/layout/activity_music_tuner_layout.xml

@@ -4,78 +4,225 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:background="@drawable/shape_music_tuner_bg"
     tools:context=".MusicTunerActivity">
 
     <include
         android:id="@+id/toolbar_include"
-        layout="@layout/common_toolbar_layout_white"/>
+        layout="@layout/common_toolbar_layout_white" />
+
+    <ImageView
+        android:id="@+id/iv_dash_board_bg"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:layout_marginTop="43dp"
+        android:layout_marginEnd="8dp"
+        android:background="@drawable/bg_dash_board"
+        app:layout_constraintTop_toBottomOf="@+id/toolbar_include" />
 
     <com.cooleshow.musictuner.widget.DashBoardView
-        app:layout_constraintTop_toBottomOf="@+id/toolbar_include"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        android:background="#000000"
         android:id="@+id/view_dash_board"
-        android:layout_width="303dp"
-        android:layout_height="153dp"/>
+        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" />
 
     <TextView
-        android:id="@+id/tv_result"
-        android:layout_marginTop="100dp"
-        app:layout_constraintTop_toBottomOf="@+id/view_dash_board"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        tools:text="haha"
-        android:textColor="#000000"
-        android:textSize="30sp"
+        android:id="@+id/tv_difference"
         android:layout_width="wrap_content"
-        android:layout_height="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
-        app:layout_constraintTop_toBottomOf="@+id/tv_result"
-        android:id="@+id/tv_result_voice_tones"
-        android:layout_marginTop="100dp"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        tools:text="C"
-        android:textColor="#000000"
-        android:textSize="40sp"
+        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_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
-        app:layout_constraintBaseline_toBaselineOf="@+id/tv_result_voice_tones"
-        android:id="@+id/tv_before_result_voice_tones"
+        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"
-        tools:text="C"
-        android:textColor="#000000"
-        android:textSize="20sp"
-        android:textStyle="bold"
+        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_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" />
 
-    <TextView
-        app:layout_constraintBaseline_toBaselineOf="@+id/tv_result_voice_tones"
-        android:id="@+id/tv_after"
+    <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"
-        tools:text="C"
-        android:textColor="#000000"
-        android:textSize="20sp"
-        android:textStyle="bold"
+        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_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
-        tools:text="C"
-        android:layout_marginBottom="10dp"
-        app:layout_constraintRight_toRightOf="@+id/tv_result_voice_tones"
-        app:layout_constraintLeft_toLeftOf="@+id/tv_result_voice_tones"
-        app:layout_constraintBottom_toTopOf="@+id/tv_result_voice_tones"
-        android:textColor="#000000"
-        android:textSize="20sp"
-        android:id="@+id/tv_difference"
         android:layout_width="wrap_content"
-        android:layout_height="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" />
+
+
+    <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" />
+
+    <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: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>