Kotlin TabLayout Example

In this tutorial you will learn about the Kotlin TabLayout Example and its application with practical example.

Kotlin TabLayout Example

In Last Article we have briefly discussed about TabLayout and ViewPager. Now Let’s get understand this by below Example. Follow all the steps for creation of TabLayout with ViewPager with Kotlin.

1st Step: Create Project: Create New Project on click of “File=>New=>New Project”, You will get Screen like below image. Please fill all details and do not forget to check on “Include Kotlin support” after that click on “Next” And Select Your Minimum and Maximum API Level then again Click on “Next”.

1

# After selection of API Level a new Screen will appear like below image, from here you can select your activity type.

2

#Simply click on Next and again new screen will appear like below image from here image you can change your Activity Name and also xml name.

3

#Click on Finish button, you are all set with Project Creation. Now we have to move to the coding side.

 

2nd Step: Coding Implementation: We have to use some Fragments, class, adapter and XML for creation of TabLayout with ViewPager which are listed below.

  1. fragment_layout.xml
  2. FragmentOne
  3. FragmentTwo
  4. FragmentThree
  5. ViewPager Adapter
  6. activity_main.xml
  7. MainActivity
  8. AndroidManifest.xml

1.fragment_layout.xml: This xml will be associated with all three fragment. You can create different layout for different Fragment. Check below xml code.

  1. FragmentOne.kt: This Kotlin fragment will be use in First Tab of TabLayout. Check below code.

  1. FragmentTwo.kt: This Kotlin fragment will be use in Second Tab of TabLayout. Check below code.
Recommended:-  Kotlin Fragment

  1. FragmentThree.kt: This Kotlin fragment will be use in Third Tab of TabLayout. Check below code.

5.ViewPagerAdapter: It extends FragmentPagerAdapter Which is implementation of PagerAdapter that represent each page as a Fragment. Check below code for understand how It was used.

Recommended:-  Kotlin Navigation Drawer

  1. activity_main.xml: In this xml we kept our TabLayout and ViewPager. Check below XML code.

  1. MainActivity.kt: So this will be final class of Kotlin from here we will bind our pager adapter with ViewPager and ViewPager with TabLayout. Check below code.
Recommended:-  FindViewById & On Click Listener

8.AndroidManifest.xml: As we know that this is very important file for Android Project, From here you can give permission and declare your activities. Also you can change your App icon and Label of App. Check Below code.

3rd Step: Run: Now you are all set with project so run this project on your device or Emulator. You will get output like below images.

4 5 6

In this tutorial we have learn about the Kotlin TabLayout Example and its application with practical example. I hope you will like this tutorial.