overview
Swipe views allow us to navigate screens such as tabs, with horizontal finger gestures or swiping. This type of navigation is also known as horizontal pagination.
Setup
You can create swipe views using ViewPager2 in AndroidX. To use ViewPager2 and tabs, you need to add ViewPager2 in Material Component to your project. To set up your layout with ViewPager2, add the <ViewPager2> element to your XML layout. For example, if each page in swipe views is displayed entirely with the parent layout, your layout should look like this:
1 2 3 4 5 6 | <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 sub views for each page, you need to link this layout to the FragmentStateAdapter. Here’s how you can use it to swipe through Fragment objects:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 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 navigate between pages.
Add tabs with TabLayout
TabLayout provides a way to display tabs horizontally. When used in conjunction with ViewPager2, TabLayout can provide a familiar interface for navigating between pages in swipe mode. 
Figure 1: A TabLayout has four tabs. To include a TabLayout in ViewPager2, add the <TabLayout> element above the <ViewPager2> element, as shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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 TabLayout with ViewPager2 and attach the following:
1 2 3 4 5 6 7 8 9 10 11 | class CollectionDemoFragment : Fragment() { ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { val tabLayout = view.findViewById(R.id.tab_layout) TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = "OBJECT ${(position + 1)}" }.attach() } ... } |
Thank you for reading my translation. Source: https://developer.android.com/guide/navigation/navigation-swipe-view-2