Android ViewPager2 with TabLayout

Slide transition between screens is common in Android applications. We can use the navigation components or a swipe-able view to create this transition. A common swipe-able view is ViewPager2. The ViewPager library has been around for quite a while.

Introduction

This view allows the developer to display views or fragments to the user in a swipe-able format. This feature is common in content display applications and in app setups.

ViewPager2 is often integrated with TabLayout. A TabLayout indicates the current page and allows a user to switch through pages.

Prerequisites

To follow through with this tutorial, you will need to:

1. Have Android Studio installed.
2. Have a basic knowledge of building Android applications.
3. Have a basic understanding of Kotlin programming language.

Let’s get started!

1. First, let’s set up the necessary dependencies in your app-level build.gradle file:

implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.material:material:1.4.0'

2. Next, create a new layout file for your main activity (activity_main.xml). The layout will contain a TabLayout and a ViewPager2:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabTextColor="@color/tab_text_color"
            app:tabSelectedTextColor="@color/tab_selected_text_color"
            app:tabIndicatorColor="@color/tab_indicator_color" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. Create a new layout file for each of your blog fragments (fragment_blog.xml). Customize it to your needs:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Add your blog content views here -->

</LinearLayout>

4. Create a new class for your ViewPager adapter (BlogPagerAdapter.java):

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.List;

public class BlogPagerAdapter extends FragmentStateAdapter {
    private List<Fragment> fragments;

    public BlogPagerAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> fragments) {
        super(fragmentActivity);
        this.fragments = fragments;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

5. Finally, in your MainActivity, set up the TabLayout and ViewPager2:

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = findViewById(R.id.viewPager);
        tabLayout = findViewById(R.id.tabLayout);

        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new BlogFragment1());
        fragments.add(new BlogFragment2());
        fragments.add(new BlogFragment3());

        BlogPagerAdapter adapter = new BlogPagerAdapter(this, fragments);
        viewPager.setAdapter(adapter);

        new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
            // Customize the tab names as per your requirement
            switch (position) {
                case 0:
                    tab.setText("Blog 1");
                    break;
                case 1:
                    tab.setText("Blog 2");
                    break;
                case 2:
                    tab.setText("Blog 3");
                    break;
            }
        }).attach();
    }
}

That’s it! You can now create separate fragments (BlogFragment1, BlogFragment2, etc.) and customize them for each blog page.

Note: Make sure to replace the colors and other resources with your own preferences in the XML files. Also, remember to register the MainActivity in your AndroidManifest.xml file.

This is a basic example to get you started. You can further enhance it with additional features and customization based on your requirements.