sound,bg,bubble 等其他expandView 初步

2025-10-29 11:44:32 +08:00 · 2025-10-29 11:44:32 +08:00 · 64fdf6f4ac
parent 9b71247893
commit 64fdf6f4ac
20 changed files with 652 additions and 119 deletions
--- a/VisualNovel/app/src/main/assets/uitoken/token_sys.json
+++ b/VisualNovel/app/src/main/assets/uitoken/token_sys.json
@ -202,7 +202,14 @@
  "color.chat.setting.item.bg": "$glo.color.chat.setting.item.bg",
  "color.switch.view.normal": "$glo.color.switchview.normal",
  "color.switch.view.checked": "$glo.color.switchview.checked",
-  "color.switch.view.stroke": "$glo.color.switchview.stroke"
+  "color.switch.view.stroke": "$glo.color.switchview.stroke",
+
+  "female.text.color": "$female.text.color",
+  "male.text.color": "$male.text.color",
+  "female.bg": "$female.bg",
+  "male.bg": "$male.bg"
+
+

 }

--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/entity/response/ChatBubble.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/entity/response/ChatBubble.kt
@ -3,9 +3,7 @@ package com.remax.visualnovel.entity.response
 import android.os.Parcelable
 import kotlinx.parcelize.Parcelize

-/**
- * Created by HJW on 2025/8/18
- */
+
@Parcelize
 data class ChatBubble(
    /**
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/entity/response/ChatSound.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/entity/response/ChatSound.kt
@ -0,0 +1,60 @@
+package com.remax.visualnovel.entity.response
+
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+
+
+@Parcelize
+data class ChatSound(
+    /**
+     * code
+     */
+    val code: String,
+
+    /**
+     * id
+     */
+    val id: Long,
+
+    /**
+     * 图片url
+     */
+    val imgUrl: String?,
+
+    /**
+     * 名称
+     */
+    val name: String,
+
+    /**
+     * 名称
+     */
+    val description: String,
+
+    /**
+     * actor 性别
+     */
+    var isMale: Boolean,
+
+    /**
+     * 当前用户是否解锁 false:未解锁，true:解锁
+     */
+    val isUnlock: Boolean? = null,
+
+    /**
+     * 解锁心动等级  类型为HEARTBEAT_LEVEL时才有用
+     */
+    val unlockHeartbeatLevel: String? = null,
+
+    /**
+     * 解锁类型 MEMBER:会员 HEARTBEAT_LEVEL:心动等级
+     */
+    val unlockType: String? = null,
+    var isDefault: Boolean,
+    var select: Boolean = false
+) : Parcelable {
+    companion object {
+        const val MEMBER = "MEMBER"
+        const val HEARTBEAT_LEVEL = "HEARTBEAT_LEVEL"
+    }
+}
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/ChatSettingItemView.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/ChatSettingItemView.kt
@ -1,35 +0,0 @@
-package com.remax.visualnovel.ui.chat.ui
-
-
-import android.content.Context
-import android.util.AttributeSet
-import android.view.LayoutInflater
-import android.view.View
-import android.widget.LinearLayout
-import com.remax.visualnovel.databinding.ChatSettingItemBinding
-
-class ChatSettingItemView @JvmOverloads constructor(
-    context: Context,
-    attrs: AttributeSet? = null,
-    defStyleAttr: Int = 0
-) : LinearLayout(context, attrs, defStyleAttr) {
-
-    private var mLeftIconRes : Int = 0
-    private var mTitleRes : Int = 0
-    private var mRightIconRes : Int = 0
-    private lateinit var mRightView : View
-
-    private var mBinding = ChatSettingItemBinding.inflate(LayoutInflater.from(context))
-
-
-    fun setItemClickListener (clickHandler: () -> Unit) {
-        setOnClickListener {
-            clickHandler.invoke()
-        }
-    }
-
-    fun setLeftIconRes (leftIconRes: Int) {
-
-    }
-
-}
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandBgSubView.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandBgSubView.kt
@ -0,0 +1,42 @@
+package com.remax.visualnovel.ui.chat.ui.expandableSelector
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import androidx.recyclerview.widget.RecyclerView
+import com.drake.brv.annotaion.DividerOrientation
+import com.drake.brv.utils.divider
+import com.drake.brv.utils.grid
+import com.drake.brv.utils.setup
+import com.remax.visualnovel.databinding.LayoutSettingBgSubViewBinding
+
+class ExpandBgSubView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : LinearLayout(context, attrs, defStyleAttr) {
+
+    private var mBinding: LayoutSettingBgSubViewBinding
+
+
+    init {
+        mBinding = LayoutSettingBgSubViewBinding.inflate(LayoutInflater.from(context))
+        with(mBinding) {
+            initRv(itemsRv)
+        }
+    }
+
+
+    private fun initRv(itemsRv: RecyclerView) {
+        itemsRv.grid(2)
+            .divider {
+                setDivider(16, true)
+                orientation = DividerOrientation.VERTICAL
+            }.setup {
+
+            }
+    }
+
+
+}
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandBubbleSubView.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandBubbleSubView.kt
@ -0,0 +1,41 @@
+package com.remax.visualnovel.ui.chat.ui.expandableSelector
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import androidx.recyclerview.widget.RecyclerView
+import com.drake.brv.annotaion.DividerOrientation
+import com.drake.brv.utils.divider
+import com.drake.brv.utils.grid
+import com.drake.brv.utils.setup
+import com.remax.visualnovel.databinding.LayoutSettingBubbleSubViewBinding
+
+class ExpandBubbleSubView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : LinearLayout(context, attrs, defStyleAttr) {
+
+    private var mBinding: LayoutSettingBubbleSubViewBinding
+
+
+    init {
+        mBinding = LayoutSettingBubbleSubViewBinding.inflate(LayoutInflater.from(context))
+        with(mBinding) {
+            initRv(itemsRv)
+        }
+    }
+
+    private fun initRv(itemsRv: RecyclerView) {
+        itemsRv.grid(2)
+            .divider {
+                setDivider(16, true)
+                orientation = DividerOrientation.VERTICAL
+            }.setup {
+
+            }
+    }
+
+
+}
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandSoundSelectView.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandSoundSelectView.kt
@ -5,29 +5,25 @@ import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.animation.ValueAnimator
 import android.content.Context
