Show scrollable single line of genres when compacted

app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoController.kt

@@ -11,7 +11,6 @@ import android.view.ViewGroup
 import android.widget.Toast
 import androidx.core.content.ContextCompat
 import com.bumptech.glide.load.engine.DiskCacheStrategy
-import com.google.android.material.chip.Chip
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.database.models.Category
 import eu.kanade.tachiyomi.data.database.models.Manga
@@ -37,8 +36,8 @@ import eu.kanade.tachiyomi.ui.webview.WebViewActivity
 import eu.kanade.tachiyomi.util.lang.truncateCenter
 import eu.kanade.tachiyomi.util.system.toast
 import eu.kanade.tachiyomi.util.view.gone
+import eu.kanade.tachiyomi.util.view.setChips
 import eu.kanade.tachiyomi.util.view.snack
-import eu.kanade.tachiyomi.util.view.toggle
 import eu.kanade.tachiyomi.util.view.visible
 import eu.kanade.tachiyomi.util.view.visibleIf
 import kotlinx.coroutines.flow.launchIn
@@ -259,16 +258,10 @@ class MangaInfoController(private val fromSource: Boolean = false) :
 
             // Update genres list
             if (!manga.genre.isNullOrBlank()) {
-                binding.mangaGenresTags.removeAllViews()
+                binding.mangaGenresTagsCompactChips.setChips(manga.getGenres(), this::performSearch)
-
+                binding.mangaGenresTagsFullChips.setChips(manga.getGenres(), this::performSearch)
-                manga.getGenres()?.forEach { genre ->
+            } else {
-                    val chip = Chip(view.context).apply {
+                binding.mangaGenresTagsWrapper.gone()
-                        text = genre
-                        setOnClickListener { performSearch(genre) }
-                    }
-
-                    binding.mangaGenresTags.addView(chip)
-                }
             }
 
             // Handle showing more or less info
@@ -290,7 +283,7 @@ class MangaInfoController(private val fromSource: Boolean = false) :
     private fun hideMangaInfo() {
         binding.mangaSummaryLabel.gone()
         binding.mangaSummary.gone()
-        binding.mangaGenresTags.gone()
+        binding.mangaGenresTagsWrapper.gone()
         binding.mangaInfoToggle.gone()
     }
 
@@ -317,7 +310,8 @@ class MangaInfoController(private val fromSource: Boolean = false) :
                     null
         }
 
-        binding.mangaGenresTags.toggle()
+        binding.mangaGenresTagsCompact.visibleIf { isExpanded }
+        binding.mangaGenresTagsFullChips.visibleIf { !isExpanded }
     }
 
     /**

app/src/main/java/eu/kanade/tachiyomi/util/view/ViewExtensions.kt

@@ -14,6 +14,8 @@ import android.widget.TextView
 import androidx.annotation.MenuRes
 import androidx.appcompat.widget.PopupMenu
 import androidx.recyclerview.widget.RecyclerView
+import com.google.android.material.chip.Chip
+import com.google.android.material.chip.ChipGroup
 import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
 import com.google.android.material.snackbar.Snackbar
 import com.kennyc.textdrawable.ColorGenerator
@@ -119,3 +121,22 @@ fun ExtendedFloatingActionButton.shrinkOnScroll(recycler: RecyclerView) {
         }
     })
 }
+
+/**
+ * Replaces chips in a ChipGroup.
+ *
+ * @param items List of strings that are shown as individual chips.
+ * @param onClick Optional on click listener for each chip.
+ */
+fun ChipGroup.setChips(items: List<String>?, onClick: (item: String) -> Unit = {}) {
+    removeAllViews()
+
+    items?.forEach { item ->
+        val chip = Chip(context).apply {
+            text = item
+            setOnClickListener { onClick(item) }
+        }
+
+        addView(chip)
+    }
+}

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

@@ -266,25 +266,48 @@
                 android:focusable="true"
                 android:maxLines="3"
                 android:textIsSelectable="false"
-                app:layout_constraintBottom_toTopOf="@id/manga_genres_tags"
+                app:layout_constraintBottom_toTopOf="@id/manga_genres_tags_wrapper"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/manga_summary_label" />
 
-            <com.google.android.material.chip.ChipGroup
+            <FrameLayout
-                android:id="@+id/manga_genres_tags"
+                android:id="@+id/manga_genres_tags_wrapper"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="16dp"
                 android:layout_marginTop="8dp"
-                android:layout_marginEnd="16dp"
                 android:layout_marginBottom="8dp"
-                android:visibility="gone"
-                app:chipSpacingHorizontal="4dp"
                 app:layout_constrainedHeight="true"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/manga_summary" />
+                app:layout_constraintTop_toBottomOf="@id/manga_summary">
+
+                <com.google.android.material.chip.ChipGroup
+                    android:id="@+id/manga_genres_tags_full_chips"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="16dp"
+                    android:layout_marginEnd="16dp"
+                    android:visibility="gone"
+                    app:chipSpacingHorizontal="4dp" />
+
+                <HorizontalScrollView
+                    android:id="@+id/manga_genres_tags_compact"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content">
+
+                    <com.google.android.material.chip.ChipGroup
+                        android:id="@+id/manga_genres_tags_compact_chips"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:paddingStart="16dp"
+                        android:paddingEnd="16dp"
+                        app:chipSpacingHorizontal="4dp"
+                        app:singleLine="true" />
+
+                </HorizontalScrollView>
+
+            </FrameLayout>
 
             <Button
                 android:id="@+id/manga_info_toggle"
@@ -299,7 +322,7 @@
                 android:textSize="12sp"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/manga_genres_tags" />
+                app:layout_constraintTop_toBottomOf="@id/manga_genres_tags_wrapper" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>