Android TabLayout

TabLayout is utilized to actualize flat tabs. TabLayout is discharged by Android after the censure of ActionBar.TabListener (API level 21).

TabLayout is acquainted in configuration bolster library with actualize tabs.

Tabs are made utilizing newTab() technique for TabLayout class. The title and symbol of Tabs are set through setText(int) and setIcon(int) techniques for TabListener interface individually. Tabs of design are joined over TabLayout utilizing the strategy addTab(Tab) technique.

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

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

We can also add tab item to TabLayout using TabItem of android design widget.

<android.support.design.widget.TabItem

android:text="@string/tab_text"/>

Exmple Of TabLayout using ViewPager

Let's create an example of TabLayout using ViewPager and Fragment..

Activity_main.xml

Create an activity.xml file with TabLayout and ViewPager view components.

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.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="tablayout.example.com.tablayout.MainActivity">

<android.support.design.widget.TabLayout

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#1db995">

</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="355dp"

android:layout_height="455dp"

app:layout_constraintTop_toBottomOf="@+id/tabLayout"

tools:layout_editor_absoluteX="8dp" />

</android.support.constraint.ConstraintLayout>

Build.gradle

Presently gave the reliance library of TabLayout in build.gradle record.

implementation 'com.android.support:design:26.1.0'

File :- MainActivity.java

In this document, we actualize two extra audience addOnPageChangeListener(listener) of ViewPager which makes slides the various parts of tabs and addOnTabSelectedListener(listener) of TabLayout which select the present tab on tab choice.

package tablayout.example.android.tablayout;

import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

TabLayout tabLayout;

ViewPager viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

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

tabLayout.addTab(tabLayout.newTab().setText("Home"));

tabLayout.addTab(tabLayout.newTab().setText("Sport"));

tabLayout.addTab(tabLayout.newTab().setText("Movie"));

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) {

}

});

}

Files :- MyAdapter.java

package tablayout.example.com.tablayout;

import android.content.Context;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.app.FragmentManager;

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:

SportFragment sportFragment = new SportFragment();

return sportFragment;

case 2:

MovieFragment movieFragment = new MovieFragment();

return movieFragment;

default:

return null;

}

// this counts total number of tabs

@Override

public int getCount() {

return totalTabs;

}

Now create different fragment files for all different tabs.

File :- HomeFragment.java

package tablayout.example.android.tablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class HomeFragment extends Fragment {

public HomeFragment() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_home, container, false);

}

Files :-fragment_home.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="tablayout.example.com.tablayout.HomeFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="@string/home_fragment" />

</FrameLayout>

File :- sportfragment.java

package tablayout.example.android.tablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class SportFragment extends Fragment {

public SportFragment() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_sport, container, false);

}

File :- Fragment_sport.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="tablayout.example.com.tablayout.SportFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="@string/sport_fragment" />

</FrameLayout>

File :- MovieFragment.java

package tablayout.example.android.tablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MovieFragment extends Fragment {

public MovieFragment() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_movie, container, false);

}

File : -fragment_movie.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="tablayout.example.com.tablayout.MovieFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="@string/movie_fragment" />

</FrameLayout>

File :- String.xml

<string name="app_name">TabLayout</string>

<string name="home_fragment">Home Fragment</string>

<string name="sport_fragment">Sport Fragment</string>

<string name="movie_fragment">Movie Fragment</string>

</resources>

OutPut :-

Android

Breaking

Wednesday 17 July 2019

Android TabLayout | Android Tutorial | Tablayout usig ViewPager