From 08bf1a2336c691dfeda33dd2372b1ba4b9fe29fa Mon Sep 17 00:00:00 2001
From: TwistedUmbrellaX <twistedumbrella@gmail.com>
Date: Fri, 22 Mar 2024 16:45:47 -0400
Subject: [PATCH] chore: eliminate overlap layouts

---
 .../ani/dantotsu/home/AnimePageAdapter.kt     |  61 +++++-----
 .../ani/dantotsu/home/MangaPageAdapter.kt     |  55 ++++-----
 app/src/main/res/layout/item_anime_page.xml   | 100 +----------------
 app/src/main/res/layout/item_manga_page.xml   | 103 +----------------
 app/src/main/res/layout/layout_trending.xml   | 105 ++++++++++++++++++
 5 files changed, 168 insertions(+), 256 deletions(-)
 create mode 100644 app/src/main/res/layout/layout_trending.xml

diff --git a/app/src/main/java/ani/dantotsu/home/AnimePageAdapter.kt b/app/src/main/java/ani/dantotsu/home/AnimePageAdapter.kt
index 59d401c8..43c7db04 100644
--- a/app/src/main/java/ani/dantotsu/home/AnimePageAdapter.kt
+++ b/app/src/main/java/ani/dantotsu/home/AnimePageAdapter.kt
@@ -22,6 +22,7 @@ import ani.dantotsu.R
 import ani.dantotsu.connections.anilist.Anilist
 import ani.dantotsu.currContext
 import ani.dantotsu.databinding.ItemAnimePageBinding
+import ani.dantotsu.databinding.LayoutTrendingBinding
 import ani.dantotsu.loadImage
 import ani.dantotsu.media.CalendarActivity
 import ani.dantotsu.media.GenreActivity
