Update chapters grid ui

app/src/main/kotlin/org/koitharu/kotatsu/details/ui/adapter/ChapterGridItemAD.kt

@@ -1,24 +1,21 @@
 package org.koitharu.kotatsu.details.ui.adapter
 
 import android.graphics.Typeface
-import androidx.core.content.ContextCompat
 import androidx.core.view.isVisible
 import com.hannesdorfmann.adapterdelegates4.dsl.adapterDelegateViewBinding
-import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.core.model.formatNumber
 import org.koitharu.kotatsu.core.ui.list.AdapterDelegateClickListenerAdapter
 import org.koitharu.kotatsu.core.ui.list.OnListItemClickListener
-import org.koitharu.kotatsu.core.util.ext.drawableStart
 import org.koitharu.kotatsu.core.util.ext.getThemeColorStateList
 import org.koitharu.kotatsu.databinding.ItemChapterGridBinding
 import org.koitharu.kotatsu.details.ui.model.ChapterListItem
 import org.koitharu.kotatsu.list.ui.model.ListModel
-import kotlin.math.roundToInt
 
 fun chapterGridItemAD(
 	clickListener: OnListItemClickListener<ChapterListItem>,
 ) = adapterDelegateViewBinding<ChapterListItem, ListModel, ItemChapterGridBinding>(
 	viewBinding = { inflater, parent -> ItemChapterGridBinding.inflate(inflater, parent, false) },
-	on = { item, _, _ -> item is ChapterListItem && item.isGrid }
+	on = { item, _, _ -> item is ChapterListItem && item.isGrid },
 ) {
 
 	val eventListener = AdapterDelegateClickListenerAdapter(this, clickListener)
@@ -27,33 +24,29 @@ fun chapterGridItemAD(
 
 	bind { payloads ->
 		if (payloads.isEmpty()) {
-			binding.textViewTitle.text = item.chapter.number.roundToInt().toString()
+			binding.textViewTitle.text = item.chapter.formatNumber()
 		}
+		binding.imageViewNew.isVisible = item.isNew
+		binding.imageViewCurrent.isVisible = item.isCurrent
+		binding.imageViewBookmarked.isVisible = item.isBookmarked
+		binding.imageViewDownloaded.isVisible = item.isDownloaded
+
 		when {
 			item.isCurrent -> {
-				binding.textViewTitle.drawableStart = ContextCompat.getDrawable(context, R.drawable.ic_current_chapter)
 				binding.textViewTitle.setTextColor(context.getThemeColorStateList(android.R.attr.textColorPrimary))
 				binding.textViewTitle.typeface = Typeface.DEFAULT_BOLD
 			}
 
 			item.isUnread -> {
-				binding.textViewTitle.drawableStart = if (item.isNew) {
-					ContextCompat.getDrawable(context, R.drawable.ic_new)
-				} else {
-					null
-				}
 				binding.textViewTitle.setTextColor(context.getThemeColorStateList(android.R.attr.textColorPrimary))
 				binding.textViewTitle.typeface = Typeface.DEFAULT
 			}
 
 			else -> {
-				binding.textViewTitle.drawableStart = null
 				binding.textViewTitle.setTextColor(context.getThemeColorStateList(android.R.attr.textColorHint))
 				binding.textViewTitle.typeface = Typeface.DEFAULT
 			}
 		}
-		binding.imageViewBookmarked.isVisible = item.isBookmarked
-		binding.imageViewDownloaded.isVisible = item.isDownloaded
 	}
 }
 

app/src/main/kotlin/org/koitharu/kotatsu/details/ui/adapter/ChaptersSelectionDecoration.kt

@@ -6,8 +6,11 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.RectF
 import android.view.View
+import androidx.cardview.widget.CardView
+import androidx.core.content.ContextCompat
 import androidx.core.graphics.ColorUtils
 import androidx.recyclerview.widget.RecyclerView
+import org.koitharu.kotatsu.R
 import org.koitharu.kotatsu.core.ui.list.decor.AbstractSelectionItemDecoration
 import org.koitharu.kotatsu.core.util.ext.getItem
 import org.koitharu.kotatsu.core.util.ext.getThemeColor
@@ -18,6 +21,14 @@ class ChaptersSelectionDecoration(context: Context) : AbstractSelectionItemDecor
 
 	private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
 	private val radius = context.resources.getDimension(materialR.dimen.abc_control_corner_material)
+	private val checkIcon = ContextCompat.getDrawable(context, materialR.drawable.ic_mtrl_checked_circle)
+	private val iconOffset = context.resources.getDimensionPixelOffset(R.dimen.chapter_check_offset)
+	private val iconSize = context.resources.getDimensionPixelOffset(R.dimen.chapter_check_size)
+	private val strokeColor = context.getThemeColor(materialR.attr.colorPrimary, Color.RED)
+	private val fillColor = ColorUtils.setAlphaComponent(
+		ColorUtils.blendARGB(strokeColor, context.getThemeColor(materialR.attr.colorSurface), 0.8f),
+		0x74,
+	)
 
 	init {
 		paint.color = ColorUtils.setAlphaComponent(
@@ -25,6 +36,12 @@ class ChaptersSelectionDecoration(context: Context) : AbstractSelectionItemDecor
 			98,
 		)
 		paint.style = Paint.Style.FILL
+		hasBackground = false
+		hasForeground = true
+		isIncludeDecorAndMargins = false
+
+		paint.strokeWidth = context.resources.getDimension(R.dimen.selection_stroke_width)
+		checkIcon?.setTint(strokeColor)
 	}
 
 	override fun getItemId(parent: RecyclerView, child: View): Long {
@@ -40,6 +57,37 @@ class ChaptersSelectionDecoration(context: Context) : AbstractSelectionItemDecor
 		bounds: RectF,
 		state: RecyclerView.State,
 	) {
+		if (child is CardView) {
+			return
+		}
 		canvas.drawRoundRect(bounds, radius, radius, paint)
 	}
+
+	override fun onDrawForeground(
+		canvas: Canvas,
+		parent: RecyclerView,
+		child: View,
+		bounds: RectF,
+		state: RecyclerView.State
+	) {
+		if (child !is CardView) {
+			return
+		}
+		val radius = child.radius
+		paint.color = fillColor
+		paint.style = Paint.Style.FILL
+		canvas.drawRoundRect(bounds, radius, radius, paint)
+		paint.color = strokeColor
+		paint.style = Paint.Style.STROKE
+		canvas.drawRoundRect(bounds, radius, radius, paint)
+		checkIcon?.run {
+			setBounds(
+				(bounds.right - iconSize - iconOffset).toInt(),
+				(bounds.top + iconOffset).toInt(),
+				(bounds.right - iconOffset).toInt(),
+				(bounds.top + iconOffset + iconSize).toInt(),
+			)
+			draw(canvas)
+		}
+	}
 }