-import android.graphics.drawable.GradientDrawable
 import android.util.AttributeSet
 import android.view.LayoutInflater
-import android.view.View
+import android.view.ViewGroup
 import android.view.animation.AccelerateDecelerateInterpolator
 import android.widget.LinearLayout
-import android.widget.TextView
 import com.remax.visualnovel.R
-import com.remax.visualnovel.databinding.LayoutExpandSelectViewBinding
-import com.remax.visualnovel.utils.spannablex.utils.dp
+import com.remax.visualnovel.databinding.LayoutExpandSoundSelectViewBinding


-class MaxNumView @JvmOverloads constructor(
+class ExpandSoundSelectView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
 ) : LinearLayout(context, attrs, defStyleAttr) {

-    private lateinit var mBinding: LayoutExpandSelectViewBinding
+    private lateinit var mBinding: LayoutExpandSoundSelectViewBinding

    private var isExpanded = false
    private var animationDuration = 300
-    private var items: List<SelectorItem> = emptyList()
    private var itemSelectedListener: OnItemSelectedListener? = null

    init {
@ -35,7 +31,7 @@ class MaxNumView @JvmOverloads constructor(
    }

    private fun initView(context: Context, attrs: AttributeSet?) {
-        mBinding = LayoutExpandSelectViewBinding.inflate(LayoutInflater.from(context), this, true)
+        mBinding = LayoutExpandSoundSelectViewBinding.inflate(LayoutInflater.from(context))
        setupAttributes(attrs)
        setupClickListeners()
    }
@ -63,76 +59,6 @@ class MaxNumView @JvmOverloads constructor(
        mBinding.titleText.text = context.resources.getString(titleRes)
    }

-    fun setItems(newItems: List<SelectorItem>) {
-        items = newItems
-        updateItemsView()
-    }
-
-
-
-    private fun updateItemsView() {
-        mBinding.itemsContainer.removeAllViews()
-
-        items.forEachIndexed { index, item ->
-            val itemView = createItemView(item, index)
-            mBinding.itemsContainer.addView(itemView)
-
-            if (index < items.size - 1) {
-                addDivider()
-            }
-        }
-    }
-
-    private fun createItemView(item: SelectorItem, position: Int): View {
-        val itemView = LayoutInflater.from(context)
-            .inflate(R.layout.layout_expand_view_item, mBinding.itemsContainer, false)
-
-        val colorIndicator = itemView.findViewById<View>(R.id.colorIndicator)
-        val itemName = itemView.findViewById<TextView>(R.id.itemName)
-        val itemDesc = itemView.findViewById<TextView>(R.id.itemDesc)
-        val recommendedTag = itemView.findViewById<TextView>(R.id.recommendedTag)
-        val selectedDot = itemView.findViewById<View>(R.id.selectedDot)
-
-        (colorIndicator.background as? GradientDrawable)?.setColor(item.color)
-
-        itemName.text = item.name
-        itemDesc.text = item.description
-        recommendedTag.text = item.pointsInfo
-        selectedDot.visibility = if (item.isSelected) VISIBLE else GONE
-
-        itemView.setOnClickListener {
-            selectItem(position)
-            itemSelectedListener?.onItemSelected(position, item)
-        }
-
-        return itemView
-    }
-
-    private fun addDivider() {
-        val divider = View(context).apply {
-            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, 1.dp).apply {
-                setBackgroundColor(context.resources.getColor(R.color.chat_setting_divider_color))
-                marginStart = 10.dp
-                marginEnd = 10.dp
-            }
-        }
-        mBinding.itemsContainer.addView(divider)
-    }
-
-
-    fun selectItem(position: Int) {
-        items.forEachIndexed { index, item ->
-            item.isSelected = index == position
-        }
-        updateItemsView()
-
-        if (position in items.indices) {
-            mBinding.titleText.text = items[position].name
-        }
-
-        collapse()
-    }
-

    fun toggle() {
        if (isExpanded) collapse() else expand()
@ -208,4 +134,11 @@ class MaxNumView @JvmOverloads constructor(
    interface OnItemSelectedListener {
        fun onItemSelected(position: Int, item: SelectorItem)
    }
+
+
+    /*   new added    */
+    fun setCustomExpandView(expandView: ViewGroup) {
+        mBinding.itemsContainer.addView(expandView)
+    }
+
 }
--- a/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandSoundSubView.kt
+++ b/VisualNovel/app/src/main/java/com/remax/visualnovel/ui/chat/ui/expandableSelector/ExpandSoundSubView.kt
@ -0,0 +1,91 @@
+package com.remax.visualnovel.ui.chat.ui.expandableSelector
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import androidx.recyclerview.widget.RecyclerView
+import com.drake.brv.annotaion.DividerOrientation
+import com.drake.brv.utils.bindingAdapter
+import com.drake.brv.utils.divider
+import com.drake.brv.utils.grid
+import com.drake.brv.utils.setup
+import com.remax.visualnovel.R
+import com.remax.visualnovel.databinding.LayoutItemSettingSoundBinding
+import com.remax.visualnovel.databinding.LayoutSettingSoundSubViewBinding
+import com.remax.visualnovel.entity.response.ChatSound
+import com.remax.visualnovel.widget.uitoken.changeBackground
+import com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout
+
+class ExpandSoundSubView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : LinearLayout(context, attrs, defStyleAttr) {
+    private var mBinding: LayoutSettingSoundSubViewBinding
+
+
+    init {
+        mBinding = LayoutSettingSoundSubViewBinding.inflate(LayoutInflater.from(context))
+        with(mBinding) {
+            initRadioGroup(radioGroup)
+            initRv(itemsRv)
+        }
+    }
+
+    private fun initRadioGroup(radioGroup: UITokenLinearLayout) {
+        // TODO("Not yet implemented")
+    }
+
+    fun playActorSound(bubble : ChatSound) {
+
+    }
+
+    fun setSelectedSound() {
+
+    }
+
+    private fun initRv(itemsRv: RecyclerView) {
+        itemsRv.grid(2)
+            .divider {
+                setDivider(16, true)
+                orientation = DividerOrientation.VERTICAL
+            }.setup {
+                addType<ChatSound>(R.layout.layout_item_setting_sound)
+
+                onClick(R.id.left_container) {
+                    val bubble = getModel<ChatSound>()
+                    playActorSound(bubble)
+                }
+
+                onClick(R.id.tv_select) {
+                    val bubble = getModel<ChatSound>()
+                    if (!bubble.select) {
+                        itemsRv.bindingAdapter.models?.filterIsInstance<ChatSound>()?.forEach { item ->
+                            item.select = item == bubble
+                        }
+                        itemsRv.bindingAdapter.notifyDataSetChanged()
+                        setSelectedSound()
+                    }
+                }
+
+                onBind {
+                    val item = getModel<ChatSound>()
+                    with(getBinding<LayoutItemSettingSoundBinding>()) {
+                        if (!item.imgUrl.isNullOrEmpty()) {
+                            userAvatar.setImageResource(R.mipmap.sex_man_big)
+                        } else {
+                            userAvatar.setImageResource(if (item.isMale) R.mipmap.ic_gender_male else R.mipmap.ic_gender_female)
+                        }
+
+                        tvSoundName.text = item.name
+                        itemRoot.changeBackground(backgroundUIColorToken = if (item.isMale) R.string.male_bg else R.string.female_bg)
+                        tvSoundDescrible.setTextColor(context.resources.getColor(if (item.isMale) R.color.male_text_color else R.color.female_text_color))
+                        tvSoundDescrible.text = item.description
+                    }
+                }
+            }
+    }
+
+
+}
--- a/VisualNovel/app/src/main/res/layout/layout_chat_menu_view.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_chat_menu_view.xml
@ -120,7 +120,7 @@
            android:layout_marginTop="10dp" >

            <!--  sound selector -->
-            <com.remax.visualnovel.ui.chat.ui.expandableSelector.ExpandSelectView
+            <com.remax.visualnovel.ui.chat.ui.expandableSelector.ExpandSoundSelectView
                android:id="@+id/sound_actor_selector"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
--- a/VisualNovel/app/src/main/res/layout/layout_expand_sound_select_view.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_expand_sound_select_view.xml
@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical">
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenRelativeLayout
+        android:id="@+id/titleLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:backgroundColorToken="@string/color_chat_setting_item_bg"
+        app:radiusToken="@string/radius_m"
+        android:padding="@dimen/dp_12"
+        >
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenImageView
+            android:id="@+id/icon"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_centerVertical="true" />
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+            android:id="@+id/titleText"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_toEndOf="@id/icon"
+            android:layout_centerVertical="true"
+            android:layout_marginStart="12dp"
+            android:textSize="16sp"
+            android:textColor="#333333"
+            android:textStyle="normal"/>
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenImageView
+            android:id="@+id/arrow"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_alignParentEnd="true"
+            android:layout_centerVertical="true"
+            android:src="@mipmap/setting_arrow_right"/>
+
+    </com.remax.visualnovel.widget.uitoken.view.UITokenRelativeLayout>
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout
+        android:id="@+id/itemsContainer"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginTop="@dimen/dp_2"
+        android:visibility="visible">
+        <com.remax.visualnovel.ui.chat.ui.expandableSelector.ExpandSoundSubView
+            android:id="@+id/sound_sub_view"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            />
+    </com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout>
+
+</LinearLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_item_setting_bg.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_item_setting_bg.xml
@ -0,0 +1,64 @@
+<?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"
+    android:id="@+id/group"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingBottom="16dp">
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/backgroundIcon"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="@+id/selectBg"
+        app:layout_constraintEnd_toEndOf="@+id/selectBg"
+        app:layout_constraintStart_toStartOf="@+id/selectBg"
+        app:layout_constraintTop_toTopOf="@+id/selectBg" />
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenFrameLayout
+        android:id="@+id/selectBg"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        app:backgroundColorToken="@string/color_surface_element_normal"
+        app:layout_constraintDimensionRatio="h,164:219"
+        app:layout_constraintTop_toTopOf="parent"
+        app:radiusToken="@string/radius_l"
+        app:strokeColorToken="@string/color_primary_normal"
+        app:strokeWidthToken="@string/border_m"
+        />
+
+    <com.remax.visualnovel.widget.ui.buttons.IconButtonView
+        android:id="@+id/fullImage"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="12dp"
+        android:text="@string/icon_full_image"
+        app:iconButtonName="ContrastButton_Tertiary_Dark"
+        app:iconButtonRadius="round"
+        app:iconButtonSizeType="small"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+
+    <com.remax.visualnovel.widget.ui.RadioCheckButton
+        android:id="@+id/singleCheckBox"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:layout_marginEnd="8dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:radioCheck="true" />
+
+    <!--<com.remax.visualnovel.widget.TagIconView
+        android:id="@+id/backgroundTag"
+        android:layout_width="wrap_content"
+        app:tagIconSize="SIZE_S"
+        android:layout_height="wrap_content"
+        android:layout_margin="8dp"
+        app:layout_constraintStart_toStartOf="@+id/selectBg"
+        app:layout_constraintTop_toTopOf="@+id/selectBg"
+        app:tagIconContent="@string/default_txt"
+        app:tagIconType="ELEMENT_DARK" />-->
+
+</androidx.constraintlayout.widget.ConstraintLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_item_setting_bubble.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_item_setting_bubble.xml
@ -0,0 +1,92 @@
+<?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"
+    android:id="@+id/group"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingBottom="16dp">
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenFrameLayout
+        android:id="@+id/selectBg"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        app:backgroundColorToken="@string/color_surface_element_normal"
+        app:layout_constraintDimensionRatio="h,164:120"
+        app:layout_constraintTop_toTopOf="parent"
+        app:radiusToken="@string/radius_l"
+        app:strokeColorToken="@string/color_primary_normal"
+        app:strokeWidthToken="@string/border_m"
+        />
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+        android:id="@+id/bubbleIcon"
+        android:layout_width="60dp"
+        android:layout_height="wrap_content"
+        android:gravity="center"
+        app:layout_constraintBottom_toBottomOf="@+id/selectBg"
+        app:layout_constraintEnd_toEndOf="@+id/selectBg"
+        app:layout_constraintStart_toStartOf="@+id/selectBg"
+        app:layout_constraintTop_toTopOf="@+id/selectBg"
+        app:textColorToken="@string/color_txt_primary_normal"
+        android:text="@string/hi"
+        app:textToken="@string/txt_body_m" />
+
+    <com.remax.visualnovel.widget.ui.lock.LockTagView
+        android:id="@+id/lockView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="8dp"
+        app:layout_constraintEnd_toEndOf="@+id/selectBg"
+        app:layout_constraintTop_toTopOf="@+id/selectBg"
+        app:lockTagLabel="privateLabel" />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/bubbleLikeIcon"
+        android:layout_width="12dp"
+        android:layout_height="12dp"
+        android:layout_marginEnd="2dp"
+        android:src="@mipmap/icon_checked"
+        app:layout_constraintBottom_toBottomOf="@+id/bubbleName"
+        app:layout_constraintEnd_toStartOf="@+id/bubbleName"
+        app:layout_constraintHorizontal_chainStyle="packed"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="@+id/bubbleName" />
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+        android:id="@+id/bubbleName"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="2dp"
+        android:layout_marginTop="8dp"
+        android:gravity="top"
+        android:text="@string/default_txt"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/bubbleLikeIcon"
+        app:layout_constraintTop_toBottomOf="@+id/selectBg"
+        app:textColorToken="@string/color_txt_primary_normal"
+        app:textToken="@string/txt_label_m" />
+
+    <com.remax.visualnovel.widget.ui.RadioCheckButton
+        android:id="@+id/bubbleCheckBox"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:layout_marginEnd="8dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:radioCheck="true" />
+
+    <!--<com.remax.visualnovel.widget.TagIconView
+        android:id="@+id/bubbleTag"
+        android:layout_width="wrap_content"
+        app:tagIconSize="SIZE_S"
+        android:layout_height="wrap_content"
+        android:layout_margin="8dp"
+        app:layout_constraintStart_toStartOf="@+id/selectBg"
+        app:layout_constraintTop_toTopOf="@+id/selectBg"
+        app:tagIconContent="@string/default_txt"
+        app:tagIconType="ELEMENT_DARK" />-->
+
+
+</androidx.constraintlayout.widget.ConstraintLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_item_setting_sound.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_item_setting_sound.xml
@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.remax.visualnovel.widget.uitoken.view.UITokenRelativeLayout 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"
+    android:id="@+id/item_root"
+    app:backgroundColorToken="@string/color_glo_color_orange_10"
+    app:radiusToken="@string/radius_m"
+    android:padding="@dimen/dp_10"
+    >
+
+
+
+    <FrameLayout
+        android:id="@+id/left_container"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerVertical="true">
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenImageView
+            android:id="@+id/userAvatar"
+            android:layout_width="@dimen/dp_55"
+            android:layout_height="@dimen/dp_55"
+            app:backgroundColorToken="@string/color_primary_normal"
+            app:radiusToken="@string/radius_round" />
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenImageView
+            android:layout_width="@dimen/dp_20"
+            android:layout_height="@dimen/dp_20"
+            android:layout_gravity="end|top"
+            android:gravity="center"
+            android:text="@string/icon_camera_fill"
+            android:textSize="16sp"
+            android:src="@mipmap/setting_sound_play"
+            />
+    </FrameLayout>
+
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+        android:id="@+id/tv_select"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentEnd="true"
+        android:layout_centerVertical="true"
+        android:paddingVertical="@dimen/dp_8"
+        android:paddingHorizontal="@dimen/dp_10"
+        android:text="@string/select"
+        android:textSize="@dimen/sp_12"
+        android:textStyle="bold"
+        app:backgroundColorToken="@string/color_txt_primary_normal"
+        app:radiusToken="@string/radius_pill"
+        android:textColor="@color/chat_setting_ai_model_recommend_color"
+        />
+
+
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_toEndOf="@+id/left_container"
+        android:layout_toStartOf="@+id/tv_select"
+        android:layout_marginHorizontal="@dimen/dp_9"
+        android:layout_centerVertical="true"
+        android:orientation="vertical"
+        >
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+            android:id="@+id/tv_sound_name"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="@dimen/sp_15"
+            android:textColor="@color/gray3"
+            android:textStyle="bold"
+            />
+
+        <com.remax.visualnovel.widget.uitoken.view.UITokenTextView
+            android:id="@+id/tv_sound_describle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="@dimen/sp_13"
+            android:textColor="@color/female_text_color"
+            android:textStyle="italic"
+            android:layout_marginTop="@dimen/dp_10"
+            />
+    </com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout>
+
+
+</com.remax.visualnovel.widget.uitoken.view.UITokenRelativeLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_setting_bg_sub_view.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_setting_bg_sub_view.xml
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout 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"
+    android:maxHeight="250dp"
+    android:orientation="vertical">
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/itemsRv"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginTop="@dimen/dp_2"
+        android:visibility="visible"/>
+
+</LinearLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_setting_bubble_sub_view.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_setting_bubble_sub_view.xml
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout 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"
+    android:maxHeight="250dp"
+    android:orientation="vertical">
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/itemsRv"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginTop="@dimen/dp_2"
+        android:visibility="visible"/>
+
+</LinearLayout>
--- a/VisualNovel/app/src/main/res/layout/layout_setting_sound_sub_view.xml
+++ b/VisualNovel/app/src/main/res/layout/layout_setting_sound_sub_view.xml
@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout 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"
+    android:maxHeight="250dp"
+    android:orientation="vertical">
+
+    <com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout
+        android:id="@+id/radio_group"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        app:backgroundColorToken="@string/color_chat_setting_item_bg"
+        app:radiusToken="@string/radius_m"
+        android:padding="@dimen/dp_12"
+        >
+
+        <com.remax.visualnovel.widget.ui.RadioCheckButton
+            android:id="@+id/radio_all"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            app:radioCheck="true" />
+
+        <com.remax.visualnovel.widget.ui.RadioCheckButton
+            android:id="@+id/radio_male"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_marginLeft="@dimen/dp_20"
+            app:radioCheck="true" />
+
+        <com.remax.visualnovel.widget.ui.RadioCheckButton
+            android:id="@+id/radio_female"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_marginLeft="@dimen/dp_20"
+            app:radioCheck="true" />
+
+    </com.remax.visualnovel.widget.uitoken.view.UITokenLinearLayout>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/itemsRv"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginTop="@dimen/dp_2"
+        android:visibility="visible"/>
+
+</LinearLayout>
--- a/VisualNovel/app/src/main/res/mipmap-xxhdpi/setting_sound_play.webp
+++ b/VisualNovel/app/src/main/res/mipmap-xxhdpi/setting_sound_play.webp
--- a/VisualNovel/app/src/main/res/mipmap-xxhdpi/temp_avatar.jpg
+++ b/VisualNovel/app/src/main/res/mipmap-xxhdpi/temp_avatar.jpg
--- a/VisualNovel/app/src/main/res/values/colors.xml
+++ b/VisualNovel/app/src/main/res/values/colors.xml
@ -203,6 +203,12 @@

    <color name="chat_setting_divider_color">#ffececf9</color>

+    <color name="female_text_color">#ff7326ae</color>
+    <color name="male_text_color">#ff4876c9</color>
+    <color name="female_bg">#ffe5c4ff</color>
+    <color name="male_bg">#ffc7dbff</color>
+
+



--- a/VisualNovel/app/src/main/res/values/ui_tokens.xml
+++ b/VisualNovel/app/src/main/res/values/ui_tokens.xml
@ -211,4 +211,9 @@
    <string name="switch_view_stroke" translatable="false">color.switch.view.stroke</string>


+    <string name="female_text_color" translatable="false">female.text.color</string>
+    <string name="male_text_color" translatable="false">male.text.color</string>
+    <string name="female_bg" translatable="false">female.bg</string>
+    <string name="male_bg" translatable="false">male.bg</string>
+
 </resources>