Swipe through fragments – ViewPager and TabLayout in android

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: