Start updating manga info view header design

app/src/main/java/eu/kanade/tachiyomi/ui/manga/chapter/MangaChaptersHeaderAdapter.kt

@@ -66,7 +66,7 @@ class MangaChaptersHeaderAdapter(
             } else {
                 view.context.getResourceColor(R.attr.colorOnPrimary)
             }
-            DrawableCompat.setTint(binding.btnChaptersFilter.icon, filterColor)
+            DrawableCompat.setTint(binding.btnChaptersFilter.drawable, filterColor)
 
             merge(view.clicks(), binding.btnChaptersFilter.clicks())
                 .onEach { controller.showSettingsSheet() }

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

@@ -105,13 +105,27 @@ class MangaInfoHeaderAdapter(
                     isVisible = true
 
                     if (trackCount > 0) {
-                        setIconResource(R.drawable.ic_done_24dp)
-                        text = view.context.resources.getQuantityString(R.plurals.num_trackers, trackCount, trackCount)
-                        isChecked = true
+                        setCompoundDrawablesWithIntrinsicBounds(
+                            null,
+                            ContextCompat.getDrawable(context, R.drawable.ic_done_24dp),
+                            null,
+                            null
+                        )
+                        text = view.context.resources.getQuantityString(
+                            R.plurals.num_trackers,
+                            trackCount,
+                            trackCount
+                        )
+                        isSelected = true
                     } else {
-                        setIconResource(R.drawable.ic_sync_24dp)
+                        setCompoundDrawablesWithIntrinsicBounds(
+                            null,
+                            ContextCompat.getDrawable(context, R.drawable.ic_sync_24dp),
+                            null,
+                            null
+                        )
                         text = view.context.getString(R.string.manga_tracking_tab)
-                        isChecked = false
+                        isSelected = false
                     }
 
                     clicks()
@@ -279,14 +293,24 @@ class MangaInfoHeaderAdapter(
 
                 // Update genres list
                 if (!manga.genre.isNullOrBlank()) {
-                    binding.mangaGenresTagsCompactChips.setChips(manga.getGenres(), controller::performSearch)
-                    binding.mangaGenresTagsFullChips.setChips(manga.getGenres(), controller::performSearch)
+                    binding.mangaGenresTagsCompactChips.setChips(
+                        manga.getGenres(),
+                        controller::performSearch
+                    )
+                    binding.mangaGenresTagsFullChips.setChips(
+                        manga.getGenres(),
+                        controller::performSearch
+                    )
                 } else {
                     binding.mangaGenresTagsWrapper.isVisible = false
                 }
 
                 // Handle showing more or less info
-                merge(binding.mangaSummarySection.clicks(), binding.mangaSummaryText.clicks(), binding.mangaInfoToggle.clicks())
+                merge(
+                    binding.mangaSummarySection.clicks(),
+                    binding.mangaSummaryText.clicks(),
+                    binding.mangaInfoToggle.clicks()
+                )
                     .onEach { toggleMangaInfo(view.context) }
                     .launchIn(scope)
 
@@ -304,20 +328,22 @@ class MangaInfoHeaderAdapter(
 
         private fun toggleMangaInfo(context: Context) {
             val isExpanded =
-                binding.mangaInfoToggle.text == context.getString(R.string.manga_info_collapse)
+                binding.mangaInfoToggle.contentDescription == context.getString(R.string.manga_info_collapse)
 
             with(binding.mangaInfoToggle) {
-                text = if (isExpanded) {
+                contentDescription = if (isExpanded) {
                     context.getString(R.string.manga_info_expand)
                 } else {
                     context.getString(R.string.manga_info_collapse)
                 }
 
-                icon = if (isExpanded) {
+                setImageDrawable(
+                    if (isExpanded) {
                         context.getDrawable(R.drawable.ic_baseline_expand_more_24dp)
                     } else {
                         context.getDrawable(R.drawable.ic_baseline_expand_less_24dp)
                     }
+                )
             }
 
             with(binding.mangaSummaryText) {
@@ -349,13 +375,18 @@ class MangaInfoHeaderAdapter(
             // Set the Favorite drawable to the correct one.
             // Border drawable if false, filled drawable if true.
             binding.btnFavorite.apply {
-                icon = ContextCompat.getDrawable(
+                setCompoundDrawablesWithIntrinsicBounds(
+                    null,
+                    ContextCompat.getDrawable(
                         context,
                         if (isFavorite) R.drawable.ic_favorite_24dp else R.drawable.ic_favorite_border_24dp
+                    ),
+                    null,
+                    null
                 )
                 text =
                     context.getString(if (isFavorite) R.string.in_library else R.string.add_to_library)
-                isChecked = isFavorite
+                isSelected = isFavorite
             }
         }
     }

app/src/main/res/color/outlined_button_stroke.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:alpha="0.12" android:color="?attr/colorOnSurface" />
-</selector>

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

@@ -23,16 +23,16 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <com.google.android.material.button.MaterialButton
+    <ImageButton
         android:id="@+id/btn_chapters_filter"
-        style="@style/Theme.Widget.Button.Icon"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="@string/action_filter"
-        app:icon="@drawable/ic_filter_list_24dp"
-        app:iconTint="?attr/colorOnPrimary"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:background="?selectableItemBackgroundBorderless"
+        android:contentDescription="@string/action_filter"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_filter_list_24dp"
+        app:tint="?attr/colorOnPrimary" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -15,6 +15,7 @@
             android:id="@+id/backdrop"
             android:layout_width="0dp"
             android:layout_height="0dp"
+            android:layout_marginBottom="?attr/actionBarSize"
             android:alpha="0.2"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -25,6 +26,7 @@
         <View
             android:layout_width="match_parent"
             android:layout_height="88dp"
+            android:layout_marginBottom="?attr/actionBarSize"
             android:background="@drawable/manga_info_gradient"
             app:layout_constraintBottom_toBottomOf="parent" />
 
@@ -33,7 +35,10 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
-            android:padding="16dp"
+            android:paddingStart="16dp"
+            android:paddingTop="64dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="16dp"
             app:layout_constraintTop_toTopOf="parent">
 
             <eu.kanade.tachiyomi.ui.manga.info.MangaCoverImageView
@@ -42,18 +47,16 @@
                 android:layout_height="wrap_content"
                 android:background="@drawable/rounded_rectangle"
                 android:contentDescription="@string/description_cover"
-                android:maxWidth="220dp"
+                android:maxWidth="100dp"
                 tools:src="@mipmap/ic_launcher" />
 
             <LinearLayout
-                android:id="@+id/manga_info_section"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_gravity="bottom"
                 android:layout_marginStart="16dp"
-                android:orientation="vertical"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintStart_toEndOf="@+id/manga_cover"
-                app:layout_constraintTop_toTopOf="parent">
+                android:layout_marginBottom="16dp"
+                android:orientation="vertical">
 
                 <TextView
                     android:id="@+id/manga_full_title"
@@ -73,6 +76,7 @@
                     style="@style/TextAppearance.Regular.Body1.Secondary"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
+                    android:layout_marginTop="4dp"
                     android:textIsSelectable="false"
                     tools:text="Author" />
 
@@ -84,17 +88,31 @@
                     android:textIsSelectable="false"
                     tools:text="Artist" />
 
+                <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="4dp">
+
                     <TextView
                         android:id="@+id/manga_status"
                         style="@style/TextAppearance.Regular.Body1.Secondary"
                         android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginTop="8dp"
+                        android:layout_height="match_parent"
                         android:ellipsize="end"
                         android:maxLines="1"
                         android:textIsSelectable="false"
                         tools:text="Status" />
 
+                    <TextView
+                        style="@style/TextAppearance.Regular.Body1.Secondary"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="4dp"
+                        android:layout_marginEnd="4dp"
+                        android:text="•"
+                        android:textIsSelectable="false"
+                        tools:ignore="HardcodedText" />
+
                     <TextView
                         android:id="@+id/manga_source"
                         style="@style/TextAppearance.Regular.Body1.Secondary"
@@ -109,62 +127,62 @@
 
             </LinearLayout>
 
-        <HorizontalScrollView
+        </LinearLayout>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:requiresFadingEdge="horizontal"
-            app:layout_constraintTop_toBottomOf="@+id/manga_info">
+        android:layout_height="wrap_content">
 
-            <LinearLayout
-                android:id="@+id/actions_bar"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:paddingStart="16dp"
-                android:paddingEnd="16dp">
-
-                <com.google.android.material.button.MaterialButton
+        <androidx.appcompat.widget.AppCompatButton
             android:id="@+id/btn_favorite"
-                    style="@style/Theme.Widget.Button.Icon"
-                    android:layout_width="wrap_content"
+            style="@style/Theme.Widget.Button.Action"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:checkable="true"
             android:text="@string/add_to_library"
-                    app:icon="@drawable/ic_favorite_border_24dp" />
+            app:drawableTopCompat="@drawable/ic_favorite_border_24dp"
+            app:layout_constraintEnd_toStartOf="@+id/btn_tracking"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
-                <com.google.android.material.button.MaterialButton
+        <androidx.appcompat.widget.AppCompatButton
             android:id="@+id/btn_tracking"
-                    style="@style/Theme.Widget.Button.Icon"
-                    android:layout_width="wrap_content"
+            style="@style/Theme.Widget.Button.Action"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
             android:checkable="true"
             android:text="@string/manga_tracking_tab"
             android:visibility="gone"
-                    app:icon="@drawable/ic_sync_24dp"
+            app:drawableTopCompat="@drawable/ic_sync_24dp"
+            app:layout_constraintEnd_toStartOf="@+id/btn_webview"
+            app:layout_constraintStart_toEndOf="@+id/btn_favorite"
+            app:layout_constraintTop_toTopOf="parent"
             tools:visibility="visible" />
 
-                <com.google.android.material.button.MaterialButton
+        <androidx.appcompat.widget.AppCompatButton
             android:id="@+id/btn_webview"
-                    style="@style/Theme.Widget.Button.Icon.Textless"
-                    android:layout_width="wrap_content"
+            style="@style/Theme.Widget.Button.Action"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
-                    android:contentDescription="@string/action_open_in_web_view"
+            android:text="@string/action_web_view"
             android:visibility="gone"
-                    app:icon="@drawable/ic_public_24dp"
+            app:drawableTopCompat="@drawable/ic_public_24dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/btn_tracking"
+            app:layout_constraintTop_toTopOf="parent"
             tools:visibility="visible" />
 
-            </LinearLayout>
-
-        </HorizontalScrollView>
-
     </androidx.constraintlayout.widget.ConstraintLayout>
 
     <LinearLayout
         android:id="@+id/manga_summary_section"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
         android:background="?attr/selectableItemBackground"
         android:orientation="vertical">
 
@@ -174,31 +192,18 @@
             android:paddingStart="16dp"
             android:paddingEnd="16dp">
 
-            <TextView
-                android:id="@+id/manga_summary_label"
-                style="@style/TextAppearance.Regular.SubHeading"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_centerVertical="true"
-                android:text="@string/manga_info_about_label"
-                android:textIsSelectable="false"
-                app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toTopOf="parent" />
-
-            <com.google.android.material.button.MaterialButton
+            <ImageButton
                 android:id="@+id/manga_info_toggle"
-                style="@style/Theme.Widget.Button.Icon"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
+                android:layout_width="32dp"
+                android:layout_height="32dp"
                 android:layout_alignParentEnd="true"
-                android:text="@string/manga_info_expand"
-                app:icon="@drawable/ic_baseline_expand_more_24dp"
-                app:iconTint="?attr/colorOnPrimary"
+                android:background="?selectableItemBackgroundBorderless"
+                android:contentDescription="@string/manga_info_expand"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintTop_toTopOf="parent" />
+                app:layout_constraintTop_toTopOf="parent"
+                app:srcCompat="@drawable/ic_baseline_expand_more_24dp"
+                app:tint="?attr/colorOnPrimary" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 

app/src/main/res/values/strings.xml

@@ -83,6 +83,7 @@
     <string name="action_move">Move</string>
     <string name="action_open_in_browser">Open in browser</string>
     <string name="action_open_in_web_view">Open in WebView</string>
+    <string name="action_web_view">WebView</string>
     <string name="action_open_in_settings">Open in Settings</string>
     <string name="action_migrate">Migrate</string>
     <string name="action_display_mode">Display mode</string>
@@ -485,7 +486,6 @@
     <string name="manga_info_full_title_label">Title</string>
     <string name="manga_added_library">Added to library</string>
     <string name="manga_removed_library">Removed from library</string>
-    <string name="manga_info_about_label">About</string>
     <string name="manga_info_expand">More</string>
     <string name="manga_info_collapse">Less</string>
     <plurals name="manga_num_chapters">

app/src/main/res/values/styles.xml

@@ -96,15 +96,7 @@
     </style>
 
     <style name="TextAppearance.Medium.Title">
-        <item name="android:textSize">20sp</item>
-    </style>
-
-    <style name="TextAppearance.Medium.Title.Upper">
-        <item name="android:textAllCaps">true</item>
-    </style>
-
-    <style name="TextAppearance.Medium.Title.Secondary">
-        <item name="android:textColor">?android:attr/textColorSecondary</item>
+        <item name="android:textSize">24sp</item>
     </style>
 
     <style name="TextAppearance.Medium.Body2">
@@ -260,34 +252,17 @@
         <item name="android:textAllCaps">false</item>
     </style>
 
-    <style name="Theme.Widget.Button.Icon" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
-        <item name="android:minHeight">0dp</item>
-        <item name="android:paddingBottom">4dp</item>
-        <item name="android:paddingStart">8dp</item>
-        <item name="android:paddingEnd">16dp</item>
-
+    <style name="Theme.Widget.Button.Action" parent="Widget.MaterialComponents.Button.Icon">
         <item name="elevation">0dp</item>
 
         <item name="android:textSize">12sp</item>
-        <item name="textAllCaps">false</item>
-        <item name="cornerRadius">16dp</item>
 
-        <item name="iconTint">?attr/colorAccent</item>
+        <item name="drawableTint">?attr/colorOnBackground</item>
+        <item name="android:drawablePadding">4dp</item>
         <item name="rippleColor">?attr/colorAccent</item>
         <item name="android:textColor">?attr/colorOnBackground</item>
 
         <item name="backgroundTint">@color/outlined_button_bg</item>
-        <item name="strokeColor">@color/outlined_button_stroke</item>
-    </style>
-
-    <style name="Theme.Widget.Button.Icon.Textless">
-        <item name="android:minWidth">0dp</item>
-        <item name="android:paddingLeft">8dp</item>
-        <item name="android:paddingRight">8dp</item>
-        <item name="android:paddingStart">8dp</item>
-        <item name="android:paddingEnd">8dp</item>
-        <item name="iconPadding">0dp</item>
-        <item name="strokeWidth">0dp</item>
     </style>