In this tutorial we are going to create 3 Tabs .Every tab have its own Fragment to control over screen. Also user can swipe between 3 tabs.
we are using AndroidX support Library , ViewPager2 and 3 different fragment & 3 different xml for layouts. And TabLayout for Tabs.
Layout Demonstration :
Checkout the following pic which explains the complete overview of layout architecture. Basically we are using ViewPager as main layout and for individual pager views we use Fragments. The tabs are part of Action Bar.
STEP 1: CREATING PROJECT
Let’s start with creating new project in android studio with package name com.example.manualSliding and class name MainActivity.java and its layout name is activity_main.xml.
STEP 2: ADDING DEPENDENCIES
open file Gradle Scripts/build.gradle(Module: app)
under dependencies{ } add this:
dependencies {
//this is for ViewPager
implementation "androidx.viewpager2:viewpager2:1.0.0"
//this is for TabLayout
implementation 'com.google.android.material:material:1.2.0-alpha01'
}
new TabLayoutMediator(tabLayout, viewPager,(tab, position) -> tab.setText(titles[position])).attach();
complete code of MainActivity.java
package com.example.manualsliding;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
public class MainActivity extends AppCompatActivity {
private static final int NUM_PAGES = 3;
//The pager widget, which handles animation and allows swiping horizontally to access previous and next wizard steps.
public static ViewPager2 viewPager;
// The pager adapter, which provides the pages to the view pager widget.
private FragmentStateAdapter pagerAdapter;
// Arrey of strings FOR TABS TITLES
private String[] titles = new String[]{"Tab1", "Tab2", "Tab3"};
// tab titles
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.mypager);
pagerAdapter = new MyPagerAdapter(this);
viewPager.setAdapter(pagerAdapter);
//inflating tab layout
TabLayout tabLayout =( TabLayout) findViewById(R.id.tab_layout);
//displaying tabs
new TabLayoutMediator(tabLayout, viewPager,(tab, position) -> tab.setText(titles[position])).attach();
}
private class MyPagerAdapter extends FragmentStateAdapter {
public MyPagerAdapter(FragmentActivity fa) {
super(fa);
}
@Override
public Fragment createFragment(int pos) {
switch (pos) {
case 0: {
return FirstFragment.newInstance("fragment 1");
}
case 1: {
return SecondFragment.newInstance("fragment 2");
}
case 2: {
return ThirdFragment.newInstance("fragment 3");
}
default:
return FirstFragment.newInstance("fragment 1, Default");
}
}
@Override
public int getItemCount() {
return NUM_PAGES;
}
}
@Override
public void onBackPressed() {
if (viewPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.d
super.onBackPressed();
} else {
// Otherwise, select the previous step.
viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
}
}
}
