更新Dialog界面与SCV控件

app/src/main/java/io/legato/kazusa/base/BaseDialogFragment.kt

@@ -1,5 +1,6 @@
 package io.legato.kazusa.base
 
+import android.app.Dialog
 import android.content.DialogInterface
 import android.content.DialogInterface.OnDismissListener
 import android.os.Bundle
@@ -8,11 +9,11 @@ import androidx.annotation.LayoutRes
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.FragmentManager
 import androidx.lifecycle.lifecycleScope
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import io.legato.kazusa.R
 import io.legato.kazusa.constant.AppLog
 import io.legato.kazusa.help.config.AppConfig
 import io.legato.kazusa.help.coroutine.Coroutine
-import io.legato.kazusa.lib.theme.ThemeStore
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlin.coroutines.CoroutineContext
@@ -25,6 +26,17 @@ abstract class BaseDialogFragment(
 
     private var onDismissListener: OnDismissListener? = null
 
+    private lateinit var dialogView: View
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        dialogView = onCreateView(layoutInflater, null, savedInstanceState)!!
+        return MaterialAlertDialogBuilder(requireContext(), theme)
+            .setView(dialogView)
+            .create()
+    }
+
+    override fun getView(): View? = dialogView
+
     fun setOnDismissListener(onDismissListener: OnDismissListener?) {
         this.onDismissListener = onDismissListener
     }

app/src/main/java/io/legato/kazusa/ui/book/read/config/PaddingConfigDialog.kt

@@ -4,14 +4,15 @@ import android.content.DialogInterface
 import android.os.Bundle
 import android.view.View
 import io.legato.kazusa.R
-import io.legato.kazusa.base.BaseBottomSheetDialogFragment
+import io.legato.kazusa.base.BaseDialogFragment
 import io.legato.kazusa.constant.EventBus
 import io.legato.kazusa.databinding.DialogReadPaddingBinding
 import io.legato.kazusa.help.config.ReadBookConfig
 import io.legato.kazusa.utils.postEvent
+import io.legato.kazusa.utils.setLayout
 import io.legato.kazusa.utils.viewbindingdelegate.viewBinding
 
-class PaddingConfigDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_padding) {
+class PaddingConfigDialog : BaseDialogFragment(R.layout.dialog_read_padding) {
 
     private val binding by viewBinding(DialogReadPaddingBinding::bind)
 
@@ -25,6 +26,11 @@ class PaddingConfigDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_p
         ReadBookConfig.save()
     }
 
+    override fun onStart() {
+        super.onStart()
+        setLayout(0.9f, 0.9f)
+    }
+
     private fun initData() = binding.run {
         //正文
         dsbPaddingTop.progress = ReadBookConfig.paddingTop

app/src/main/java/io/legato/kazusa/ui/book/read/config/ReadSpacingDialog.kt

@@ -0,0 +1,63 @@
+package io.legato.kazusa.ui.book.read.config
+
+import android.content.DialogInterface
+import android.os.Bundle
+import android.view.View
+import io.legato.kazusa.R
+import io.legato.kazusa.base.BaseBottomSheetDialogFragment
+import io.legato.kazusa.constant.EventBus
+import io.legato.kazusa.databinding.DialogReadBookSpacingBinding
+import io.legato.kazusa.help.config.ReadBookConfig
+import io.legato.kazusa.ui.book.read.ReadBookActivity
+import io.legato.kazusa.utils.postEvent
+import io.legato.kazusa.utils.viewbindingdelegate.viewBinding
+
+class ReadSpacingDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_spacing) {
+
+    private val binding by viewBinding(DialogReadBookSpacingBinding::bind)
+    private val callBack get() = activity as? ReadBookActivity
+
+    override fun onFragmentCreated(view: View, savedInstanceState: Bundle?) {
+        (activity as ReadBookActivity).bottomDialog++
+        initView()
+        upView()
+        initViewEvent()
+    }
+
+    override fun onDismiss(dialog: DialogInterface) {
+        super.onDismiss(dialog)
+        ReadBookConfig.save()
+        (activity as ReadBookActivity).bottomDialog--
+    }
+
+    private fun initView() = binding.run {
+        dsbTextLetterSpacing.valueFormat = {
+            ((it - 50) / 100f).toString()
+        }
+        dsbLineSize.valueFormat = { ((it - 10) / 10f).toString() }
+        dsbParagraphSpacing.valueFormat = { (it / 10f).toString() }
+    }
+
+    private fun initViewEvent() = binding.run {
+        dsbTextLetterSpacing.onChanged = {
+            ReadBookConfig.letterSpacing = (it - 50) / 100f
+            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
+        }
+        dsbLineSize.onChanged = {
+            ReadBookConfig.lineSpacingExtra = it
+            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
+        }
+        dsbParagraphSpacing.onChanged = {
+            ReadBookConfig.paragraphSpacing = it
+            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
+        }
+    }
+
+    private fun upView() = binding.run {
+        ReadBookConfig.let {
+            dsbTextLetterSpacing.progress = (it.letterSpacing * 100).toInt() + 50
+            dsbLineSize.progress = it.lineSpacingExtra
+            dsbParagraphSpacing.progress = it.paragraphSpacing
+        }
+    }
+}

app/src/main/java/io/legato/kazusa/ui/book/read/config/ReadStyleDialog.kt

@@ -17,6 +17,7 @@ import io.legato.kazusa.databinding.ItemReadStyleBinding
 import io.legato.kazusa.help.config.AppConfig
 import io.legato.kazusa.help.config.ReadBookConfig
 import io.legato.kazusa.help.config.ThemeConfig
+import io.legato.kazusa.lib.dialogs.alert
 import io.legato.kazusa.lib.dialogs.selector
 import io.legato.kazusa.model.ReadBook
 import io.legato.kazusa.ui.book.read.ReadBookActivity
@@ -56,11 +57,7 @@ class ReadStyleDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_
         dsbTextSize.valueFormat = {
             (it + 5).toString()
         }
-        dsbTextLetterSpacing.valueFormat = {
-            ((it - 50) / 100f).toString()
-        }
-        dsbLineSize.valueFormat = { ((it - 10) / 10f).toString() }
-        dsbParagraphSpacing.valueFormat = { (it / 10f).toString() }
+
         styleAdapter = StyleAdapter()
         rvStyle.adapter = styleAdapter
         styleAdapter.addFooterView {
@@ -76,6 +73,8 @@ class ReadStyleDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_
                 }
             }
         }
