How to create tabs in android using TabLayout

In this tutorial, you’ll learn how to create an android app with tabs.

STEP – 1

Create a new Android project and choose a Tabbed Activity with Navigation Style of Action Bars with ViewPager and click on Finish.

Android Studio will create 3 files when you click on Finish. First, activity_main.xml which is layout of MainActivity. Second, fragment_main.xml which will be used in ViewPager Adapter and Third, the MainActivity class where we will write the code for our app.

STEP – 2

Rename the fragment_main.xml to fragment_section_one.xml and create two new layout resource file with name “fragment_section_two.xml” and “fragment_section_three.xml”. Then, replace the code of each of these files with below code.

STEP – 3

Go to MainActivity class, you’ll see two instance variables created by android studio. First, SectionsPagerAdapter(Custom Class) variable and ViewPager variable. SectionsPagerAdapter variable is a derivative of FragmentPagerAdapter which means SectionsPagerAdapter class extends FragmentPagerAdapter class. This keeps every loaded fragment in memory. Second, a ViewPager variable which will host the contents of the fragments created in step 2.

Inside onCreate() method of this class, all the views will be initialized. Initialize the sectionsPagerAdapter variable by calling the constructor which expects a reference of type FragmentManager. Then, set this sectionsPagerAdapter variable by calling setAdapter() method on ViewPager variable.

Now, let’s move on to SectionsPagerAdapter Inner class. You’ll see three main methods in code. The purpose of each is explained below:

1. getItem(int position) : This is used for instantiating the fragment for the given page of the ViewPager. For Page 1 in ViewPager, it will show the fragment_section_one.xml on the viewpager and for page 2 it will show fragment_section_two.xml and so on. For doing this android studio has created another static inner class for you which is called PlaceholderFragemnt. We’ll discuss this in next step.

2. getCount(): returns the total number of pages in the ViewPager.

3. getPageTitle(int position): used for setting the tab title. You need to pass the position of the page.

STEP – 4

The PlaceholderFragment is a static class which extends Fragment class. It has an empty constructor and two methods. First, a static method newInstance(int sectionNumber) which returns a variable of type PlaceholderFragment. So, we need to instantiate PlaceholderFragment inside this method and supply extra information about the page to be displayed. For this, one static final String variable is already created which is our key. This key will be used to retrieve the extra information that comes with the PlaceholderFragment. We all know that static method runs before any other method of the class. So, when we call PlaceholderFragment.newInstance(position+1) inside getItem(int position) method of SectionsPagerAdapter class, this newInstance(int screenNumber) gets called and it instantiate the PlaceholderFragment and set the extra information about the fragment which has to be displayed in a bundle using the key ARG_SECTION_NUMBER. After that, onCreateView method of the PlaceholderFragment gets called which retrieves the extra information using the key and do some if else check and displays the content on the screen.

STEP – 5

Run the app and see it working.

Please drop a comment below if you face any issues or need some clarification. Thanks for reading 🙂

Download the complete project

admin Author

Leave a Reply

Your email address will not be published. Required fields are marked *