app/src/main/kotlin/org/koitharu/kotatsu/details/ui/pager/chapters/ChapterGridSpanHelper.kt

@@ -0,0 +1,46 @@
+package org.koitharu.kotatsu.details.ui.pager.chapters
+
+import android.view.View
+import androidx.recyclerview.widget.GridLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import org.koitharu.kotatsu.R
+import kotlin.math.roundToInt
+
+class ChapterGridSpanHelper private constructor() : View.OnLayoutChangeListener {
+
+	override fun onLayoutChange(
+		v: View?,
+		left: Int,
+		top: Int,
+		right: Int,
+		bottom: Int,
+		oldLeft: Int,
+		oldTop: Int,
+		oldRight: Int,
+		oldBottom: Int
+	) {
+		val rv = v as? RecyclerView ?: return
+		if (rv.width > 0) {
+			apply(rv)
+		}
+	}
+
+	private fun apply(rv: RecyclerView) {
+		(rv.layoutManager as? GridLayoutManager)?.spanCount = getSpanCount(rv)
+	}
+
+	companion object {
+
+		fun attach(view: RecyclerView) {
+			val helper = ChapterGridSpanHelper()
+			view.addOnLayoutChangeListener(helper)
+			helper.apply(view)
+		}
+
+		fun getSpanCount(view: RecyclerView): Int {
+			val cellWidth = view.resources.getDimension(R.dimen.chapter_grid_width)
+			val estimatedCount = (view.width / cellWidth).roundToInt()
+			return estimatedCount.coerceAtLeast(2)
+		}
+	}
+}

app/src/main/kotlin/org/koitharu/kotatsu/details/ui/pager/chapters/ChaptersFragment.kt

@@ -1,7 +1,6 @@
 package org.koitharu.kotatsu.details.ui.pager.chapters
 
 import android.os.Bundle
-import android.util.Log
 import android.view.LayoutInflater
 import android.view.Menu
 import android.view.MenuItem
@@ -65,19 +64,20 @@ class ChaptersFragment :
 			registryOwner = this,
 			callback = this,
 		)
