ViewPager2 in Android with Example

In the realm of Android app development, creating interactive and intuitive UI is crucial for an engaging user experience. One such tool in the Android developer's toolkit is the ViewPager2 widget. This article serves as a comprehensive guide on the implementation of ViewPager2 in Android, augmented with a hands-on example.

Introduction to ViewPager2

ViewPager2 is a significant improvement over the original ViewPager library. It offers more flexible orientation support, right-to-left (RTL) layout support, and a better swipe feature, making it a go-to choice for creating swipeable or scrollable user interfaces.

Setting up ViewPager2: A Step-by-Step Guide

Let's dive into the details of creating an Android application that implements ViewPager2 with Fragments

Step 1− Project Setup

CStart by creating a new Android Studio project. Choose an Empty Activity template and set the language to Java.

Step 2 − Adding Dependencies

Next, we need to include the ViewPager2 dependency in the build.gradle (Module) file

dependencies {
   implementation 'androidx.viewpager2:viewpager2:1.1.0-alpha01'
}

Don't forget to sync the project after adding the dependency

Step 3 − Creating Fragments

For this guide, we will create three Fragments (FirstFragment, SecondFragment, and ThirdFragment). Each Fragment will represent a unique page in our ViewPager.

Here is an example of creating FirstFragment −

public class FirstFragment extends Fragment {
   @Nullable
   @Override
   public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup
   container, @Nullable Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_first, container, false);
   }
}

Remember to create corresponding XML layout files for these Fragments

Step 4 − Creating the Adapter

The next step involves creating a FragmentStateAdapter. The adapter manages the fragments and supplies them to the ViewPager when needed.

public class ViewPagerAdapter extends FragmentStateAdapter {
   public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
      super(fragmentActivity);
   }
   @NonNull
   @Override
   public Fragment createFragment(int position) {
      switch (position) {
         case 0:
            return new FirstFragment();
         case 1:
            return new SecondFragment();
         case 2:
            return new ThirdFragment();
         }
         return new FirstFragment();
      }
      @Override
      public int getItemCount() {
         return 3;
   }
}

Step 5 − Implementing ViewPager in Activity

Lastly, in your MainActivity, initialize the ViewPager and set the adapter:

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ViewPager2 viewPager = findViewById(R.id.viewPager);
      viewPager.setAdapter(new ViewPagerAdapter(this));
   }
}

Ensure that you have a ViewPager2 in your activity_main.xml layout file:

<androidx.viewpager2.widget.ViewPager2
   android:id="@+id/viewPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

After implementing these steps, you should be able to swipe between different fragments, presenting new screens to the user

Enhancing the ViewPager2 Experience

The basic implementation of ViewPager2 is complete at this point. However, there are several additional features you can add to enhance user interaction and functionality

Adding Page Transformation

Page transformations provide visual effects that occur when users swipe between pages. ViewPager2 includes a setPageTransformer() method that allows for customizable animations during swipes. Here's a simple example of a depth page transformer

viewPager.setPageTransformer(new ViewPager2.PageTransformer() {
   @Override
   public void transformPage(@NonNull View page, float position) {
      final float MIN_SCALE = 0.75f;
     int pageWidth = page.getWidth();
   if (position < -1) {
         page.setAlpha(0f);
      } else if (position <= 0) {
         page.setAlpha(1f);
         page.setTranslationX(0f);
         page.setScaleX(1f);
         page.setScaleY(1f);
      } else if (position <= 1) {
         page.setAlpha(1 - position);
         page.setTranslationX(pageWidth * -position);
         float scaleFactor = MIN_SCALE
            + (1 - MIN_SCALE) * (1 - Math.abs(position));
         page.setScaleX(scaleFactor);
         page.setScaleY(scaleFactor);
      } else {
         page.setAlpha(0f);
      }
   }
});   

Incorporating TabLayout with ViewPager2

Pairing ViewPager2 with a TabLayout is a popular UI design. This provides a more visual and intuitive navigation experience. Link the TabLayout with the ViewPager2 in your MainActivity −

TabLayout tabLayout = findViewById(R.id.tab_layout);
TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
   tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy() {
      @Override
      public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
         tab.setText("Tab " + (position + 1));
      }
   });
tabLayoutMediator.attach();

Remember to add the TabLayout dependency to your build.gradle file −

implementation 'com.google.android.material:material:1.3.0'

Conclusion

The ViewPager2 widget, along with Fragments, offers a great way to create swipeable views in your Android applications. Its seamless browsing experience is key to modern Android app development. With the foundation provided by this guide, you can further customize and explore the functionalities of ViewPager2. The possibilities are endless – add animations, transitions, and modify its behavior to fit your application's needs.