New manga info expander (#5771)

* Replace "More" with Arrows

We used to have arrows but it was set away from the description which took a lot of space.

It was changed to "More" text, but with the recent design changes I think it'd look better to get a mix between them both.

* Properly align icons

Co-Authored-By: Andreas <[email protected]>

* Expand support to Tablets

Get it... expand... hehe 😎

* Fix expanded width

Also fixes so that the constraint for the toggleLess is dependant on the right thing

* Give info toggles its own space

Uses its own margin now to push info rather than just being attached as a info margin.

* Remove weird duplicates I did not add

I did not add these but I don't see a reason to keep dupes

* Add bottom scrim

* Change to centered arrow under info

Anyone wanna experiment/build on top off then feel free to tweak

* Add background glow to icon for contrast

Co-Authored-By: Andreas <[email protected]>

Co-authored-by: Andreas <[email protected]>
Co-authored-by: Andreas <[email protected]>

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

@@ -48,6 +48,8 @@ class MangaInfoHeaderAdapter(
 
     private var initialLoad: Boolean = true
 
+    private val maxLines = 3
+
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HeaderViewHolder {
         binding = MangaInfoHeaderBinding.inflate(LayoutInflater.from(parent.context), parent, false)
         updateCoverPosition()
@@ -297,7 +299,10 @@ class MangaInfoHeaderAdapter(
                 binding.mangaSummaryText.text = if (manga.description.isNullOrBlank()) {
                     view.context.getString(R.string.unknown)
                 } else {
-                    manga.description
+                    // Max lines of 3 with a blank line looks whack so we remove
+                    // any line breaks that is 2 or more and replace it with 1
+                    manga.description!!
+                        .replace(Regex("[\\r\\n]{2,}", setOf(RegexOption.MULTILINE)), "\n")
                 }
 
                 // Update genres list
@@ -335,7 +340,7 @@ class MangaInfoHeaderAdapter(
                 }
 
                 // Refreshes will change the state and it needs to be set to correct state to display correctly
-                if (binding.mangaSummaryText.maxLines == 2) {
+                if (binding.mangaSummaryText.maxLines == maxLines) {
                     binding.mangaSummarySection.transitionToState(R.id.start)
                 } else {
                     binding.mangaSummarySection.transitionToState(R.id.end)
@@ -348,7 +353,7 @@ class MangaInfoHeaderAdapter(
         }
 
         private fun toggleMangaInfo() {
-            val isCurrentlyExpanded = binding.mangaSummaryText.maxLines != 2
+            val isCurrentlyExpanded = binding.mangaSummaryText.maxLines != maxLines
 
             if (isCurrentlyExpanded) {
                 binding.mangaSummarySection.transitionToStart()
@@ -357,7 +362,7 @@ class MangaInfoHeaderAdapter(
             }
 
             binding.mangaSummaryText.maxLines = if (isCurrentlyExpanded) {
-                2
+                maxLines
             } else {
                 Int.MAX_VALUE
             }

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <gradient
+        android:angle="90"
+        android:endColor="#00ffffff"
+        android:startColor="#ffffffff" />
+
+    <corners android:radius="0dp" />
+</shape>

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

@@ -4,8 +4,9 @@
 
     <gradient
         android:angle="90"
-        android:endColor="#00ffffff"
-        android:startColor="#ffffffff" />
+        android:endColor="#00000000"
+        android:centerColor="#CC000000"
+        android:startColor="#E6000000" />
 
     <corners android:radius="0dp" />
 </shape>

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

@@ -3,10 +3,11 @@
     android:shape="rectangle">
 
     <gradient
-        android:angle="180"
-        android:centerColor="#ff000000"
-        android:endColor="#00000000"
-        android:startColor="#ff000000" />
+        android:type="radial"
+        android:gradientRadius="18dp"
+        android:startColor="#CC000000"
+        android:centerColor="#CC000000"
+        android:endColor="#0D000000" />
 
     <corners android:radius="0dp" />
 

app/src/main/res/layout-sw720dp/manga_info_header.xml

@@ -27,7 +27,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:alpha="1"
-        android:background="@drawable/manga_info_gradient"
+        android:background="@drawable/manga_backdrop_gradient"
         android:backgroundTint="?android:attr/colorBackground"
         app:layout_constraintBottom_toBottomOf="@+id/backdrop"
         app:layout_constraintEnd_toEndOf="parent"
@@ -190,51 +190,61 @@
             style="@style/TextAppearance.Regular.Body1.Secondary"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
             android:layout_marginTop="8dp"
             android:layout_marginEnd="16dp"
+            android:layout_marginStart="16dp"
             android:clickable="true"
             android:focusable="true"
-            android:maxLines="2"
+            android:maxLines="3"
+            android:ellipsize="end"
             android:textIsSelectable="false"
-            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/manga_cover"
-            tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
+            tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
+
+        <View
+            android:id="@+id/manga_info_scrim"
+            android:layout_width="0dp"
+            android:layout_height="32sp"
+            android:background="@drawable/manga_info_gradient"
+            android:backgroundTint="?android:attr/colorBackground"
+            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
+            app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
+            app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
 
         <View
             android:id="@+id/manga_info_toggle_more_scrim"
-            android:layout_width="20dp"
-            android:layout_height="0dp"
+            android:layout_width="36sp"
+            android:layout_height="18sp"
             android:background="@drawable/manga_info_more_gradient"
             android:backgroundTint="?android:attr/colorBackground"
-            app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
-            app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
-            app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
+            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
+            app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
+            app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/manga_info_toggle_more"
             style="@style/Widget.Tachiyomi.Button.InlineButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:paddingStart="8dp"
-            android:paddingEnd="16dp"
-            android:text="@string/manga_info_expand"
-            android:textAlignment="viewEnd"
-            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
-            app:layout_constraintEnd_toEndOf="parent" />
+            android:background="@drawable/ic_expand_more_24dp"
+            android:backgroundTint="?android:attr/textColorPrimary"
+            app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
+            app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
+            app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/manga_info_toggle_less"
             style="@style/Widget.Tachiyomi.Button.InlineButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:background="@drawable/ic_expand_less_24dp"
+            android:backgroundTint="?android:attr/textColorPrimary"
             android:paddingStart="8dp"
-            android:paddingEnd="16dp"
-            android:text="@string/manga_info_collapse"
-            android:textAlignment="viewEnd"
+            android:paddingEnd="8dp"
             android:visibility="gone"
             app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
             tools:visibility="gone" />
 
@@ -246,7 +256,7 @@
             android:scrollbars="none"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/manga_summary_text">
+            app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more">
 
             <com.google.android.material.chip.ChipGroup
                 android:id="@+id/manga_genres_tags_compact_chips"

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

@@ -26,7 +26,7 @@
         android:id="@+id/backdrop_overlay"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:background="@drawable/manga_info_gradient"
+        android:background="@drawable/manga_backdrop_gradient"
         android:backgroundTint="?android:attr/colorBackground"
         app:layout_constraintBottom_toBottomOf="@+id/backdrop"
         app:layout_constraintTop_toTopOf="parent" />
@@ -180,59 +180,68 @@
         android:layout_height="wrap_content"
         app:layoutDescription="@xml/manga_summary_section_scene"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/manga_actions">
+        app:layout_constraintStart_toStartOf="parent">
 
         <TextView
             android:id="@+id/manga_summary_text"
             style="@style/TextAppearance.Regular.Body1.Secondary"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
             android:layout_marginTop="8dp"
             android:layout_marginEnd="16dp"
+            android:layout_marginStart="16dp"
             android:clickable="true"
             android:focusable="true"
-            android:maxLines="2"
+            android:maxLines="3"
+            android:ellipsize="end"
             android:textIsSelectable="false"
-            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/manga_cover"
             tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
 
+        <View
+            android:id="@+id/manga_info_scrim"
+            android:layout_width="0dp"
+            android:layout_height="32sp"
+            android:background="@drawable/manga_info_gradient"
+            android:backgroundTint="?android:attr/colorBackground"
+            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
+            app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
+            app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
+
         <View
             android:id="@+id/manga_info_toggle_more_scrim"
-            android:layout_width="20dp"
-            android:layout_height="0dp"
+            android:layout_width="36sp"
+            android:layout_height="18sp"
             android:background="@drawable/manga_info_more_gradient"
             android:backgroundTint="?android:attr/colorBackground"
-            app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
-            app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
-            app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
+            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
+            app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
+            app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/manga_info_toggle_more"
             style="@style/Widget.Tachiyomi.Button.InlineButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:paddingStart="8dp"
-            android:paddingEnd="16dp"
-            android:text="@string/manga_info_expand"
-            android:textAlignment="viewEnd"
-            app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
-            app:layout_constraintEnd_toEndOf="parent" />
+            android:background="@drawable/ic_expand_more_24dp"
+            android:backgroundTint="?android:attr/textColorPrimary"
+            app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
+            app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
+            app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/manga_info_toggle_less"
             style="@style/Widget.Tachiyomi.Button.InlineButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:background="@drawable/ic_expand_less_24dp"
+            android:backgroundTint="?android:attr/textColorPrimary"
             android:paddingStart="8dp"
-            android:paddingEnd="16dp"
-            android:text="@string/manga_info_collapse"
-            android:textAlignment="viewEnd"
+            android:paddingEnd="8dp"
             android:visibility="gone"
             app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
             tools:visibility="gone" />
 
@@ -244,7 +253,7 @@
             android:scrollbars="none"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/manga_summary_text">
+            app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more">
 
             <com.google.android.material.chip.ChipGroup
                 android:id="@+id/manga_genres_tags_compact_chips"

app/src/main/res/xml/manga_summary_section_scene.xml

@@ -11,28 +11,23 @@
     </Transition>
 
     <ConstraintSet android:id="@+id/start">
-        <Constraint
-            android:id="@+id/manga_info_toggle_more_scrim"
-            android:layout_width="20dp"
-            android:layout_height="0dp"
-            android:visibility="visible"
-            motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
-            motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
-            motion:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
         <Constraint
             android:id="@+id/manga_info_toggle_more"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:visibility="visible"
-            motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
-            motion:layout_constraintEnd_toEndOf="parent" />
+            motion:layout_constraintEnd_toEndOf="parent"
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text"
+            android:layout_marginBottom="-4dp" />
         <Constraint
             android:id="@+id/manga_info_toggle_less"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:visibility="gone"
             motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" />
         <Constraint
             android:id="@+id/manga_genres_tags_compact"
             android:layout_width="match_parent"
@@ -40,7 +35,7 @@
             android:visibility="visible"
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
+            motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" />
         <Constraint
             android:id="@+id/manga_genres_tags_full_chips"
             android:layout_width="match_parent"
@@ -51,31 +46,54 @@
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintStart_toStartOf="parent"
             motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less" />
+        <Constraint
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
+            android:layout_marginStart="16dp"
+            motion:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="8dp"
+            android:id="@+id/manga_summary_text"
+            motion:layout_constraintEnd_toEndOf="parent"
+            android:layout_marginEnd="16dp" />
     </ConstraintSet>
 
     <ConstraintSet android:id="@+id/end">
         <Constraint
-            android:id="@+id/manga_info_toggle_more_scrim"
-            android:layout_width="20dp"
-            android:layout_height="0dp"
-            android:visibility="gone"
-            motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
-            motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
-            motion:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
+            android:id="@+id/manga_summary_text"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginStart="16dp"
+            motion:layout_constraintEnd_toEndOf="parent"
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
+            motion:visibilityMode="ignore" />
+        <Constraint
+            android:id="@+id/manga_info_scrim"
+            motion:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
+            android:layout_width="0dp"
+            android:layout_height="24sp"
+            motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
+            motion:layout_constraintStart_toStartOf="@+id/manga_summary_text"
+            android:visibility="invisible" />
         <Constraint
             android:id="@+id/manga_info_toggle_more"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:visibility="gone"
-            motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
-            motion:layout_constraintEnd_toEndOf="parent" />
+            motion:layout_constraintEnd_toEndOf="parent"
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text" />
         <Constraint
             android:id="@+id/manga_info_toggle_less"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:visibility="visible"
             motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" />
         <Constraint
             android:id="@+id/manga_genres_tags_compact"
             android:layout_width="match_parent"
@@ -83,7 +101,7 @@
             android:visibility="gone"
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
+            motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" />
         <Constraint
             android:id="@+id/manga_genres_tags_full_chips"
             android:layout_width="match_parent"
@@ -94,49 +112,5 @@
             motion:layout_constraintEnd_toEndOf="parent"
             motion:layout_constraintStart_toStartOf="parent"
             motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less" />
-        <Constraint
-            android:id="@+id/manga_summary_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginEnd="16dp"
-            motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
-            motion:visibilityMode="ignore" />
-        <Constraint
-            android:id="@+id/manga_summary_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginEnd="16dp"
-            motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
-            motion:visibilityMode="ignore" />
-        <Constraint
-            android:id="@+id/manga_summary_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginEnd="16dp"
-            motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
-            motion:visibilityMode="ignore" />
-        <Constraint
-            android:id="@+id/manga_summary_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginEnd="16dp"
-            motion:layout_constraintEnd_toEndOf="parent"
-            motion:layout_constraintStart_toStartOf="parent"
-            motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
-            motion:visibilityMode="ignore" />
     </ConstraintSet>
 </MotionScene>