Android viewpager with tab layout example

In this post i will walk you through the setup of a tab layout with view pager, the final output will be something like the one shown below. We will also see how to pass data to the viewpager fragments from the activity.

viewpager with tab layout
Before we begin, couple of things that we will be following in this project are

  • The app will be built using androidx packages
  • The app will be using Java 8
  • The app will be using data binding (part of android jetpack components)

Now that we are all set to begin, let us open up android studio and create a brand new project with androidx artifacts.

androidx artifacts are configured by default when you create a new AS project
Now that your project have successfully synced with gradle, head over to your app level build.gradle and enable java 8 by adding the following code

compileOptions {
compileOptions {
targetCompatibility JavaVersion.VERSION_1_8 sourceCompatibility JavaVersion.VERSION_1_8 }
}
Also, you can enable data binding by adding the following to your app level build.gradle

dataBinding {
enabled = true}

Also add the following material dependency inorder to support tab layout

implementation 'com.google.android.material:material:1.0.0'

Now the resulting build.gradle will look like the following

Now that the initial setup is done, we will jump into the coding section right away.

First of all, in the project explorer, right click on your package directory, then create a blank fragment like shown below

create new blank fragment

Now that i have added the blank fragment, head over to your activity layout(acitvity_main.xml in my case) and convert it into a databinding layout by wrapping the root layout with <layout> tag, so that the resulting layout will be 


Now head over to your activity's java file (MainActivity.java in my case) and initialise binding variable by adding binding= DataBindingUtil.setContentView(this,R.layout.activity_main);, now you can get the binding variable for this initialisation by making slight modification to your layout file name, so in my case acticity_main becomes ActivityMainBinding. So initialise your bindining variable like this private ActivityMainBinding binding;

Now inorder to assign different fragments  in viewpager, we will need a viewpager adapter, for that go inside your MainActivity.java and add a new adapter class like shown below


If you check the activity_main.xml above, you can see that i have already added viewpager and tab layout inside it. I have also assigned the id's tab to tab layout and viewPager to the viewpager. Now is the part where view binding comes into play, can reference the viewpager and tab layout in our java code simply by using binding.viewPagerbinding.tab etc.

Now we can easily pass our viewpager to the SamplePagerAdapter and also setup our viewpager with the tablayout. Inside the SamplePagerAdapter's getItem() method you can return different fragments, which will be showing up inside your viewpager as different tabs. You can also return the titles for each tab in the getPageTitle() method

Now the complete code for MainActivity.java will be like
everything is now set and you will be able to see the tabbed viewpager if you hit the run button.
Download full source code below :

No comments:

Post a Comment