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.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 :

You can download the complete source code here 

Android image slideshow/image carousel using viewpager

Download android source code

You can download the complete source code here 

In this tutorial, we will discuss how to implement a slideshow of images which rotates its slides on its own. These image carousels/slideshows find their use when we want to showcase our products, suppose we are running an e-commerce app. It can also be used to update recent events, live updates etc. Providing a slide show of selected items within your app can allow easy and fast access to them.

Now let us look into some coding part :

We will be doing a slide show of cars in this tutorial. So we will have to define some attributes for our car objects. So create a model for the car object as shown below:

Now we will need to pre-populate an arraylist of the above model so that we could easily pass it into the slideshow. In order to create a slide show, we will be using a viewpager. We then use a handler to slide the items in viewpager automatically. Now open up your MainActivity.java file and make the following changes.
As shown above you will need to create a viewpager and obviously, an adapter for this viewpager. We then pass the arraylist with the car objects to the adapter like shown in populateSlides() method and finally set the adapter to the viepager like this viewPager.setAdapter(pagerAdapter); .
Now you can create like shown below
You have successfully created an image carousel of cars, try running the project now!
You can download the complete source code here