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

    <include
        android:id="@+id/toolbar_include"
        layout="@layout/common_toolbar_layout" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="wrap_content"
        android:layout_height="21dp"
        android:layout_marginStart="13dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="13dp"
        android:overScrollMode="never"
        android:scrollbars="none"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar_include" />

    <ImageView
        android:id="@+id/iv_plate"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="65dp"
        android:src="@mipmap/bg_metronome"
        android:visibility="visible"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar_include" />

    <com.cooleshow.metronome.widget.CircularSeekBar
        android:id="@+id/cir_seekbar"
        android:layout_width="220dp"
        android:layout_height="220dp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_plate"
        app:layout_constraintLeft_toLeftOf="@+id/iv_plate"
        app:layout_constraintRight_toRightOf="@+id/iv_plate"
        app:layout_constraintTop_toTopOf="@+id/iv_plate" />

    <TextView
        android:id="@+id/tv_speed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:includeFontPadding="false"
        android:text="136"
        android:textColor="@color/color_333333"
        android:textSize="@dimen/sp_40"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/iv_plate"
        app:layout_constraintLeft_toLeftOf="@+id/iv_plate"
        app:layout_constraintRight_toRightOf="@+id/iv_plate"
        app:layout_constraintTop_toTopOf="@+id/iv_plate"
        tools:text="136" />


    <ImageView
        android:id="@+id/iv_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_quarter_note"
        app:layout_constraintCircle="@+id/tv_speed"
        app:layout_constraintCircleAngle="320"
        app:layout_constraintCircleRadius="55dp" />

    <TextView

        android:textColor="@color/color_333333"
        android:textSize="@dimen/sp_14"
        app:layout_constraintLeft_toRightOf="@+id/iv_note"
        app:layout_constraintBottom_toBottomOf="@+id/iv_note"
        app:layout_constraintTop_toTopOf="@+id/iv_note"
        android:text="="
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/iv_reduce"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="11dp"
        android:src="@mipmap/icon_metronome_bt_bg"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@+id/iv_plate"
        app:layout_constraintRight_toLeftOf="@+id/iv_beat_value"
        app:layout_constraintTop_toBottomOf="@+id/iv_plate" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_reduce_symbol"
        app:layout_constraintBottom_toBottomOf="@+id/iv_reduce"
        app:layout_constraintLeft_toLeftOf="@+id/iv_reduce"
        app:layout_constraintRight_toRightOf="@+id/iv_reduce"
        app:layout_constraintTop_toTopOf="@+id/iv_reduce" />

    <ImageView
        android:id="@+id/iv_beat_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_beat_value_bg"
        app:layout_constraintLeft_toRightOf="@+id/iv_reduce"
        app:layout_constraintRight_toLeftOf="@+id/iv_add"
        app:layout_constraintTop_toTopOf="@+id/iv_reduce" />

    <ImageView
        android:id="@+id/iv_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_metronome_bt_bg"
        app:layout_constraintLeft_toRightOf="@+id/iv_beat_value"
        app:layout_constraintRight_toRightOf="@+id/iv_plate"
        app:layout_constraintTop_toTopOf="@+id/iv_reduce" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_add_symbol"
        app:layout_constraintBottom_toBottomOf="@+id/iv_add"
        app:layout_constraintLeft_toLeftOf="@+id/iv_add"
        app:layout_constraintRight_toRightOf="@+id/iv_add"
        app:layout_constraintTop_toTopOf="@+id/iv_add" />

    <TextView
        android:id="@+id/tv_current_beat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:includeFontPadding="false"
        android:text="6/4"
        android:textColor="@color/color_1a1a1a"
        android:textSize="@dimen/sp_16"
        app:layout_constraintBottom_toBottomOf="@+id/iv_beat_value"
        app:layout_constraintLeft_toLeftOf="@+id/iv_beat_value"
        app:layout_constraintRight_toRightOf="@+id/iv_beat_value"
        app:layout_constraintTop_toTopOf="@+id/iv_beat_value"
        tools:text="6/4" />

    <androidx.appcompat.widget.AppCompatSeekBar
        android:layout_marginTop="24dp"
        android:id="@+id/volume_seek_bar"
        android:layout_width="182dp"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_beat_value"
        android:thumb="@drawable/shape_volume_seekbar_thumb"
        android:progressDrawable="@drawable/bg_volume_seekbar"
        android:max="100"
        android:progress="50"
        android:maxHeight="4dp"
        android:splitTrack="false"
        android:visibility="visible" />

    <ImageView
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/volume_seek_bar"
        app:layout_constraintTop_toTopOf="@+id/volume_seek_bar"
        app:layout_constraintRight_toLeftOf="@+id/volume_seek_bar"
        android:src="@mipmap/icon_volume_trumpet_reduce"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/volume_seek_bar"
        app:layout_constraintTop_toTopOf="@+id/volume_seek_bar"
        app:layout_constraintLeft_toRightOf="@+id/volume_seek_bar"
        android:src="@mipmap/icon_volume_trumpet_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_play"
        android:layout_width="0dp"
        android:layout_height="45dp"
        android:layout_marginStart="53dp"
        android:layout_marginTop="101dp"
        android:layout_marginEnd="53dp"
        android:background="@drawable/shape_2dc7aa_24dp"
        android:elevation="10dp"
        android:gravity="center"
        android:text="播放"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_16"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_beat_value" />
</androidx.constraintlayout.widget.ConstraintLayout>