Hey, what’s up coders of the universe. Here I am with another post in which I will be talking about how to implement ViewPager and TabLayout in an android app. So let’s begin.
First, let me show you a screenshot of my app that implements TabLayout and ViewPager so that you have a visual idea of what ViewPager and TabLayout are. This app shows a list of movies in each fragment. The movies that are currently playing, popular movies, upcoming movies, and top-rated movies.
In this app I have implemented TabLayout with four options – NOW PLAYING, POPULAR, UPCOMING, and TOP RATED. you can switch between fragments by tapping on the tabs or swiping right.
Now that you have a visual idea of ViewPager and TabLayout, let’s get straight to coding and see it by creating a simple app.
Here we will create simple book info. app with two fragments- Comic, Sci-Fi.
fragment_comic.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Comic">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment to show list of available comics"
android:textColor="#00897B"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_sci_fi.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SciFi">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment to show list of Sci-Fi books"
android:textColor="#00897B"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#2E2A2A"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#232427"
app:titleTextColor="@color/white" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#363A3E"
app:tabTextAppearance="@style/TextAppearance.AppCompat.Headline" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.constraintlayout.widget.ConstraintLayout>
Comic.java
package com.example.bookinfo;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Comic extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_comic, container, false);
}
}
SciFi.java
package com.example.bookinfo;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SciFi extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_sci_fi, container, false);
}
}
MainActivity.java
package com.example.bookinfo;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager.widget.ViewPager;
import android.graphics.Color;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Setting ActionBar
Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Getting ViewPager instance
ViewPager bookViewpager=(ViewPager)findViewById(R.id.view_pager);
//Giving BookViewPagerAdapter instance to ViewPager
bookViewpager.setAdapter(new BookViewPagerAdapter(getSupportFragmentManager()));
//Getting TabLayout Instance
TabLayout tabLayout=(TabLayout)findViewById(R.id.tab_layout);
//Linking ViewPager to the TabLayout
tabLayout.setupWithViewPager(bookViewpager);
//Setting tabs color
tabLayout.setTabTextColors(Color.WHITE,Color.CYAN);
}
}
BookViewPagerAdapter.java
package com.example.bookinfo;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
public class BookViewPagerAdapter extends FragmentPagerAdapter {
public BookViewPagerAdapter(@NonNull FragmentManager fm) {
super(fm);
}
@NonNull
@Override
public Fragment getItem(int position) {
// Return fragment instance
switch (position)
{
case 0:
return new Comic();
case 1:
return new SciFi();
}
return null;
}
@Override
public int getCount() {
//Number of fragments
return 2;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
// Text to show for tabs
switch(position)
{
case 0:
String stringComic="COMIC";
return (CharSequence)stringComic;
case 1:
String stringSciFi="SCI-FI";
return (CharSequence)stringSciFi;
}
return super.getPageTitle(position);
}
}
So here what we are doing is that we have created two fragments Comic.java and SciFi.java. In the MainActivity.java, first, we are getting an instance of ViewPager and giving it the instance of BookViewPagerAdapter. As the user swipe, ViewPager will ask the adapter for the fragments and the adapter will return fragments to ViewPager. Also we are setting TabLayout to work with ViewPager.
Ok, let’s keep it in simple words.
Attach ViewPagerAdapter to ViewPager then, give ViewPager to TabLayout.
That’s all for TabLayout and ViewPager.
Have any question in mind?
Comment below.
Goodbye.
DeveloperXon 
Leave a Reply