+
+
     }
 
     private fun initData() {
@@ -85,10 +84,18 @@ class ReadStyleDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_
     }
 
     private fun initViewEvent() = binding.run {
-        chineseConverter.onChanged {
-            ChineseUtils.unLoad(*TransType.entries.toTypedArray())
-            postEvent(EventBus.UP_CONFIG, arrayListOf(5))
+        btnChineseConverter.setOnClickListener {
+            alert(titleResource = R.string.chinese_converter) {
+                items(resources.getStringArray(R.array.chinese_mode).toList()) { _, i ->
+                    AppConfig.chineseConverterType = i
+
+                    // 不需要更新文字，也不需要切换图标
+                    ChineseUtils.unLoad(*TransType.entries.toTypedArray())
+                    postEvent(EventBus.UP_CONFIG, arrayListOf(5))
+                }
+            }
         }
+
         textFontWeightConverter.onChanged {
             postEvent(EventBus.UP_CONFIG, arrayListOf(8, 9, 6))
         }
@@ -149,17 +156,9 @@ class ReadStyleDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_
             ReadBookConfig.textSize = it + 5
             postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
         }
-        dsbTextLetterSpacing.onChanged = {
-            ReadBookConfig.letterSpacing = (it - 50) / 100f
-            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
-        }
-        dsbLineSize.onChanged = {
-            ReadBookConfig.lineSpacingExtra = it
-            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
-        }
-        dsbParagraphSpacing.onChanged = {
-            ReadBookConfig.paragraphSpacing = it
-            postEvent(EventBus.UP_CONFIG, arrayListOf(8, 5))
+
+        btnSpacing.setOnClickListener {
+            callBack?.showSpacingDialog()
         }
     }
 
@@ -193,9 +192,6 @@ class ReadStyleDialog : BaseBottomSheetDialogFragment(R.layout.dialog_read_book_
         }
         ReadBookConfig.let {
             dsbTextSize.progress = it.textSize - 5
-            dsbTextLetterSpacing.progress = (it.letterSpacing * 100).toInt() + 50
-            dsbLineSize.progress = it.lineSpacingExtra
-            dsbParagraphSpacing.progress = it.paragraphSpacing
         }
     }
 

app/src/main/java/io/legato/kazusa/ui/widget/SimpleCounterView.kt

@@ -8,10 +8,13 @@ import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.MotionEvent
 import android.widget.FrameLayout
+import android.widget.TextView
 import androidx.appcompat.widget.TooltipCompat
 import io.legato.kazusa.R
 import io.legato.kazusa.databinding.ViewSimpleCounterBinding
 import io.legato.kazusa.lib.dialogs.alert
