Manga details activity

.idea/.name

@@ -1 +0,0 @@
-OpenManga Next

app/src/main/AndroidManifest.xml

@@ -1,19 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-	xmlns:android="http://schemas.android.com/apk/res/android"
 	package="org.koitharu.kotatsu">
 
 	<uses-permission android:name="android.permission.INTERNET" />
 
 	<application
+		android:name="org.koitharu.kotatsu.KotatsuApp"
 		android:allowBackup="true"
+		android:fullBackupContent="@xml/backup_descriptor"
 		android:icon="@mipmap/ic_launcher"
 		android:label="@string/app_name"
 		android:roundIcon="@mipmap/ic_launcher_round"
 		android:supportsRtl="true"
-		android:name="org.koitharu.kotatsu.KotatsuApp"
+		android:theme="@style/AppTheme">
-		android:theme="@style/AppTheme"
-		android:fullBackupContent="@xml/backup_descriptor">
 		<activity android:name="org.koitharu.kotatsu.ui.main.MainActivity">
 			<intent-filter>
 				<action android:name="android.intent.action.MAIN" />
@@ -21,6 +20,7 @@
 				<category android:name="android.intent.category.LAUNCHER" />
 			</intent-filter>
 		</activity>
+		<activity android:name=".ui.main.details.MangaDetailsActivity" />
 	</application>
 
 </manifest>

app/src/main/java/org/koitharu/kotatsu/domain/repository/ReadmangaRepository.kt

@@ -1,13 +1,12 @@
 package org.koitharu.kotatsu.domain.repository
 
+import androidx.core.text.HtmlCompat
+import androidx.core.text.parseAsHtml
 import org.koitharu.kotatsu.core.model.*
 import org.koitharu.kotatsu.domain.MangaLoaderContext
 import org.koitharu.kotatsu.domain.MangaRepository
 import org.koitharu.kotatsu.domain.exceptions.ParseException
