diff --git a/app/src/main/java/io/legado/app/ui/book/info/BookInfoActivity.kt b/app/src/main/java/io/legado/app/ui/book/info/BookInfoActivity.kt
index cd41c8980..efcddba7c 100644
--- a/app/src/main/java/io/legado/app/ui/book/info/BookInfoActivity.kt
+++ b/app/src/main/java/io/legado/app/ui/book/info/BookInfoActivity.kt
@@ -111,33 +111,10 @@ class BookInfoActivity :
         upTvBookshelf()
         val kinds = book.getKindList()
         if (kinds.isEmpty()) {
-            ll_kind.gone()
+            lb_kind.gone()
         } else {
-            ll_kind.visible()
-            for (index in 0..2) {
-                if (kinds.size > index) {
-                    when (index) {
-                        0 -> {
-                            tv_kind.text = kinds[index]
-                            tv_kind.visible()
-                        }
-                        1 -> {
-                            tv_kind_1.text = kinds[index]
-                            tv_kind_1.visible()
-                        }
-                        2 -> {
-                            tv_kind_2.text = kinds[index]
-                            tv_kind_2.visible()
-                        }
-                    }
-                } else {
-                    when (index) {
-                        0 -> tv_kind.gone()
-                        1 -> tv_kind_1.gone()
-                        2 -> tv_kind_2.gone()
-                    }
-                }
-            }
+            lb_kind.visible()
+            lb_kind.setLabels(kinds)
         }
         upGroup(book.group)
     }
diff --git a/app/src/main/java/io/legado/app/ui/widget/LabelsBar.kt b/app/src/main/java/io/legado/app/ui/widget/LabelsBar.kt
new file mode 100644
index 000000000..e59ac8983
--- /dev/null
+++ b/app/src/main/java/io/legado/app/ui/widget/LabelsBar.kt
@@ -0,0 +1,36 @@
+package io.legado.app.ui.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.LinearLayout
+import androidx.core.view.setPadding
+import io.legado.app.ui.widget.text.AccentBgTextView
+import io.legado.app.utils.dp
+
+
+class LabelsBar(context: Context, attrs: AttributeSet?) : LinearLayout(context, attrs) {
+
+
+    fun setLabels(labels: Array<String>) {
+        removeAllViews()
+        labels.forEach {
+            addLabel(it)
+        }
+    }
+
+    fun setLabels(labels: List<String>) {
+        removeAllViews()
+        labels.forEach {
+            addLabel(it)
+        }
+    }
+
+    fun addLabel(label: String) {
+        addView(AccentBgTextView(context, null).apply {
+            setPadding(2.dp)
+            setRadios(2)
+            text = label
+        })
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/legado/app/ui/widget/text/AccentBgTextView.kt b/app/src/main/java/io/legado/app/ui/widget/text/AccentBgTextView.kt
index 846f34204..b5114cd4a 100644
--- a/app/src/main/java/io/legado/app/ui/widget/text/AccentBgTextView.kt
+++ b/app/src/main/java/io/legado/app/ui/widget/text/AccentBgTextView.kt
@@ -8,20 +8,31 @@ import io.legado.app.R
 import io.legado.app.lib.theme.ColorUtils
 import io.legado.app.lib.theme.Selector
 import io.legado.app.lib.theme.ThemeStore
+import io.legado.app.utils.dp
 
-class AccentBgTextView(context: Context, attrs: AttributeSet) :
+class AccentBgTextView(context: Context, attrs: AttributeSet?) :
     AppCompatTextView(context, attrs) {
 
+    private var radios = 0
+
     init {
         val typedArray = context.obtainStyledAttributes(attrs, R.styleable.AccentBgTextView)
-        val radios =
-            typedArray.getDimensionPixelOffset(R.styleable.AccentBgTextView_radius, 0)
+        radios = typedArray.getDimensionPixelOffset(R.styleable.AccentBgTextView_radius, radios)
         typedArray.recycle()
+        upBackground()
+        setTextColor(Color.WHITE)
+    }
+
+    fun setRadios(radio: Int) {
+        this.radios = radio.dp
+        upBackground()
+    }
+
+    private fun upBackground() {
         background = Selector.shapeBuild()
             .setCornerRadius(radios)
             .setDefaultBgColor(ThemeStore.accentColor(context))
             .setPressedBgColor(ColorUtils.darkenColor(ThemeStore.accentColor(context)))
             .create()
-        setTextColor(Color.WHITE)
     }
 }
diff --git a/app/src/main/res/layout/activity_book_info.xml b/app/src/main/res/layout/activity_book_info.xml
index 0c98f4cda..20fc5e56e 100644
--- a/app/src/main/res/layout/activity_book_info.xml
+++ b/app/src/main/res/layout/activity_book_info.xml
@@ -100,50 +100,12 @@
 
         </LinearLayout>
 
-        <LinearLayout
-            android:id="@+id/ll_kind"
+        <io.legado.app.ui.widget.LabelsBar
+            android:id="@+id/lb_kind"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginBottom="3dp"
-            android:orientation="horizontal"
-            android:visibility="gone">
-
-            <io.legado.app.ui.widget.text.AccentBgTextView
-                android:id="@+id/tv_kind"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginEnd="6dp"
-                android:paddingLeft="3dp"
-                android:paddingRight="3dp"
-                android:singleLine="true"
-                android:text="@string/app_name"
-                android:textSize="14sp"
-                app:radius="2dp" />
-
-            <io.legado.app.ui.widget.text.AccentBgTextView
-                android:id="@+id/tv_kind_1"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingLeft="3dp"
-                android:paddingRight="3dp"
-                android:singleLine="true"
-                android:text="@string/app_name"
-                android:textSize="14sp"
-                app:radius="2dp" />
-
-            <io.legado.app.ui.widget.text.AccentBgTextView
-                android:id="@+id/tv_kind_2"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginEnd="6dp"
-                android:paddingLeft="3dp"
-                android:paddingRight="3dp"
-                android:singleLine="true"
-                android:text="@string/app_name"
-                android:textSize="14sp"
-                app:radius="2dp" />
-
-        </LinearLayout>
+            android:visibility="gone" />
 
         <TextView
             android:id="@+id/tv_lasted"
diff --git a/app/src/main/res/layout/dialog_number_picker.xml b/app/src/main/res/layout/dialog_number_picker.xml
index 6dbf5d4fd..5a471be84 100644
--- a/app/src/main/res/layout/dialog_number_picker.xml
+++ b/app/src/main/res/layout/dialog_number_picker.xml
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/background">
+    android:layout_height="match_parent">
 
     <NumberPicker
         android:id="@+id/number_picker"