+import io.legato.kazusa.utils.gone
+import io.legato.kazusa.utils.visible
 
 @SuppressLint("ViewConstructor", "ClickableViewAccessibility")
 class SimpleCounterView @JvmOverloads constructor(
@@ -20,7 +23,7 @@ class SimpleCounterView @JvmOverloads constructor(
 ) : FrameLayout(context, attrs) {
 
     private val binding = ViewSimpleCounterBinding.inflate(LayoutInflater.from(context), this)
-
+    private var _orientation: Int = 1
     private var _progress = 0
     private var _max = 100
     private var _min = 0
@@ -36,6 +39,7 @@ class SimpleCounterView @JvmOverloads constructor(
     private val longPressDelay = 400L
     private val repeatInterval = 320L
 
+    private val tvTit: TextView
 
     var progress: Int
         get() = _progress
@@ -68,10 +72,24 @@ class SimpleCounterView @JvmOverloads constructor(
         _min = typedArray.getInt(R.styleable.DetailSeekBar_min, 0)
         _progress = _progress.coerceIn(_min, _max)
 
+        val ta = context.obtainStyledAttributes(attrs, R.styleable.SimpleCounterView)
+        _orientation = ta.getInt(R.styleable.SimpleCounterView_orientation, 1)
+        ta.recycle()
+
+        if (_orientation == 1) {
+            tvTit = binding.tvSeekTitleVertical
+            binding.tvSeekTitle.gone()
+            binding.tvSeekTitleVertical.visible()
+        } else {
+            tvTit = binding.tvSeekTitle
+            binding.tvSeekTitle.visible()
+            binding.tvSeekTitleVertical.gone()
+        }
+
         typedArray.recycle()
 
-        binding.tvSeekTitle.text = title
-        TooltipCompat.setTooltipText(binding.tvSeekTitle, title)
+        tvTit.text = title
+        TooltipCompat.setTooltipText(tvTit, title)
 
         binding.ivSeekPlus.setOnClickListener {
             if (_progress < _max) {
@@ -134,7 +152,7 @@ class SimpleCounterView @JvmOverloads constructor(
                     min = _min
                     progress = _progress
                     valueFormat = this@SimpleCounterView.valueFormat
-                    setTitle(binding.tvSeekTitle.text)
+                    setTitle(tvTit.text)
                     onChanged = {
                         _progress = it
                         updateValue()
@@ -198,7 +216,7 @@ class SimpleCounterView @JvmOverloads constructor(
 
     override fun setEnabled(enabled: Boolean) {
         super.setEnabled(enabled)
-        binding.tvSeekTitle.isEnabled = enabled
+        tvTit.isEnabled = enabled
         binding.ivSeekPlus.isEnabled = enabled
         binding.ivSeekReduce.isEnabled = enabled
         binding.tvSeekValue.isEnabled = enabled

app/src/main/res/drawable/ic_cn_convert.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="?attr/colorControlNormal"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M400,680L560,680L560,600L400,600L400,680ZM400,520L680,520L680,440L400,440L400,520ZM280,360L680,360L680,280L280,280L280,360ZM480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480L480,480Q480,480 480,480Q480,480 480,480ZM80,880L80,800L182,800Q134,777 104.5,732Q75,687 75,630Q75,551 130.5,495.5Q186,440 265,440L265,520Q220,520 187.5,552Q155,584 155,630Q155,669 179,699Q203,729 240,737L240,640L320,640L320,880L80,880ZM400,840L400,760L760,760Q760,760 760,760Q760,760 760,760L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,360L120,360L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L400,840Z" />
+</vector>

app/src/main/res/layout/dialog_read_book_spacing.xml

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <LinearLayout
+        android:id="@+id/root_view"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:orientation="vertical"
+            android:paddingHorizontal="16dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.bottomsheet.BottomSheetDragHandleView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal" />
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <TextView
+                    android:id="@+id/bottom_sheet_title"
+                    android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:text="界面设置"
+                    android:textSize="18sp"
+                    android:textStyle="bold"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent" />
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="16dp"
+            android:layout_marginTop="8dp"
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="match_parent"
+                android:layout_weight="1" />
+
+            <io.legato.kazusa.ui.widget.SimpleCounterView
+                android:id="@+id/dsb_text_letter_spacing"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:isBottomBackground="true"
+                app:max="100"
+                app:title="@string/text_letter_spacing" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="16dp"
+            android:layout_marginBottom="8dp"
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
+
+            <io.legato.kazusa.ui.widget.SimpleCounterView
+                android:id="@+id/dsb_line_size"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:isBottomBackground="true"
+                app:max="20"
+                app:title="@string/line_size" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="match_parent"
+                android:layout_weight="1" />
+
+            <io.legato.kazusa.ui.widget.SimpleCounterView
+                android:id="@+id/dsb_paragraph_spacing"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:isBottomBackground="true"
+                app:max="20"
+                app:title="@string/paragraph_size" />
+        </LinearLayout>
+
+    </LinearLayout>
+</androidx.core.widget.NestedScrollView>

app/src/main/res/layout/dialog_read_book_style.xml

@@ -144,18 +144,6 @@
                 android:orientation="horizontal"
                 android:layout_marginHorizontal="16dp">
 
-                <io.legato.kazusa.ui.book.read.config.ChineseConverter
-                    android:id="@+id/chinese_converter"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    style="@style/Widget.Material3Expressive.Button.OutlinedButton" />
-
-                <View
-                    android:layout_width="0dp"
-                    android:layout_height="0dp"
-                    android:layout_weight="1" />
-
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/tv_tip"
                     android:layout_width="wrap_content"
@@ -188,57 +176,47 @@
             android:orientation="horizontal"
             android:layout_marginTop="8dp"
             android:layout_marginHorizontal="16dp">
+
             <io.legato.kazusa.ui.widget.SimpleCounterView
                 android:id="@+id/dsb_text_size"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_marginVertical="2dp"
+                app:orientation="horizontal"
                 app:isBottomBackground="true"
                 app:max="45"
                 app:title="@string/text_size" />
 
             <View
                 android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="1"/>
+                android:layout_height="0dp"
+                android:layout_weight="1" />
 
-            <io.legato.kazusa.ui.widget.SimpleCounterView
-                android:id="@+id/dsb_text_letter_spacing"
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btnChineseConverter"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                app:isBottomBackground="true"
-                app:max="100"
-                app:title="@string/text_letter_spacing" />
+                style="@style/Widget.Material3Expressive.Button.IconButton.Outlined"
+                app:icon="@drawable/ic_cn_convert"
+                app:iconGravity="textStart"
+                app:iconSize="16dp" />
+
+            <View
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:layout_weight="1" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btn_spacing"
+                style="@style/Widget.Material3Expressive.Button.TonalButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="间距设置"
+                app:icon="@drawable/ic_arrow_right"
+                app:iconGravity="textEnd" />
+
         </LinearLayout>
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:orientation="horizontal"
-        android:layout_marginBottom="8dp"
-        android:layout_marginHorizontal="16dp">
-
-        <io.legato.kazusa.ui.widget.SimpleCounterView
-            android:id="@+id/dsb_line_size"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:isBottomBackground="true"
-            app:max="20"
-            app:title="@string/line_size" />
-
-        <View
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1"/>
-
-        <io.legato.kazusa.ui.widget.SimpleCounterView
-            android:id="@+id/dsb_paragraph_spacing"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:isBottomBackground="true"
-            app:max="20"
-            app:title="@string/paragraph_size" />
-    </LinearLayout>
 
         <LinearLayout
             android:id="@+id/set_bottom_bar"
@@ -251,9 +229,10 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginHorizontal="16dp"
+                android:layout_marginTop="8dp"
                 android:layout_marginBottom="4dp"
                 android:text="@string/page_anim"
-                android:textColor="?android:attr/textColorSecondary"
+                android:textStyle="bold"
                 android:textSize="12sp" />
 
             <HorizontalScrollView
@@ -321,9 +300,9 @@
                     android:layout_height="wrap_content"
                     android:layout_marginStart="16dp"
                     android:layout_weight="1"
-                    android:textColor="?android:attr/textColorSecondary"
                     android:text="@string/text_bg_style"
-                    android:textSize="12sp" />
+                    android:textSize="12sp"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.checkbox.MaterialCheckBox
                     android:id="@+id/cb_share_layout"

app/src/main/res/layout/dialog_read_padding.xml

@@ -8,31 +8,17 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
-        android:paddingHorizontal="16dp">
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            android:gravity="center"
-            android:paddingBottom="16dp"
-            android:paddingHorizontal="16dp">
-
-            <com.google.android.material.bottomsheet.BottomSheetDragHandleView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal" />
+        android:padding="16dp">
 
             <TextView
                 android:id="@+id/bottom_sheet_title"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
                 android:text="界面设置"
                 android:textSize="18sp"
                 android:textStyle="bold" />
 
-        </LinearLayout>
-
         <LinearLayout
             android:id="@+id/ll_header_padding"
             android:layout_width="match_parent"

app/src/main/res/layout/view_simple_counter.xml

@@ -7,70 +7,91 @@
         android:id="@+id/layout_root"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
+        android:orientation="horizontal">
 
         <TextView
             android:id="@+id/tvSeekTitle"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginVertical="8dp"
+            android:layout_gravity="center"
+            android:layout_marginEnd="8dp"
             android:maxWidth="48sp"
             android:maxLines="2"
             android:text="@string/text"
+            android:textColor="?android:attr/textColorSecondary"
             android:textSize="12sp"
             android:textStyle="bold"
-            android:textColor="?android:attr/textColorSecondary"
             tools:ignore="RtlSymmetry" />
 
-        <com.google.android.material.card.MaterialCardView
+        <LinearLayout
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="8dp"
-            app:strokeWidth="0dp"
-            app:cardCornerRadius="24dp"
-            app:cardBackgroundColor="?attr/colorSurfaceVariant">
+            android:orientation="vertical">
 
-            <LinearLayout
-                android:layout_width="136dp"
+            <TextView
+                android:id="@+id/tvSeekTitleVertical"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:gravity="center_vertical">
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/iv_seek_reduce"
-                    android:layout_width="48dp"
-                    android:layout_height="42dp"
-                    android:elevation="4dp"
-                    app:iconSize="18dp"
-                    style="@style/Widget.Material3Expressive.Button.IconButton.Tonal"
-                    app:backgroundTint="?attr/colorSurfaceContainer"
-                    android:contentDescription="@string/reduce"
-                    app:icon="@drawable/ic_reduce"
-                    app:iconGravity="textStart"/>
+                android:layout_marginVertical="4dp"
+                android:maxWidth="48sp"
+                android:maxLines="2"
+                android:text="@string/text"
+                android:textColor="?android:attr/textColorSecondary"
+                android:textSize="12sp"
+                android:textStyle="bold"
+                tools:ignore="RtlSymmetry" />
 
-                <TextView
-                    android:id="@+id/tvSeekValue"
-                    android:layout_width="0dp"
+            <com.google.android.material.card.MaterialCardView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginVertical="2dp"
+                app:cardBackgroundColor="?attr/colorSurfaceVariant"
+                app:cardCornerRadius="24dp"
+                app:strokeWidth="0dp">
+
+                <LinearLayout
+                    android:layout_width="112dp"
                     android:layout_height="wrap_content"
-                    android:gravity="center"
-                    android:layout_weight="1"
-                    android:text="@string/text"
-                    android:textColor="?attr/colorSecondary"
-                    android:textSize="13sp"
-                    android:textStyle="bold" />
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
 
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/iv_seek_plus"
-                    android:layout_width="48dp"
-                    android:layout_height="40dp"
-                    android:elevation="4dp"
-                    app:iconSize="18dp"
-                    style="@style/Widget.Material3Expressive.Button.IconButton.Tonal"
-                    app:backgroundTint="?attr/colorSurfaceContainer"
-                    android:contentDescription="@string/plus"
-                    app:icon="@drawable/ic_add"
-                    app:iconGravity="textStart"/>
-            </LinearLayout>
-        </com.google.android.material.card.MaterialCardView>
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/iv_seek_reduce"
+                        style="@style/Widget.Material3Expressive.Button.IconButton.Tonal"
+                        android:layout_width="40dp"
+                        android:layout_height="40dp"
+                        android:contentDescription="@string/reduce"
+                        android:elevation="4dp"
+                        app:backgroundTint="?attr/colorSurfaceContainer"
+                        app:icon="@drawable/ic_reduce"
+                        app:iconGravity="textStart"
+                        app:iconSize="18dp" />
+
+                    <TextView
+                        android:id="@+id/tvSeekValue"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:gravity="center"
+                        android:text="@string/text"
+                        android:textColor="?attr/colorSecondary"
+                        android:textSize="12sp"
+                        android:textStyle="bold" />
+
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/iv_seek_plus"
+                        style="@style/Widget.Material3Expressive.Button.IconButton.Tonal"
+                        android:layout_width="40dp"
+                        android:layout_height="40dp"
+                        android:contentDescription="@string/plus"
+                        android:elevation="4dp"
+                        app:backgroundTint="?attr/colorSurfaceContainer"
+                        app:icon="@drawable/ic_add"
+                        app:iconGravity="textStart"
+                        app:iconSize="18dp" />
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
 
     </LinearLayout>
 </merge>