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.
Before we begin, couple of things that we will be following in this project are
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
Also add the following material dependency inorder to support tab layout
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
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.viewPager, binding.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 :
viewpager with tab layout |
- 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 |
compileOptions {Also, you can enable data binding by adding the following to your app level build.gradle
compileOptions {
targetCompatibility JavaVersion.VERSION_1_8 sourceCompatibility JavaVersion.VERSION_1_8 }
}
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.viewPager, binding.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 :
Hi Navneet! Thank you for your post. I have a ViewPager with multiple layout. They all have the same DataBinding and POJO I can see my different layouts and I can swap my them left and right. But the second I issue my first "mBindingPlanning = DataBindingUtil.setContentView(this, R.layout.dive_planning);" the layout becomes empty and I cannot swap any layout. I notices in this example that you have only one layout "acitvity_main.xml". How would you go around to use DataBinding with different layouts?
ReplyDelete