Skip to main content

Fragments ❤ ViewPager2


The ViewPager2 is a pretty nice rework of the ViewPager API. Some new features you may find with the ViewPager2 are:

1- Vertical scrolling. You can simply enable it by adding: android:orientation="vertical" in the <ViewPager2> tag in your xml file.
2- Right to left support: you can set the android:layoutDirection="rtl" to enable this.
3- Support for DiffUtil, because it is based on RecyclerView.
4 - Fragments improved support, which we will talk about below.

So, let's suppose that we have 2 Fragments: HomeFragment and SchoolFragment. In the Activity/Fragment xml file, which is going to hold these two sliding by switching with each-other, place the ViewPager2 tag:

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >"
Now, let's set up code in the MainActivity (in my case this is the name of the Activity):

class MainActivity : AppCompatActivity() {

    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        viewPager = findViewById(R.id.my_view_pager)
        val tabLayout = findViewById(R.id.tabs)
        val pagerAdapter = ScreenSlidePagerAdapter(this)
        viewPager.adapter = pagerAdapter
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            when (position) {
                0 -> tab.text = "Home"
                1 -> tab.text = "School"
            }
        }.attach() //this replaces the tabLayout.setupWithViewPager() from ViewPager API
    }

    override fun onBackPressed() {
        if (viewPager.currentItem == 0) {
            super.onBackPressed() //if I'm in the first Fragment just go back
        } else {
            viewPager.currentItem = viewPager.currentItem - 1 //just slide to the first Fragment
        }
    }

    private inner class ScreenSlidePagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
        override fun getItemCount(): Int = 2 //because I have two Fragments

        override fun createFragment(position: Int): Fragment = if (position == 0) {
            HomeFragment()
        } else {
            SchoolFragment()
        }
    }
}
Some things to spot here though.

1- Notice that you have the FragmentStateAdapter instead of FragmentStatePagerAdapter.

2- To associate TabLayout with the ViewPager there is no more tabLayout.setupWithViewPager(). Instead you should import com.google.android.material:material:1.1.0-beta01 or later version of the dependency. And than you can do:

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            when (position) {
                0 -> tab.text = "Home"
                1 -> tab.text = "School"
            }
        }.attach()

And that's it, now you have your shiny new ViewPager2 set up with Fragments.

Helpful resources:
Slide between Fragments using Viewpager2.
Turning the Page: Migrating to ViewPager2 (Android Dev Summit '19).

Stavro Xhardha

Popular posts from this blog

What I learned from Kotlin Flow API

I used to check the docs and just read a lot about flows but didn't implement anything until yesterday. However, the API tasted really cool (even though some operations are still in Experimental state).Prerequisites: If you don't know RxJava it's fine. But a RxJava recognizer would read this faster.Cold vs Hot streamsWell, I really struggled with this concept because it is a little bit tricky. The main difference between cold and hot happened to be pretty simple: Hot streams produce when you don't care while in cold streams, if you don't collect() (or RxJava-s equivalent subscribe()) the stream won't be activated at all. So, Flows are what we call cold streams. Removing the subscriber will not produce data at all, making the Flows one of the most sophisticated asynchronous stream API ever (in the JVM world). I tried to make a illustration of hot and cold streams: Since I mentioned the word asynchronous this implies that they do support coroutines also. Flows vs…

Modularizing your Android app, breaking the monolith (Part 1)

Inspired by a Martin Fowlers post about Micro Frontends, I decided to break my monolithic app into a modular app. I tried to read a little more about breaking monolithic apps in Android, and as far as I got, I felt confident to share my experience with you. This will be some series of blog posts where we actually try to break a simple app into a modularized Android app.

Note: You should know that I am no expert in this, so if there are false statements or mistakes please feel free to criticize, for the sake of a better development. 

What do you benefit from this approach:
Well, people are moving pretty fast nowadays and delivery is required faster and faster. So, in order to achieve this, modularising Android apps is really necessary.You can share features across different apps. Independent teams and less problems per each.Conditional features update.Quicker debugging and fixing.A feature delay doesn't delay the whole app. As per writing tests, there is not too much difference about…

From Gson to Moshi, what I learned

There is no doubt that people are getting away from GSON and I agree with those reasons too. The only advantage GSON has over other parsing libraries is that it takes a really short amount of time to set up. Furthermore, the most important thing is that Moshi is embracing Kotlin support.

First let's implement the dependency:
implementation("com.squareup.moshi:moshi:1.8.0") It's not a struggle to migrate to Moshi. It's really Gson look-a-like. The only thing to do is annotate the object with @field:Json instead of @SerializedName (which is Gsons way for JS representation):

data class User( //GSON way @SerializedName("name") val name: String, @SerializedName("user_name") val userName: String, @SerializedName("last_name") val lastName: String, @SerializedName("email") val email: String ) data class User( //Moshi way @field:Json(name = "name") val name: String, @field:Json(name = "user_name…