-import org.koitharu.kotatsu.utils.ext.longHashCode
+import org.koitharu.kotatsu.utils.ext.*
-import org.koitharu.kotatsu.utils.ext.parseHtml
-import org.koitharu.kotatsu.utils.ext.safe
-import org.koitharu.kotatsu.utils.ext.withDomain
 
 class ReadmangaRepository(loaderContext: MangaLoaderContext) : MangaRepository(loaderContext) {
 
@@ -63,7 +62,26 @@ class ReadmangaRepository(loaderContext: MangaLoaderContext) : MangaRepository(l
     }
 
     override suspend fun getDetails(manga: Manga): Manga {
-		TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
+        val doc = loaderContext.get(manga.url).parseHtml()
+        val root = doc.body().getElementById("mangaBox")
+        return manga.copy(
+            description = root.selectFirst("div.manga-description").firstChild()?.html()?.parseAsHtml(),
+            largeCoverUrl = root.selectFirst("div.subject-cower")?.selectFirst("img")?.attr(
+                "data-full"
+            ),
+            chapters = root.selectFirst("div.chapters-link")?.selectFirst("table")
+                ?.select("a")?.asReversed()?.mapIndexedNotNull { i, a ->
+                val href =
+                    a.attr("href")?.withDomain("readmanga.me") ?: return@mapIndexedNotNull null
+                MangaChapter(
+                    id = href.longHashCode(),
+                    name = a.ownText(),
+                    number = i + 1,
+                    url = href,
+                    source = MangaSource.READMANGA_RU
+                )
+            }
+        )
     }
 
     override suspend fun getPages(chapter: MangaChapter): List<MangaPage> {

app/src/main/java/org/koitharu/kotatsu/ui/common/ChipsFactory.kt

@@ -0,0 +1,29 @@
+package org.koitharu.kotatsu.ui.common
+
+import android.content.Context
+import android.graphics.drawable.Drawable
+import android.view.View
+import androidx.annotation.DrawableRes
+import com.google.android.material.chip.Chip
+import com.google.android.material.shape.CornerFamily
+import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.utils.ext.getThemeColor
+
+class ChipsFactory(private val context: Context) {
+
+	fun create(convertView: Chip? = null, text: CharSequence, @DrawableRes iconRes: Int = 0, tag: Any? = null): Chip {
+		val chip = convertView ?: Chip(context).apply {
+			setTextColor(context.getThemeColor(android.R.attr.textColorPrimary))
+			isCloseIconVisible = false
+		}
+		chip.text = text
+		if (iconRes == 0) {
+			chip.isChipIconVisible = false
+		} else {
+			chip.isCheckedIconVisible = true
+			chip.setChipIconResource(iconRes)
+		}
+		chip.tag = tag
+		return chip
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/common/widgets/SquareLayout.kt

@@ -4,7 +4,7 @@ import android.content.Context
 import android.util.AttributeSet
 import android.widget.FrameLayout
 
-class RectFrameLayout @JvmOverloads constructor(
+class SquareLayout @JvmOverloads constructor(
 	context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
 ) : FrameLayout(context, attrs, defStyleAttr) {
 

app/src/main/java/org/koitharu/kotatsu/ui/main/details/ChapterHolder.kt

@@ -0,0 +1,15 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.view.ViewGroup
+import kotlinx.android.synthetic.main.item_chapter.*
+import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.core.model.MangaChapter
+import org.koitharu.kotatsu.ui.common.list.BaseViewHolder
+
+class ChapterHolder(parent: ViewGroup) : BaseViewHolder<MangaChapter>(parent, R.layout.item_chapter) {
+
+	override fun onBind(data: MangaChapter) {
+		textView_title.text = data.name
+		textView_number.text = data.number.toString()
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/ChaptersAdapter.kt

@@ -0,0 +1,14 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.view.ViewGroup
+import org.koitharu.kotatsu.core.model.MangaChapter
+import org.koitharu.kotatsu.ui.common.list.BaseRecyclerAdapter
+import org.koitharu.kotatsu.ui.common.list.BaseViewHolder
+
+class ChaptersAdapter(onItemClickListener: ((MangaChapter) -> Unit)?) :
+	BaseRecyclerAdapter<MangaChapter>(onItemClickListener) {
+
+	override fun onCreateViewHolder(parent: ViewGroup) = ChapterHolder(parent)
+
+	override fun onGetItemId(item: MangaChapter) = item.id
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/ChaptersFragment.kt

@@ -0,0 +1,40 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.os.Bundle
+import android.view.View
+import androidx.core.view.isVisible
+import androidx.recyclerview.widget.DividerItemDecoration
+import androidx.recyclerview.widget.RecyclerView
+import kotlinx.android.synthetic.main.fragment_chapters.*
+import moxy.ktx.moxyPresenter
+import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.core.model.Manga
+import org.koitharu.kotatsu.ui.common.BaseFragment
+
+class ChaptersFragment : BaseFragment(R.layout.fragment_chapters), MangaDetailsView {
+
+	private val presenter by moxyPresenter { (activity as MangaDetailsActivity).presenter }
+
+	private lateinit var adapter: ChaptersAdapter
+
+	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+		super.onViewCreated(view, savedInstanceState)
+		adapter = ChaptersAdapter {
+
+		}
+		recyclerView_chapters.addItemDecoration(DividerItemDecoration(view.context, RecyclerView.VERTICAL))
+		recyclerView_chapters.adapter = adapter
+	}
+
+	override fun onMangaUpdated(manga: Manga) {
+		adapter.replaceData(manga.chapters.orEmpty())
+	}
+
+	override fun onLoadingStateChanged(isLoading: Boolean) {
+		progressBar.isVisible = isLoading
+	}
+
+	override fun onError(e: Exception) {
+
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/MangaDetailsActivity.kt

@@ -0,0 +1,48 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.content.Context
+import android.content.Intent
+import android.os.Bundle
+import androidx.viewpager.widget.ViewPager
+import com.google.android.material.snackbar.Snackbar
+import com.google.android.material.tabs.TabLayout
+import kotlinx.android.synthetic.main.activity_details.*
+import moxy.ktx.moxyPresenter
+import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.core.model.Manga
+import org.koitharu.kotatsu.ui.common.BaseActivity
+import org.koitharu.kotatsu.utils.ext.getDisplayMessage
+
+class MangaDetailsActivity : BaseActivity(), MangaDetailsView {
+
+	val presenter by moxyPresenter(factory = ::MangaDetailsPresenter)
+
+	override fun onCreate(savedInstanceState: Bundle?) {
+		super.onCreate(savedInstanceState)
+		setContentView(R.layout.activity_details)
+		supportActionBar?.setDisplayHomeAsUpEnabled(true)
+		pager.adapter = MangaDetailsAdapter(resources, supportFragmentManager)
+		tabs.setupWithViewPager(pager)
+		intent?.getParcelableExtra<Manga>(EXTRA_MANGA)?.let {
+			presenter.loadDetails(it)
+		} ?: finish()
+	}
+
+	override fun onMangaUpdated(manga: Manga) {
+		title = manga.title
+	}
+
+	override fun onLoadingStateChanged(isLoading: Boolean) = Unit
+
+	override fun onError(e: Exception) {
+		Snackbar.make(pager, e.getDisplayMessage(resources), Snackbar.LENGTH_LONG).show()
+	}
+
+	companion object {
+
+		private const val EXTRA_MANGA = "manga"
+
+		fun newIntent(context: Context, manga: Manga) = Intent(context, MangaDetailsActivity::class.java)
+			.putExtra(EXTRA_MANGA, manga)
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/MangaDetailsAdapter.kt

@@ -0,0 +1,25 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.content.res.Resources
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentManager
+import androidx.fragment.app.FragmentPagerAdapter
+import androidx.viewpager2.adapter.FragmentStateAdapter
+import org.koitharu.kotatsu.R
+
+class MangaDetailsAdapter(private val resources: Resources, fm: FragmentManager) : FragmentPagerAdapter(fm, FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
+
+	override fun getCount() = 2
+
+	override fun getItem(position: Int): Fragment = when(position) {
+		0 -> MangaDetailsFragment()
+		1 -> ChaptersFragment()
+		else -> throw IndexOutOfBoundsException("No fragment for position $position")
+	}
+
+	override fun getPageTitle(position: Int): CharSequence? = when(position) {
+		0 -> resources.getString(R.string.details)
+		1 -> resources.getString(R.string.chapters)
+		else -> null
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/MangaDetailsFragment.kt

@@ -0,0 +1,43 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import android.os.Bundle
+import androidx.core.view.isVisible
+import coil.api.load
+import kotlinx.android.synthetic.main.fragment_details.*
+import moxy.ktx.moxyPresenter
+import org.koin.core.get
+import org.koitharu.kotatsu.R
+import org.koitharu.kotatsu.core.model.Manga
+import org.koitharu.kotatsu.ui.common.BaseFragment
+import org.koitharu.kotatsu.utils.ext.setChips
+
+class MangaDetailsFragment : BaseFragment(R.layout.fragment_details), MangaDetailsView {
+
+	private val presenter by moxyPresenter { (activity as MangaDetailsActivity).presenter }
+
+	override fun onActivityCreated(savedInstanceState: Bundle?) {
+		super.onActivityCreated(savedInstanceState)
+	}
+
+	override fun onMangaUpdated(manga: Manga) {
+		imageView_cover.load(manga.largeCoverUrl ?: manga.coverUrl)
+		textView_title.text = manga.title
+		textView_subtitle.text = manga.localizedTitle
+		textView_description.text = manga.description
+		chips_tags.setChips(manga.tags) {
+			create(
+				text = it.title,
+				iconRes = R.drawable.ic_chip_tag,
+				tag = it
+			)
+		}
+	}
+
+	override fun onLoadingStateChanged(isLoading: Boolean) {
+		progressBar.isVisible = isLoading
+	}
+
+	override fun onError(e: Exception) {
+
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/MangaDetailsPresenter.kt

@@ -0,0 +1,40 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import moxy.InjectViewState
+import org.koitharu.kotatsu.BuildConfig
+import org.koitharu.kotatsu.core.model.Manga
+import org.koitharu.kotatsu.domain.MangaProviderFactory
+import org.koitharu.kotatsu.ui.common.BasePresenter
+
+@InjectViewState
+class MangaDetailsPresenter : BasePresenter<MangaDetailsView>() {
+
+	private var isLoaded = false
+
+	fun loadDetails(manga: Manga) {
+		if (isLoaded) {
+			return
+		}
+		viewState.onMangaUpdated(manga)
+		launch {
+			try {
+				viewState.onLoadingStateChanged(true)
+				val details = withContext(Dispatchers.IO) {
+					MangaProviderFactory.create(manga.source).getDetails(manga)
+				}
+				viewState.onMangaUpdated(details)
+				isLoaded = true
+			} catch (e: Exception) {
+				if (BuildConfig.DEBUG) {
+					e.printStackTrace()
+				}
+				viewState.onError(e)
+			} finally {
+				viewState.onLoadingStateChanged(false)
+			}
+		}
+	}
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/details/MangaDetailsView.kt

@@ -0,0 +1,19 @@
+package org.koitharu.kotatsu.ui.main.details
+
+import moxy.MvpView
+import moxy.viewstate.strategy.AddToEndSingleStrategy
+import moxy.viewstate.strategy.OneExecutionStateStrategy
+import moxy.viewstate.strategy.StateStrategyType
+import org.koitharu.kotatsu.core.model.Manga
+
+interface MangaDetailsView : MvpView {
+
+	@StateStrategyType(AddToEndSingleStrategy::class)
+	fun onMangaUpdated(manga: Manga)
+
+	@StateStrategyType(AddToEndSingleStrategy::class)
+	fun onLoadingStateChanged(isLoading: Boolean)
+
+	@StateStrategyType(OneExecutionStateStrategy::class)
+	fun onError(e: Exception)
+}

app/src/main/java/org/koitharu/kotatsu/ui/main/list/MangaListFragment.kt

@@ -14,6 +14,7 @@ import org.koitharu.kotatsu.core.model.MangaSource
 import org.koitharu.kotatsu.ui.common.BaseFragment
 import org.koitharu.kotatsu.ui.common.list.PaginationScrollListener
 import org.koitharu.kotatsu.ui.common.list.SpacingItemDecoration
+import org.koitharu.kotatsu.ui.main.details.MangaDetailsActivity
 import org.koitharu.kotatsu.utils.ext.getDisplayMessage
 import org.koitharu.kotatsu.utils.ext.hasItems
 import org.koitharu.kotatsu.utils.ext.withArgs
@@ -30,7 +31,7 @@ class MangaListFragment : BaseFragment(R.layout.fragment_list), MangaListView,
 	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
 		super.onViewCreated(view, savedInstanceState)
 		adapter = MangaListAdapter {
-
+			startActivity(MangaDetailsActivity.newIntent(context ?: return@MangaListAdapter, it))
 		}
 //		recyclerView.addItemDecoration(SpacingItemDecoration(resources.getDimensionPixelOffset(R.dimen.grid_spacing)))
 		recyclerView.addItemDecoration(DividerItemDecoration(view.context, RecyclerView.VERTICAL))

app/src/main/java/org/koitharu/kotatsu/utils/ext/JsoupExt.kt

@@ -4,6 +4,7 @@ import okhttp3.Response
 import okhttp3.internal.closeQuietly
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Document
+import org.jsoup.nodes.Element
 
 fun Response.parseHtml(): Document {
 	val stream = body?.byteStream() ?: throw NullPointerException("Response body is null")
@@ -16,3 +17,5 @@ fun Response.parseHtml(): Document {
 	closeQuietly()
 	return doc
 }
+
+fun Element.firstChild(): Element? = children().first()

app/src/main/java/org/koitharu/kotatsu/utils/ext/StringExt.kt

@@ -9,7 +9,15 @@ fun String.longHashCode(): Long {
 	return h
 }
 
-fun String.withDomain(domain: String) = when {
+fun String.withDomain(domain: String, ssl: Boolean = true) = when {
-	this.startsWith("/") -> "http://$domain"
+	this.startsWith("/") -> buildString {
+		append("http")
+		if (ssl) {
+			append('s')
+		}
+		append("://")
+		append(domain)
+		append(this@withDomain)
+	}
 	else -> this
 }

app/src/main/java/org/koitharu/kotatsu/utils/ext/ViewExt.kt

@@ -13,6 +13,9 @@ import androidx.core.view.isGone
 import androidx.core.view.isVisible
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
+import com.google.android.material.chip.Chip
+import com.google.android.material.chip.ChipGroup
+import org.koitharu.kotatsu.ui.common.ChipsFactory
 
 fun View.hideKeyboard() {
 	val imm = context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
@@ -62,3 +65,12 @@ var TextView.textAndVisible: CharSequence?
 		text = value
 		isGone = value.isNullOrEmpty()
 	}
+
+fun <T> ChipGroup.setChips(data: Iterable<T>, action: ChipsFactory.(T) -> Chip) {
+	removeAllViews()
+	val factory = ChipsFactory(context)
+	data.forEach {
+		val chip = factory.action(it)
+		addView(chip)
+	}
+}

app/src/main/res/drawable/bg_round_rect.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">
+	<corners android:radius="5dp" />
+	<solid android:color="?android:textColorTertiary" />
+	<padding
+		android:bottom="2dp"
+		android:left="2dp"
+		android:right="2dp"
+		android:top="2dp" />
+</shape>

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+	android:width="12dp"
+	android:height="12dp"
+	android:tint="?android:textColorPrimary"
+	android:viewportWidth="24"
+	android:viewportHeight="24">
+	<path
+		android:fillColor="#000"
+		android:pathData="M21.41 11.58L12.41 2.58A2 2 0 0 0 11 2H4A2 2 0 0 0 2 4V11A2 2 0 0 0 2.59 12.42L11.59 21.42A2 2 0 0 0 13 22A2 2 0 0 0 14.41 21.41L21.41 14.41A2 2 0 0 0 22 13A2 2 0 0 0 21.41 11.58M13 20L4 11V4H11L20 13M6.5 5A1.5 1.5 0 1 1 5 6.5A1.5 1.5 0 0 1 6.5 5Z" />
+</vector>

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

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+	android:width="24dp"
+	android:height="24dp"
+	android:tint="?attr/colorControlNormal"
+	android:viewportWidth="24"
+	android:viewportHeight="24">
+	<path
+		android:fillColor="#000"
+		android:pathData="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
+</vector>

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

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
+	android:layout_width="match_parent"
+	android:layout_height="match_parent"
+	tools:context=".ui.main.details.MangaDetailsActivity">
+
+	<com.google.android.material.appbar.AppBarLayout
+		android:layout_width="match_parent"
+		android:layout_height="wrap_content">
+
+		<androidx.appcompat.widget.Toolbar
+			android:id="@id/toolbar"
+			android:layout_width="match_parent"
+			android:layout_height="wrap_content"
+			android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
+			app:layout_scrollFlags="scroll|enterAlways"
+			app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />
+
+		<com.google.android.material.tabs.TabLayout
+			android:id="@+id/tabs"
+			android:layout_width="match_parent"
+			android:layout_height="wrap_content"
+			app:tabMode="scrollable" />
+
+	</com.google.android.material.appbar.AppBarLayout>
+
+	<androidx.viewpager.widget.ViewPager
+		android:id="@+id/pager"
+		android:layout_width="match_parent"
+		android:layout_height="match_parent"
+		app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout 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"
+	android:layout_width="match_parent"
+	android:layout_height="match_parent">
+
+	<androidx.recyclerview.widget.RecyclerView
+		android:id="@+id/recyclerView_chapters"
+		android:layout_width="match_parent"
+		android:layout_height="match_parent"
+		android:orientation="vertical"
+		android:scrollbars="vertical"
+		app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+		tools:listitem="@layout/item_chapter" />
+
+	<ProgressBar
+		android:id="@+id/progressBar"
+		style="@style/Widget.AppCompat.ProgressBar"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_gravity="center"
+		android:visibility="gone"
+		tools:visibility="visible" />
+
+</FrameLayout>

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

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.core.widget.NestedScrollView 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"
+	android:layout_width="match_parent"
+	android:layout_height="wrap_content">
+
+	<androidx.constraintlayout.widget.ConstraintLayout
+		android:layout_width="match_parent"
+		android:layout_height="wrap_content">
+
+		<ImageView
+			android:id="@+id/imageView_cover"
+			android:layout_width="0dp"
+			android:layout_height="0dp"
+			android:layout_marginStart="8dp"
+			android:layout_marginTop="8dp"
+			app:layout_constraintDimensionRatio="13:18"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toTopOf="parent"
+			app:layout_constraintWidth_percent="0.3" />
+
+		<TextView
+			android:id="@+id/textView_title"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginStart="8dp"
+			android:layout_marginTop="8dp"
+			android:layout_marginEnd="8dp"
+			android:textAppearance="@style/TextAppearance.AppCompat.Body2"
+			android:textColor="?android:textColorPrimary"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toEndOf="@id/imageView_cover"
+			app:layout_constraintTop_toTopOf="parent"
+			tools:text="@tools:sample/lorem" />
+
+		<TextView
+			android:id="@+id/textView_subtitle"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginStart="8dp"
+			android:layout_marginTop="8dp"
+			android:layout_marginEnd="8dp"
+			android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+			android:textColor="?android:textColorSecondary"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toEndOf="@id/imageView_cover"
+			app:layout_constraintTop_toBottomOf="@id/textView_title"
+			tools:text="@tools:sample/lorem" />
+
+		<androidx.constraintlayout.widget.Barrier
+			android:id="@+id/barrier_title"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			app:barrierDirection="bottom"
+			app:constraint_referenced_ids="imageView_cover, textView_subtitle" />
+
+		<com.google.android.material.chip.ChipGroup
+			android:id="@+id/chips_tags"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginTop="4dp"
+			android:padding="6dp"
+			app:lineSpacing="2dp"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/barrier_title" />
+
+		<TextView
+			android:id="@+id/textView_description"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:justificationMode="inter_word"
+			android:padding="12dp"
+			android:lineSpacingMultiplier="1.2"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/chips_tags"
+			tools:text="@tools:sample/lorem/random" />
+
+		<ProgressBar
+			android:id="@+id/progressBar"
+			style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:indeterminate="true"
+			android:visibility="gone"
+			app:layout_constraintBottom_toBottomOf="@id/chips_tags"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/chips_tags"
+			tools:visibility="visible" />
+
+	</androidx.constraintlayout.widget.ConstraintLayout>
+
+</androidx.core.widget.NestedScrollView>

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

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+	xmlns:tools="http://schemas.android.com/tools"
+	android:layout_width="match_parent"
+	android:layout_height="@dimen/chapter_list_item_height"
+	android:background="?selectableItemBackground"
+	android:gravity="center_vertical"
+	android:orientation="horizontal"
+	android:paddingStart="12dp"
+	android:paddingEnd="12dp">
+
+	<TextView
+		android:id="@+id/textView_number"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:background="@drawable/bg_round_rect"
+		android:gravity="center"
+		android:minWidth="26dp"
+		android:textColor="?android:textColorSecondaryInverse"
+		tools:text="13" />
+
+	<TextView
+		android:id="@+id/textView_title"
+		android:layout_width="match_parent"
+		android:layout_height="wrap_content"
+		android:layout_marginStart="10dp"
+		android:ellipsize="end"
+		android:maxLines="2"
+		android:text="?android:textColorPrimary"
+		android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+		tools:text="@tools:sample/lorem[15]" />
+
+</LinearLayout>

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 	android:layout_width="match_parent"
-	android:layout_height="@dimen/list_item_height"
+	android:layout_height="@dimen/manga_list_item_height"
 	android:background="?selectableItemBackground"
 	android:orientation="horizontal">
 

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

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 	<dimen name="grid_spacing">5dp</dimen>
-    <dimen name="list_item_height">84dp</dimen>
+    <dimen name="manga_list_item_height">84dp</dimen>
+    <dimen name="chapter_list_item_height">46dp</dimen>
 </resources>

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

@@ -7,4 +7,6 @@
 	<string name="history">History</string>
     <string name="error_occurred">An error has occurred</string>
 	<string name="network_error">Network connection error</string>
+	<string name="details">Details</string>
+	<string name="chapters">Chapters</string>
 </resources>

settings.gradle

@@ -1,2 +1,2 @@
 include ':app'
-rootProject.name = "OpenManga Next"
+rootProject.name = "Kotatsu"