+		viewModel.isChaptersInGridView.observe(viewLifecycleOwner) { chaptersInGridView ->
+			binding.recyclerViewChapters.layoutManager = if (chaptersInGridView) {
+				GridLayoutManager(context, ChapterGridSpanHelper.getSpanCount(binding.recyclerViewChapters))
+			} else {
+				LinearLayoutManager(context)
+			}
+		}
 		with(binding.recyclerViewChapters) {
 			addItemDecoration(TypedListSpacingDecoration(context, true))
 			checkNotNull(selectionController).attachToRecyclerView(this)
 			setHasFixedSize(true)
 			isNestedScrollingEnabled = false
 			adapter = chaptersAdapter
-		}
-		viewModel.isChaptersInGridView.observe(viewLifecycleOwner) { chaptersInGridView ->
-			binding.recyclerViewChapters.layoutManager = if (chaptersInGridView) {
-				GridLayoutManager(context, 4)
-			} else {
-				LinearLayoutManager(context)
-			}
+			ChapterGridSpanHelper.attach(this)
 		}
 		viewModel.isLoading.observe(viewLifecycleOwner, this::onLoadingStateChanged)
 		viewModel.chapters

app/src/main/kotlin/org/koitharu/kotatsu/list/ui/adapter/TypedListSpacingDecoration.kt

@@ -63,10 +63,11 @@ class TypedListSpacingDecoration(
 			ListItemType.CATEGORY_LARGE,
 			ListItemType.NAV_ITEM,
 			ListItemType.CHAPTER_LIST,
-			ListItemType.CHAPTER_GRID,
 			null,
 			-> outRect.set(0)
 
+			ListItemType.CHAPTER_GRID -> outRect.set(spacingSmall)
+
 			ListItemType.TIP -> outRect.set(0) // TODO
 		}
 		if (addHorizontalPadding && !itemType.isEdgeToEdge()) {

app/src/main/kotlin/org/koitharu/kotatsu/reader/ui/ChaptersSheet.kt

@@ -21,6 +21,7 @@ import org.koitharu.kotatsu.databinding.SheetChaptersBinding
 import org.koitharu.kotatsu.details.ui.adapter.ChaptersAdapter
 import org.koitharu.kotatsu.details.ui.mapChapters
 import org.koitharu.kotatsu.details.ui.model.ChapterListItem
+import org.koitharu.kotatsu.details.ui.pager.chapters.ChapterGridSpanHelper
 import org.koitharu.kotatsu.details.ui.withVolumeHeaders
 import org.koitharu.kotatsu.history.data.PROGRESS_NONE
 import org.koitharu.kotatsu.list.ui.adapter.TypedListSpacingDecoration
@@ -90,8 +91,9 @@ class ChaptersSheet : BaseAdaptiveSheet<SheetChaptersBinding>(),
 				adapter.items = chapters
 			}
 		}
+		ChapterGridSpanHelper.attach(binding.recyclerView)
 		binding.recyclerView.layoutManager = if (settings.isChaptersGridView) {
-			GridLayoutManager(context, 4)
+			GridLayoutManager(context, ChapterGridSpanHelper.getSpanCount(binding.recyclerView))
 		} else {
 			LinearLayoutManager(context)
 		}

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

@@ -1,68 +1,84 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
+<com.google.android.material.card.MaterialCardView
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:app="http://schemas.android.com/apk/res-auto"
 	xmlns:tools="http://schemas.android.com/tools"
+	style="?materialCardViewOutlinedStyle"
 	android:layout_width="match_parent"
-	android:layout_height="wrap_content">
+	android:layout_height="wrap_content"
+	tools:layout_width="@dimen/chapter_grid_width">
 
-	<com.google.android.material.card.MaterialCardView
-		android:layout_width="0dp"
-		android:layout_height="0dp"
-		android:layout_margin="6dp"
-		android:clipChildren="false"
-		app:cardCornerRadius="16dp"
-		app:layout_constraintBottom_toBottomOf="parent"
-		app:layout_constraintDimensionRatio="H,1:1"
-		app:layout_constraintEnd_toEndOf="parent"
-		app:layout_constraintStart_toStartOf="parent"
-		app:layout_constraintTop_toTopOf="parent">
+	<androidx.constraintlayout.widget.ConstraintLayout
+		android:layout_width="match_parent"
+		android:layout_height="wrap_content">
 
-		<LinearLayout
-			android:layout_width="wrap_content"
-			android:layout_height="wrap_content"
-			android:layout_gravity="center"
-			android:orientation="vertical">
+		<TextView
+			android:id="@+id/textView_title"
+			android:layout_width="0dp"
+			android:layout_height="0dp"
+			android:gravity="center"
+			android:singleLine="true"
+			android:textAlignment="center"
+			android:textAppearance="?attr/textAppearanceTitleMedium"
+			app:layout_constraintDimensionRatio="1:1"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toTopOf="parent"
+			tools:text="150"
+			tools:textColor="?android:textColorPrimary" />
 