@@ -42,6 +43,7 @@ import com.google.android.material.textfield.TextInputLayout
 class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHolder>() {
     val ready = MutableLiveData(false)
     lateinit var binding: ItemAnimePageBinding
+    private lateinit var trendingBinding: LayoutTrendingBinding
     private var trendHandler: Handler? = null
     private lateinit var trendRun: Runnable
     var trendingViewPager: ViewPager2? = null
@@ -54,14 +56,15 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
 
     override fun onBindViewHolder(holder: AnimePageViewHolder, position: Int) {
         binding = holder.binding
-        trendingViewPager = binding.animeTrendingViewPager
+        trendingBinding = LayoutTrendingBinding.bind(binding.root)
+        trendingViewPager = trendingBinding.trendingViewPager
 
-        val textInputLayout = holder.itemView.findViewById<TextInputLayout>(R.id.animeSearchBar)
+        val textInputLayout = holder.itemView.findViewById<TextInputLayout>(R.id.searchBar)
         val currentColor = textInputLayout.boxBackgroundColor
         val semiTransparentColor = (currentColor and 0x00FFFFFF) or 0xA8000000.toInt()
         textInputLayout.boxBackgroundColor = semiTransparentColor
         val materialCardView =
-            holder.itemView.findViewById<MaterialCardView>(R.id.animeUserAvatarContainer)
+            holder.itemView.findViewById<MaterialCardView>(R.id.userAvatarContainer)
         materialCardView.setCardBackgroundColor(semiTransparentColor)
         val typedValue = TypedValue()
         currContext()?.theme?.resolveAttribute(android.R.attr.windowBackground, typedValue, true)
@@ -70,33 +73,29 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
         textInputLayout.boxBackgroundColor = (color and 0x00FFFFFF) or 0x28000000
         materialCardView.setCardBackgroundColor((color and 0x00FFFFFF) or 0x28000000)
 
-        binding.animeTitleContainer.updatePadding(top = statusBarHeight)
+        trendingBinding.titleContainer.updatePadding(top = statusBarHeight)
 
-        if (PrefManager.getVal(PrefName.SmallView)) binding.animeTrendingContainer.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+        if (PrefManager.getVal(PrefName.SmallView)) trendingBinding.trendingContainer.updateLayoutParams<ViewGroup.MarginLayoutParams> {
             bottomMargin = (-108f).px
         }
 
         updateAvatar()
 
-        binding.animeSearchBar.hint = "ANIME"
-        binding.animeSearchBarText.setOnClickListener {
+        trendingBinding.searchBar.hint = "ANIME"
+        trendingBinding.searchBarText.setOnClickListener {
             ContextCompat.startActivity(
                 it.context,
-                Intent(it.context, SearchActivity::class.java).putExtra("type", "ANIME"),
+                Intent(it.context, SearchActivity::class.java).putExtra("type", "MANGA"),
                 null
             )
         }
 
-        binding.animeSearchBar.setEndIconOnClickListener {
-            binding.animeSearchBarText.performClick()
-        }
-
-        binding.animeUserAvatar.setSafeOnClickListener {
+        trendingBinding.userAvatar.setSafeOnClickListener {
             val dialogFragment =
                 SettingsDialogFragment.newInstance(SettingsDialogFragment.Companion.PageType.ANIME)
             dialogFragment.show((it.context as AppCompatActivity).supportFragmentManager, "dialog")
         }
-        binding.animeUserAvatar.setOnLongClickListener { view ->
+        trendingBinding.userAvatar.setOnLongClickListener { view ->
             ContextCompat.startActivity(
                 view.context,
                 Intent(view.context, ProfileActivity::class.java)
@@ -105,8 +104,12 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
             false
         }
 
-        binding.animeNotificationCount.visibility = if (Anilist.unreadNotificationCount > 0) View.VISIBLE else View.GONE
-        binding.animeNotificationCount.text = Anilist.unreadNotificationCount.toString()
+        trendingBinding.searchBar.setEndIconOnClickListener {
+            trendingBinding.searchBar.performClick()
+        }
+
+        trendingBinding.notificationCount.visibility = if (Anilist.unreadNotificationCount > 0) View.VISIBLE else View.GONE
+        trendingBinding.notificationCount.text = Anilist.unreadNotificationCount.toString()
 
         listOf(
             binding.animePreviousSeason,
@@ -159,17 +162,17 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
     }
 
     fun updateTrending(adaptor: MediaAdaptor) {
-        binding.animeTrendingProgressBar.visibility = View.GONE
-        binding.animeTrendingViewPager.adapter = adaptor
-        binding.animeTrendingViewPager.offscreenPageLimit = 3
-        binding.animeTrendingViewPager.getChildAt(0).overScrollMode = RecyclerView.OVER_SCROLL_NEVER
-        binding.animeTrendingViewPager.setPageTransformer(MediaPageTransformer())
+        trendingBinding.trendingProgressBar.visibility = View.GONE
+        trendingBinding.trendingViewPager.adapter = adaptor
+        trendingBinding.trendingViewPager.offscreenPageLimit = 3
+        trendingBinding.trendingViewPager.getChildAt(0).overScrollMode = RecyclerView.OVER_SCROLL_NEVER
+        trendingBinding.trendingViewPager.setPageTransformer(MediaPageTransformer())
 
         trendHandler = Handler(Looper.getMainLooper())
         trendRun = Runnable {
-            binding.animeTrendingViewPager.currentItem += 1
+            trendingBinding.trendingViewPager.currentItem += 1
         }
-        binding.animeTrendingViewPager.registerOnPageChangeCallback(
+        trendingBinding.trendingViewPager.registerOnPageChangeCallback(
             object : ViewPager2.OnPageChangeCallback() {
                 override fun onPageSelected(position: Int) {
                     super.onPageSelected(position)
@@ -179,9 +182,9 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
             }
         )
 
-        binding.animeTrendingViewPager.layoutAnimation =
+        trendingBinding.trendingViewPager.layoutAnimation =
             LayoutAnimationController(setSlideIn(), 0.25f)
-        binding.animeTitleContainer.startAnimation(setSlideUp())
+        trendingBinding.titleContainer.startAnimation(setSlideUp())
         binding.animeListContainer.layoutAnimation =
             LayoutAnimationController(setSlideIn(), 0.25f)
         binding.animeSeasonsCont.layoutAnimation =
@@ -209,16 +212,16 @@ class AnimePageAdapter : RecyclerView.Adapter<AnimePageAdapter.AnimePageViewHold
 
     fun updateAvatar() {
         if (Anilist.avatar != null && ready.value == true) {
-            binding.animeUserAvatar.loadImage(Anilist.avatar)
-            binding.animeUserAvatar.imageTintList = null
+            trendingBinding.userAvatar.loadImage(Anilist.avatar)
+            trendingBinding.userAvatar.imageTintList = null
         }
     }
 
     fun updateNotificationCount() {
         if (this::binding.isInitialized) {
-            binding.animeNotificationCount.visibility =
+            trendingBinding.notificationCount.visibility =
                 if (Anilist.unreadNotificationCount > 0) View.VISIBLE else View.GONE
-            binding.animeNotificationCount.text = Anilist.unreadNotificationCount.toString()
+            trendingBinding.notificationCount.text = Anilist.unreadNotificationCount.toString()
         }
     }
 
diff --git a/app/src/main/java/ani/dantotsu/home/MangaPageAdapter.kt b/app/src/main/java/ani/dantotsu/home/MangaPageAdapter.kt
index 1321d8bb..7ca0687f 100644
--- a/app/src/main/java/ani/dantotsu/home/MangaPageAdapter.kt
+++ b/app/src/main/java/ani/dantotsu/home/MangaPageAdapter.kt
@@ -22,6 +22,7 @@ import ani.dantotsu.R
 import ani.dantotsu.connections.anilist.Anilist
 import ani.dantotsu.currContext
 import ani.dantotsu.databinding.ItemMangaPageBinding
+import ani.dantotsu.databinding.LayoutTrendingBinding
 import ani.dantotsu.loadImage
 import ani.dantotsu.media.GenreActivity
 import ani.dantotsu.media.MediaAdaptor
@@ -41,6 +42,7 @@ import com.google.android.material.textfield.TextInputLayout
 class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHolder>() {
     val ready = MutableLiveData(false)
     lateinit var binding: ItemMangaPageBinding
+    private lateinit var trendingBinding: LayoutTrendingBinding
     private var trendHandler: Handler? = null
     private lateinit var trendRun: Runnable
     var trendingViewPager: ViewPager2? = null
@@ -53,14 +55,15 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
 
     override fun onBindViewHolder(holder: MangaPageViewHolder, position: Int) {
         binding = holder.binding
-        trendingViewPager = binding.mangaTrendingViewPager
+        trendingBinding = LayoutTrendingBinding.bind(binding.root)
+        trendingViewPager = trendingBinding.trendingViewPager
 
-        val textInputLayout = holder.itemView.findViewById<TextInputLayout>(R.id.mangaSearchBar)
+        val textInputLayout = holder.itemView.findViewById<TextInputLayout>(R.id.searchBar)
         val currentColor = textInputLayout.boxBackgroundColor
         val semiTransparentColor = (currentColor and 0x00FFFFFF) or 0xA8000000.toInt()
         textInputLayout.boxBackgroundColor = semiTransparentColor
         val materialCardView =
-            holder.itemView.findViewById<MaterialCardView>(R.id.mangaUserAvatarContainer)
+            holder.itemView.findViewById<MaterialCardView>(R.id.userAvatarContainer)
         materialCardView.setCardBackgroundColor(semiTransparentColor)
         val typedValue = TypedValue()
         currContext()?.theme?.resolveAttribute(android.R.attr.windowBackground, typedValue, true)
@@ -69,17 +72,17 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
         textInputLayout.boxBackgroundColor = (color and 0x00FFFFFF) or 0x28000000
         materialCardView.setCardBackgroundColor((color and 0x00FFFFFF) or 0x28000000)
 
-        binding.mangaTitleContainer.updatePadding(top = statusBarHeight)
+        trendingBinding.titleContainer.updatePadding(top = statusBarHeight)
 
-        if (PrefManager.getVal(PrefName.SmallView)) binding.mangaTrendingContainer.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+        if (PrefManager.getVal(PrefName.SmallView)) trendingBinding.trendingContainer.updateLayoutParams<ViewGroup.MarginLayoutParams> {
             bottomMargin = (-108f).px
         }
 
         updateAvatar()
-        binding.mangaNotificationCount.isVisible = Anilist.unreadNotificationCount > 0
-        binding.mangaNotificationCount.text = Anilist.unreadNotificationCount.toString()
-        binding.mangaSearchBar.hint = "MANGA"
-        binding.mangaSearchBarText.setOnClickListener {
+        trendingBinding.notificationCount.isVisible = Anilist.unreadNotificationCount > 0
+        trendingBinding.notificationCount.text = Anilist.unreadNotificationCount.toString()
+        trendingBinding.searchBar.hint = "MANGA"
+        trendingBinding.searchBarText.setOnClickListener {
             ContextCompat.startActivity(
                 it.context,
                 Intent(it.context, SearchActivity::class.java).putExtra("type", "MANGA"),
@@ -87,12 +90,12 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
             )
         }
 
-        binding.mangaUserAvatar.setSafeOnClickListener {
+        trendingBinding.userAvatar.setSafeOnClickListener {
             val dialogFragment =
                 SettingsDialogFragment.newInstance(SettingsDialogFragment.Companion.PageType.MANGA)
             dialogFragment.show((it.context as AppCompatActivity).supportFragmentManager, "dialog")
         }
-        binding.mangaUserAvatar.setOnLongClickListener { view ->
+        trendingBinding.userAvatar.setOnLongClickListener { view ->
             ContextCompat.startActivity(
                 view.context,
                 Intent(view.context, ProfileActivity::class.java)
@@ -101,8 +104,8 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
             false
         }
 
-        binding.mangaSearchBar.setEndIconOnClickListener {
-            binding.mangaSearchBarText.performClick()
+        trendingBinding.searchBar.setEndIconOnClickListener {
+            trendingBinding.searchBarText.performClick()
         }
 
         binding.mangaGenreImage.loadImage("https://s4.anilist.co/file/anilistcdn/media/manga/banner/105778-wk5qQ7zAaTGl.jpg")
@@ -148,16 +151,16 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
     }
 
     fun updateTrending(adaptor: MediaAdaptor) {
-        binding.mangaTrendingProgressBar.visibility = View.GONE
-        binding.mangaTrendingViewPager.adapter = adaptor
-        binding.mangaTrendingViewPager.offscreenPageLimit = 3
-        binding.mangaTrendingViewPager.getChildAt(0).overScrollMode = RecyclerView.OVER_SCROLL_NEVER
-        binding.mangaTrendingViewPager.setPageTransformer(MediaPageTransformer())
+        trendingBinding.trendingProgressBar.visibility = View.GONE
+        trendingBinding.trendingViewPager.adapter = adaptor
+        trendingBinding.trendingViewPager.offscreenPageLimit = 3
+        trendingBinding.trendingViewPager.getChildAt(0).overScrollMode = RecyclerView.OVER_SCROLL_NEVER
+        trendingBinding.trendingViewPager.setPageTransformer(MediaPageTransformer())
         trendHandler = Handler(Looper.getMainLooper())
         trendRun = Runnable {
-            binding.mangaTrendingViewPager.currentItem += 1
+            trendingBinding.trendingViewPager.currentItem += 1
         }
-        binding.mangaTrendingViewPager.registerOnPageChangeCallback(
+        trendingBinding.trendingViewPager.registerOnPageChangeCallback(
             object : ViewPager2.OnPageChangeCallback() {
                 override fun onPageSelected(position: Int) {
                     super.onPageSelected(position)
@@ -167,9 +170,9 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
             }
         )
 
-        binding.mangaTrendingViewPager.layoutAnimation =
+        trendingBinding.trendingViewPager.layoutAnimation =
             LayoutAnimationController(setSlideIn(), 0.25f)
-        binding.mangaTitleContainer.startAnimation(setSlideUp())
+        trendingBinding.titleContainer.startAnimation(setSlideUp())
         binding.mangaListContainer.layoutAnimation =
             LayoutAnimationController(setSlideIn(), 0.25f)
     }
@@ -195,16 +198,16 @@ class MangaPageAdapter : RecyclerView.Adapter<MangaPageAdapter.MangaPageViewHold
 
     fun updateAvatar() {
         if (Anilist.avatar != null && ready.value == true) {
-            binding.mangaUserAvatar.loadImage(Anilist.avatar)
-            binding.mangaUserAvatar.imageTintList = null
+            trendingBinding.userAvatar.loadImage(Anilist.avatar)
+            trendingBinding.userAvatar.imageTintList = null
         }
     }
 
     fun updateNotificationCount() {
         if (this::binding.isInitialized) {
-            binding.mangaNotificationCount.visibility =
+            trendingBinding.notificationCount.visibility =
                 if (Anilist.unreadNotificationCount > 0) View.VISIBLE else View.GONE
-            binding.mangaNotificationCount.text = Anilist.unreadNotificationCount.toString()
+            trendingBinding.notificationCount.text = Anilist.unreadNotificationCount.toString()
         }
     }
 
diff --git a/app/src/main/res/layout/item_anime_page.xml b/app/src/main/res/layout/item_anime_page.xml
index e4d77693..2cc202a0 100644
--- a/app/src/main/res/layout/item_anime_page.xml
+++ b/app/src/main/res/layout/item_anime_page.xml
@@ -9,105 +9,7 @@
     android:layout_marginEnd="-16dp"
     android:orientation="vertical">
 
-    <FrameLayout
-        android:id="@+id/animeTrendingContainer"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content">
-
-        <androidx.viewpager2.widget.ViewPager2
-            android:id="@+id/animeTrendingViewPager"
-            android:layout_width="match_parent"
-            android:layout_height="464dp" />
-
-        <LinearLayout
-            android:id="@+id/animeTitleContainer"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_margin="32dp"
-            android:orientation="horizontal"
-            android:baselineAligned="false">
-
-            <com.google.android.material.textfield.TextInputLayout
-                android:id="@+id/animeSearchBar"
-                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
-                android:layout_width="0dp"
-                android:layout_height="56dp"
-                android:layout_marginEnd="8dp"
-                android:layout_weight="1"
-                android:hint="@string/anime"
-                android:textColorHint="@color/bg_opp"
-                android:transitionName="@string/search"
-                app:boxBackgroundColor="?attr/colorPrimaryContainer"
-                app:boxCornerRadiusBottomEnd="28dp"
-                app:boxCornerRadiusBottomStart="28dp"
-                app:boxCornerRadiusTopEnd="28dp"
-                app:boxCornerRadiusTopStart="28dp"
-                app:boxStrokeColor="@color/text_input_layout_stroke_color"
-                app:endIconDrawable="@drawable/ic_round_search_24"
-                app:endIconTint="@color/bg_opp"
-                app:hintAnimationEnabled="true">
-
-                <AutoCompleteTextView
-                    android:id="@+id/animeSearchBarText"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:focusable="false"
-                    android:fontFamily="@font/poppins_bold"
-                    android:inputType="none"
-                    android:padding="8dp"
-                    android:textSize="14sp"
-                    tools:ignore="LabelFor,TextContrastCheck" />
-            </com.google.android.material.textfield.TextInputLayout>
-
-            <FrameLayout
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content">
-
-                <com.google.android.material.card.MaterialCardView
-                    android:id="@+id/animeUserAvatarContainer"
-                    android:layout_width="52dp"
-                    android:layout_height="52dp"
-                    android:layout_marginTop="4dp"
-                    android:backgroundTint="@color/nav_bg_inv"
-                    app:cardCornerRadius="26dp">
-
-                    <com.google.android.material.imageview.ShapeableImageView
-                        android:id="@+id/animeUserAvatar"
-                        android:layout_width="52dp"
-                        android:layout_height="52dp"
-                        android:scaleType="center"
-                        app:srcCompat="@drawable/ic_round_settings_24"
-                        tools:ignore="ContentDescription,ImageContrastCheck" />
-
-                </com.google.android.material.card.MaterialCardView>
-
-                <TextView
-                    android:id="@+id/animeNotificationCount"
-                    android:layout_width="18dp"
-                    android:layout_height="18dp"
-                    android:layout_gravity="end|bottom"
-                    android:background="@drawable/notification_circle"
-                    android:fontFamily="@font/poppins_semi_bold"
-                    android:gravity="center"
-                    android:textColor="#F3F3F3"
-                    android:textSize="12sp"
-                    android:visibility="gone"
-                    tools:ignore="SmallSp"
-                    tools:text="1"
-                    tools:visibility="visible" />
-            </FrameLayout>
-        </LinearLayout>
-
-        <ProgressBar
-            android:id="@+id/animeTrendingProgressBar"
-            style="?android:attr/progressBarStyle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:layout_marginTop="64dp" />
-
-    </FrameLayout>
+    <include layout="@layout/layout_trending" />
 
     <HorizontalScrollView
         android:id="@+id/animeSeasons"
diff --git a/app/src/main/res/layout/item_manga_page.xml b/app/src/main/res/layout/item_manga_page.xml
index 7dc9d6ae..e881f421 100644
--- a/app/src/main/res/layout/item_manga_page.xml
+++ b/app/src/main/res/layout/item_manga_page.xml
@@ -9,108 +9,7 @@
     android:layout_marginEnd="-16dp"
     android:orientation="vertical">
 
-    <FrameLayout
-        android:id="@+id/mangaTrendingContainer"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="16dp">
-
-        <androidx.viewpager2.widget.ViewPager2
-            android:id="@+id/mangaTrendingViewPager"
-            android:layout_width="match_parent"
-            android:layout_height="464dp" />
-
-        <LinearLayout
-            android:id="@+id/mangaTitleContainer"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_margin="32dp"
-            android:orientation="horizontal"
-            android:baselineAligned="false">
-
-            <com.google.android.material.textfield.TextInputLayout
-                android:id="@+id/mangaSearchBar"
-                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
-                android:layout_width="0dp"
-                android:layout_height="56dp"
-                android:layout_marginEnd="8dp"
-                android:layout_weight="1"
-                android:hint="@string/manga"
-                android:textColorHint="@color/bg_opp"
-                android:transitionName="@string/search"
-                app:boxBackgroundColor="?attr/colorPrimaryContainer"
-                app:boxCornerRadiusBottomEnd="28dp"
-                app:boxCornerRadiusBottomStart="28dp"
-                app:boxCornerRadiusTopEnd="28dp"
-                app:boxCornerRadiusTopStart="28dp"
-                app:boxStrokeColor="@color/text_input_layout_stroke_color"
-                app:endIconDrawable="@drawable/ic_round_search_24"
-                app:endIconTint="@color/bg_opp"
-                app:hintAnimationEnabled="true">
-
-                <AutoCompleteTextView
-                    android:id="@+id/mangaSearchBarText"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:focusable="false"
-                    android:fontFamily="@font/poppins_bold"
-                    android:inputType="none"
-                    android:padding="8dp"
-                    android:textColor="?android:attr/textColorSecondary"
-                    android:textSize="14sp"
-                    tools:ignore="LabelFor,TextContrastCheck" />
-            </com.google.android.material.textfield.TextInputLayout>
-
-            <FrameLayout
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content">
-
-                <com.google.android.material.card.MaterialCardView
-                    android:id="@+id/mangaUserAvatarContainer"
-                    android:layout_width="52dp"
-                    android:layout_height="52dp"
-                    android:layout_marginTop="4dp"
-                    android:backgroundTint="@color/nav_bg_inv"
-                    app:cardCornerRadius="26dp">
-
-                    <com.google.android.material.imageview.ShapeableImageView
-                        android:id="@+id/mangaUserAvatar"
-                        android:layout_width="52dp"
-                        android:layout_height="52dp"
-                        android:scaleType="center"
-                        app:srcCompat="@drawable/ic_round_settings_24"
-                        tools:ignore="ContentDescription,ImageContrastCheck" />
-
-                </com.google.android.material.card.MaterialCardView>
-
-                <TextView
-                    android:id="@+id/mangaNotificationCount"
-                    android:layout_width="18dp"
-                    android:layout_height="18dp"
-                    android:layout_gravity="end|bottom"
-                    android:background="@drawable/notification_circle"
-                    android:fontFamily="@font/poppins_semi_bold"
-                    android:gravity="center"
-                    android:textColor="#F3F3F3"
-                    android:textSize="12sp"
-                    android:visibility="gone"
-                    tools:ignore="SmallSp"
-                    tools:text="1"
-                    tools:visibility="visible" />
-            </FrameLayout>
-
-        </LinearLayout>
-
-        <ProgressBar
-            android:id="@+id/mangaTrendingProgressBar"
-            style="?android:attr/progressBarStyle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:layout_marginTop="64dp" />
-
-    </FrameLayout>
+    <include layout="@layout/layout_trending" />
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/mangaListContainer"
diff --git a/app/src/main/res/layout/layout_trending.xml b/app/src/main/res/layout/layout_trending.xml
new file mode 100644
index 00000000..592014b6
--- /dev/null
+++ b/app/src/main/res/layout/layout_trending.xml
@@ -0,0 +1,105 @@
+<merge 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">
+    <FrameLayout
+        android:id="@+id/trendingContainer"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp">
+
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/trendingViewPager"
+            android:layout_width="match_parent"
+            android:layout_height="464dp" />
+
+        <LinearLayout
+            android:id="@+id/titleContainer"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_margin="32dp"
+            android:orientation="horizontal"
+            android:baselineAligned="false">
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/searchBar"
+                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+                android:layout_width="0dp"
+                android:layout_height="56dp"
+                android:layout_marginEnd="8dp"
+                android:layout_weight="1"
+                android:textColorHint="@color/bg_opp"
+                android:transitionName="@string/search"
+                app:boxBackgroundColor="?attr/colorPrimaryContainer"
+                app:boxCornerRadiusBottomEnd="28dp"
+                app:boxCornerRadiusBottomStart="28dp"
+                app:boxCornerRadiusTopEnd="28dp"
+                app:boxCornerRadiusTopStart="28dp"
+                app:boxStrokeColor="@color/text_input_layout_stroke_color"
+                app:endIconDrawable="@drawable/ic_round_search_24"
+                app:endIconTint="@color/bg_opp"
+                app:hintAnimationEnabled="true">
+
+                <AutoCompleteTextView
+                    android:id="@+id/searchBarText"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    android:focusable="false"
+                    android:fontFamily="@font/poppins_bold"
+                    android:inputType="none"
+                    android:padding="8dp"
+                    android:textColor="?android:attr/textColorSecondary"
+                    android:textSize="14sp"
+                    tools:ignore="LabelFor,TextContrastCheck" />
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <FrameLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content">
+
+                <com.google.android.material.card.MaterialCardView
+                    android:id="@+id/userAvatarContainer"
+                    android:layout_width="52dp"
+                    android:layout_height="52dp"
+                    android:layout_marginTop="4dp"
+                    android:backgroundTint="@color/nav_bg_inv"
+                    app:cardCornerRadius="26dp">
+
+                    <com.google.android.material.imageview.ShapeableImageView
+                        android:id="@+id/userAvatar"
+                        android:layout_width="52dp"
+                        android:layout_height="52dp"
+                        android:scaleType="center"
+                        app:srcCompat="@drawable/ic_round_settings_24"
+                        tools:ignore="ContentDescription,ImageContrastCheck" />
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <TextView
+                    android:id="@+id/notificationCount"
+                    android:layout_width="18dp"
+                    android:layout_height="18dp"
+                    android:layout_gravity="end|bottom"
+                    android:background="@drawable/notification_circle"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:gravity="center"
+                    android:textColor="#F3F3F3"
+                    android:textSize="12sp"
+                    android:visibility="gone"
+                    tools:ignore="SmallSp"
+                    tools:text="1"
+                    tools:visibility="visible" />
+            </FrameLayout>
+
+        </LinearLayout>
+
+        <ProgressBar
+            android:id="@+id/trendingProgressBar"
+            style="?android:attr/progressBarStyle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:layout_marginTop="64dp" />
+
+    </FrameLayout>
+</merge>
\ No newline at end of file