Ticker

6/recent/ticker-posts

Android Tab Layout using Fragments and ViewPager | Android Studio | Java


 

Android Tab Layout using Fragments and ViewPager | Android Studio | Java

In this tutorial, we are going to create a simple tab layout using fragments and viewpager. The tab layout provides a horizontal layout to display tabs.

TabLayout is released by Android after the deprecation of ActionBar.TabListener (API level 21).

TabLayout is introduced in the design support library to implement tabs.


So let's see how to create it


Before that let's see what we're looking for







Step 1: Design the main XML layout


<?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"
android:id="@+id/activity_tab"
tools:context=".SimpleTabLayout">

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/white"
app:tabTextColor="@color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/colorPrimary"
android:layout_marginTop="28dp">
</com.google.android.material.tabs.TabLayout>

<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="500dp"
app:layout_constraintTop_toBottomOf="@id/tabLayout"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.constraintlayout.widget.ConstraintLayout>




Step 2: Create an adapter class


package com.codewithgolap.tablayout.Adapters;

import android.content.Context;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import com.codewithgolap.tablayout.Fragments.ChatsFragment;
import com.codewithgolap.tablayout.Fragments.HomeFragment;
import com.codewithgolap.tablayout.Fragments.SettingsFragment;

public class MyAdapter extends FragmentPagerAdapter {

private Context myContext;
int totalTabs;

public MyAdapter(Context context, FragmentManager fm, int totalTabs) {
super(fm);
myContext = context;
this.totalTabs = totalTabs;
}

// this is for fragment tabs
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
HomeFragment homeFragment = new HomeFragment();
return homeFragment;
case 1:
SettingsFragment settingsFragment = new SettingsFragment();
return settingsFragment;
case 2:
ChatsFragment chatsFragment = new ChatsFragment();
return chatsFragment;
default:
return null;
}
}
// this counts total number of tabs
@Override
public int getCount() {
return totalTabs;
}
}





Step 3: Add the functionality


package com.codewithgolap.tablayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.codewithgolap.tablayout.Adapters.MyAdapter;
import com.google.android.material.tabs.TabLayout;

public class SimpleTabLayout extends AppCompatActivity {

TabLayout tabLayout;
ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simple_tab_layout);


tabLayout=(TabLayout)findViewById(R.id.tabLayout);
viewPager=(ViewPager)findViewById(R.id.viewPager);

tabLayout.addTab(tabLayout.newTab().setText("Android"));
tabLayout.addTab(tabLayout.newTab().setText("Play"));
tabLayout.addTab(tabLayout.newTab().setText("Favourite"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

final MyAdapter adapter = new MyAdapter(this,getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

}
}




Output







You can follow me on YouTube:

Golap Barman


Follow me on Instagram

Android App Developer


Follow me on Facebook

GBAndroidBlogs







Post a Comment

0 Comments