https://developer.android.com/guide/navigation/navigation-swipe-view-2
Swipe views allow you to navigate between sibling screens, such as tabs, with a horizontal finger gesture, or swipe. This navigation pattern is also referred to as horizontal paging. This topic teaches you how to create a tab layout with swipe views for switching between tabs, along with how to show a title strip instead of tabs.
Note: If your app already uses ViewPager, see Migrate from ViewPager to ViewPager2.
You can create swipe views using AndroidX's ViewPager2 widget. To use ViewPager2 and tabs, you need to add a dependency on ViewPager2 and on Material Components to your project.
To set up your layout with ViewPager2, add the <ViewPager2> element to your XML layout. For example, if each page in the swipe view should consume the entire layout, then your layout should look like this:
<androidx.viewpager2.widget.ViewPager2
xmlns:android="<http://schemas.android.com/apk/res/android>"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
To insert child views that represent each page, you need to hook this layout to a FragmentStateAdapter. Here's how you might use it to swipe across a collection of Fragment objects:
class CollectionDemoFragment : Fragment() {
// When requested, this adapter returns a DemoObjectFragment,
// representing an object in the collection.
private lateinit var demoCollectionAdapter: DemoCollectionAdapter
private lateinit var viewPager: ViewPager2
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.collection_demo, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
demoCollectionAdapter = DemoCollectionAdapter(this)
viewPager = view.findViewById(R.id.pager)
viewPager.adapter = demoCollectionAdapter
}}class DemoCollectionAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
override fun getItemCount(): Int = 100
override fun createFragment(position: Int): Fragment {
// Return a NEW fragment instance in createFragment(int)
val fragment = DemoObjectFragment()
fragment.arguments = Bundle().apply {
// Our object is just an integer :-P
putInt(ARG_OBJECT, position + 1)
}
return fragment
}}private const val ARG_OBJECT = "object"// Instances of this class are fragments representing a single// object in our collection.class DemoObjectFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return inflater.inflate(R.layout.fragment_collection_object, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {
val textView: TextView = view.findViewById(android.R.id.text1)
textView.text = getInt(ARG_OBJECT).toString()
}
}}
The following sections show how you can add tabs to help facilitate navigation between pages.
A TabLayout provides a way to display tabs horizontally. When used together with a ViewPager2, a TabLayout can provide a familiar interface for navigating between pages in a swipe view.
Figure 1: A TabLayout with four tabs.
To include a TabLayout in a ViewPager2, add a <TabLayout> element above the <ViewPager2> element, as shown below:
<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" /></LinearLayout>
Next, create a TabLayoutMediator to link the TabLayout to the ViewPager2, and attach it as follows: