When developing Android apps, a feature that allows users to swipe through multiple pages is very useful.
To facilitate this, Google provides a component called ViewPager2.
In this tutorial, we will implement a simple app using ViewPager2 and explain the basic concepts and code in detail.
1. What is ViewPager2?
ViewPager2 is a UI component that allows users to swipe through multiple pages.
The main features of ViewPager2 are as follows:
- Support for vertical and horizontal swiping
- Support for Fragment and RecyclerView
- Ability to set page transition effects
2. Setting up ViewPager2
To use ViewPager2, you need to add a dependency to your Gradle file.
Add the following line to your build.gradle file:
dependencies {
implementation "androidx.viewpager2:viewpager2:1.1.0"
}
Let’s write the XML layout file needed to use ViewPager2.
2.1. XML Layout
Below is an example of a basic layout that includes ViewPager2.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
3. Implementing ViewPager2 Adapter
ViewPager2 requires an adapter to display pages.
Below is a simple example of adapter implementation. This adapter uses custom Fragments to create each page.
3.1. Creating Fragment
First, create a Fragment class that represents each page.
class CustomFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_custom, container, false)
return view
}
}
3.2. Implementing Fragment Adapter
Next, implement the adapter by inheriting from FragmentStateAdapter.
class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
override fun getItemCount(): Int {
return 3 // Number of pages
}
override fun createFragment(position: Int): Fragment {
return CustomFragment() // Return a different Fragment for each page
}
}
4. Setting up MainActivity
Now, let’s connect ViewPager2 and the adapter in MainActivity.
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.viewPager)
viewPager.adapter = ViewPagerAdapter(this)
}
}
5. Configuring Fragment Layout
Now, let’s configure the layout to be used in each Fragment.
In this example, we will simply display text.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, ViewPager2!"
android:textSize="24sp"/>
</LinearLayout>
6. Adding Swipe Page Transition Effects
ViewPager2 applies swipe animations by default, but you can customize it to apply various page transition effects.
class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
// ... existing code ...
override fun createFragment(position: Int): Fragment {
// You can return a different Fragment based on position to vary page content
return when (position) {
0 -> FirstFragment()
1 -> SecondFragment()
else -> ThirdFragment()
}
}
}
Here, you can define your desired page transition effect and apply it using ViewPager2’s
setPageTransformer method.
viewPager.setPageTransformer { page, position ->
page.alpha = 0f
if (position >= -1 && position <= 1) { // [-1,1]
page.alpha = 1 - Math.abs(position)
}
}
7. Conclusion
In this tutorial, we learned how to configure multiple swipable pages using ViewPager2.
You can enhance user experience by utilizing various page transition effects.
You can develop a richer app by adding additional features or integrating with other UI components.
Enjoy the joy of Android development!