ViewPager2 Migration

app/src/main/java/dev/marcosfarias/pokedex/ui/dashboard/DashboardFragment.kt

@@ -9,11 +9,12 @@ import android.view.ViewGroup
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
-import dev.marcosfarias.pokedex.GlideApp
 import androidx.transition.TransitionInflater
-import com.bumptech.glide.Glide
+import com.google.android.material.tabs.TabLayoutMediator
+import dev.marcosfarias.pokedex.GlideApp
 import dev.marcosfarias.pokedex.R
 import dev.marcosfarias.pokedex.databinding.FragmentDashboardBinding
+import dev.marcosfarias.pokedex.model.Pokemon
 import dev.marcosfarias.pokedex.utils.ImageLoadingListener
 import dev.marcosfarias.pokedex.utils.PokemonColorUtil
 import org.koin.androidx.viewmodel.ext.android.viewModel
@@ -47,48 +48,57 @@ class DashboardFragment : Fragment() {
 
         dashboardViewBinding?.imageView?.transitionName = name
 
-        dashboardViewModel.getPokemonById(id).observe(viewLifecycleOwner, Observer { pokemonValue ->
-            pokemonValue?.let { pokemon ->
-                dashboardViewBinding?.textViewID?.text = pokemon.id
-                dashboardViewBinding?.textViewName?.text = pokemon.name
-
-                val color = PokemonColorUtil(view.context).getPokemonColor(pokemon.typeofpokemon)
-                dashboardViewBinding?.appBar?.setBackgroundColor(color)
-                dashboardViewBinding?.toolbarLayout?.contentScrim?.colorFilter =
-                    PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP)
-                activity?.window?.statusBarColor =
-                    PokemonColorUtil(view.context).getPokemonColor(pokemon.typeofpokemon)
-
-                pokemon.typeofpokemon?.getOrNull(0).let { firstType ->
-                    dashboardViewBinding?.textViewType3?.text = firstType
-                    dashboardViewBinding?.textViewType3?.isVisible = firstType != null
-                }
+        dashboardViewModel.getPokemonById(id).observe(
+            viewLifecycleOwner,
+            Observer { pokemonValue ->
+                pokemonValue?.let { pokemon ->
+                    dashboardViewBinding?.textViewID?.text = pokemon.id
+                    dashboardViewBinding?.textViewName?.text = pokemon.name
 
-                pokemon.typeofpokemon?.getOrNull(1).let { secondType ->
-                    dashboardViewBinding?.textViewType2?.text = secondType
-                    dashboardViewBinding?.textViewType2?.isVisible = secondType != null
-                }
+                    val color = PokemonColorUtil(view.context).getPokemonColor(pokemon.typeofpokemon)
+                    dashboardViewBinding?.appBar?.setBackgroundColor(color)
+                    dashboardViewBinding?.toolbarLayout?.contentScrim?.colorFilter =
+                        PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP)
+                    activity?.window?.statusBarColor =
+                        PokemonColorUtil(view.context).getPokemonColor(pokemon.typeofpokemon)
 
-                pokemon.typeofpokemon?.getOrNull(2).let { thirdType ->
-                    dashboardViewBinding?.textViewType1?.text = thirdType
-                    dashboardViewBinding?.textViewType1?.isVisible = thirdType != null
-                }
+                    pokemon.typeofpokemon?.getOrNull(0).let { firstType ->
+                        dashboardViewBinding?.textViewType3?.text = firstType
+                        dashboardViewBinding?.textViewType3?.isVisible = firstType != null
+                    }
 
-                dashboardViewBinding?.imageView?.let {
-                    GlideApp.with(view.context)
-                        .load(pokemon.imageurl)
-                        .listener(ImageLoadingListener {
-                            startPostponedEnterTransition()
-                        })
-                        .into(it)
+                    pokemon.typeofpokemon?.getOrNull(1).let { secondType ->
+                        dashboardViewBinding?.textViewType2?.text = secondType
+                        dashboardViewBinding?.textViewType2?.isVisible = secondType != null
+                    }
+
+                    pokemon.typeofpokemon?.getOrNull(2).let { thirdType ->
+                        dashboardViewBinding?.textViewType1?.text = thirdType
+                        dashboardViewBinding?.textViewType1?.isVisible = thirdType != null
+                    }
+
+                    dashboardViewBinding?.imageView?.let {
+                        GlideApp.with(view.context)
+                            .load(pokemon.imageurl)
+                            .listener(
+                                ImageLoadingListener {
+                                    startPostponedEnterTransition()
+                                }
+                            )
+                            .into(it)
+                    }
+                    setUpViewPagerAndTabLayout(pokemon)
                 }
-                val pager = dashboardViewBinding?.viewPager
-                val tabs = dashboardViewBinding?.tabs
-                pager?.adapter =
-                    ViewPagerAdapter(childFragmentManager, requireContext(), pokemon.id)
-                tabs?.setupWithViewPager(pager)
             }
-        })
+        )
+    }
+
+    private fun setUpViewPagerAndTabLayout(pokemon: Pokemon) = dashboardViewBinding?.let {
+        val adapter = ViewPagerAdapter(childFragmentManager, requireContext(), viewLifecycleOwner.lifecycle, pokemon.id)
+        it.viewPager.adapter = adapter
+        TabLayoutMediator(it.tabs, it.viewPager) { tab, position ->
+            tab.text = adapter.getPageTitle(position)
+        }.attach()
     }
 
     override fun onDestroyView() {

app/src/main/java/dev/marcosfarias/pokedex/ui/dashboard/ViewPagerAdapter.kt

@@ -3,7 +3,8 @@ package dev.marcosfarias.pokedex.ui.dashboard
 import android.content.Context
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
-import androidx.fragment.app.FragmentStatePagerAdapter
+import androidx.lifecycle.Lifecycle
+import androidx.viewpager2.adapter.FragmentStateAdapter
 import dev.marcosfarias.pokedex.R
 import dev.marcosfarias.pokedex.ui.dashboard.about.AboutFragment
 import dev.marcosfarias.pokedex.ui.dashboard.evolution.EvolutionFragment
@@ -13,8 +14,17 @@ import dev.marcosfarias.pokedex.ui.dashboard.stats.StatsFragment
 class ViewPagerAdapter(
     supportFragmentManager: FragmentManager,
     context: Context,
+    lifecycle: Lifecycle,
     private val pokemonId: String
-) : FragmentStatePagerAdapter(supportFragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
+) : FragmentStateAdapter(supportFragmentManager, lifecycle) {
+
+    override fun getItemCount(): Int {
+        return pages.size
+    }
+
+    override fun createFragment(position: Int): Fragment {
+        return pages[position].ctor()
+    }
 
     data class Page(val title: String, val ctor: () -> Fragment)
 
@@ -38,15 +48,7 @@ class ViewPagerAdapter(
         )
     )
 
-    override fun getItem(position: Int): Fragment {
-        return pages[position].ctor()
-    }
-
-    override fun getCount(): Int {
-        return pages.size
-    }
-
-    override fun getPageTitle(position: Int): CharSequence? {
+    fun getPageTitle(position: Int): CharSequence {
         return pages[position].title
     }
 }

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

@@ -175,7 +175,7 @@
         android:fillViewport="true"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
-        <androidx.viewpager.widget.ViewPager
+        <androidx.viewpager2.widget.ViewPager2
             android:id="@+id/viewPager"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"