-			<TextView
-				android:id="@+id/textView_title"
-				android:layout_width="wrap_content"
-				android:layout_height="wrap_content"
-				android:layout_gravity="center"
-				android:singleLine="true"
-				android:textAppearance="?attr/textAppearanceBodyLarge"
-				tools:text="150"
-				tools:textColor="?android:textColorPrimary" />
+		<ImageView
+			android:id="@+id/imageView_bookmarked"
+			android:layout_width="14dp"
+			android:layout_height="14dp"
+			android:layout_marginEnd="6dp"
+			android:layout_marginBottom="6dp"
+			android:contentDescription="@string/bookmarks"
+			android:visibility="gone"
+			app:layout_constraintBottom_toBottomOf="@id/textView_title"
+			app:layout_constraintEnd_toEndOf="@id/textView_title"
+			app:srcCompat="@drawable/ic_bookmark"
+			tools:visibility="visible" />
 
-			<LinearLayout
-				android:layout_width="wrap_content"
-				android:layout_height="wrap_content"
-				android:layout_gravity="center"
-				android:layout_marginTop="6dp"
-				android:orientation="horizontal">
+		<ImageView
+			android:id="@+id/imageView_downloaded"
+			android:layout_width="14dp"
+			android:layout_height="14dp"
+			android:layout_marginEnd="6dp"
+			android:layout_marginBottom="6dp"
+			android:contentDescription="@string/downloaded"
+			android:visibility="gone"
+			app:layout_constraintBottom_toBottomOf="@id/textView_title"
+			app:layout_constraintEnd_toStartOf="@id/imageView_bookmarked"
+			app:srcCompat="@drawable/ic_save_ok"
+			tools:visibility="visible" />
 
-				<ImageView
-					android:id="@+id/imageView_bookmarked"
-					android:layout_width="20dp"
-					android:layout_height="20dp"
-					android:layout_marginStart="6dp"
-					android:layout_marginEnd="6dp"
-					android:contentDescription="@string/bookmarks"
-					app:srcCompat="@drawable/ic_bookmark" />
+		<ImageView
+			android:id="@+id/imageView_new"
+			android:layout_width="8dp"
+			android:layout_height="8dp"
+			android:layout_marginTop="10dp"
+			android:layout_marginEnd="10dp"
+			android:contentDescription="@string/new_chapters"
+			android:visibility="gone"
+			app:layout_constraintEnd_toEndOf="@id/textView_title"
+			app:layout_constraintTop_toTopOf="@id/textView_title"
+			app:srcCompat="@drawable/ic_new"
+			tools:visibility="visible" />
 
-				<ImageView
-					android:id="@+id/imageView_downloaded"
-					android:layout_width="20dp"
-					android:layout_height="20dp"
-					android:layout_marginStart="6dp"
-					android:layout_marginEnd="6dp"
-					android:contentDescription="@string/downloaded"
-					app:srcCompat="@drawable/ic_save_ok" />
+		<ImageView
+			android:id="@+id/imageView_current"
+			android:layout_width="16dp"
+			android:layout_height="16dp"
+			android:layout_marginStart="6dp"
+			android:layout_marginTop="6dp"
+			android:contentDescription="@string/new_chapters"
+			android:visibility="gone"
+			app:layout_constraintStart_toStartOf="@id/textView_title"
+			app:layout_constraintTop_toTopOf="@id/textView_title"
+			app:srcCompat="@drawable/ic_current_chapter"
+			tools:visibility="visible" />
 
-			</LinearLayout>
+	</androidx.constraintlayout.widget.ConstraintLayout>
 
-		</LinearLayout>
-
-	</com.google.android.material.card.MaterialCardView>
-
-</androidx.constraintlayout.widget.ConstraintLayout>
+</com.google.android.material.card.MaterialCardView>

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

@@ -40,6 +40,7 @@
 	<dimen name="reader_bar_inset_fallback">8dp</dimen>
 	<dimen name="scrobbling_list_spacing">12dp</dimen>
 	<dimen name="explore_grid_width">120dp</dimen>
+	<dimen name="chapter_grid_width">80dp</dimen>
 	<dimen name="side_card_offset">8dp</dimen>
 
 	<dimen name="search_suggestions_manga_height">124dp</dimen>
@@ -55,6 +56,9 @@
 	<dimen name="card_indicator_size_small">24dp</dimen>
 	<dimen name="card_indicator_offset">8dp</dimen>
 
+	<dimen name="chapter_check_size">16dp</dimen>
+	<dimen name="chapter_check_offset">6dp</dimen>
+
 	<dimen name="appwidget_corner_radius_inner">20dp</dimen>
 	<dimen name="appwidget_corner_radius_background">28dp</dimen>