
Tabs are an important UI component for providing navigation. In this tutorial, we will create a material design Tab Layout with Android Design Support TabLayout widget and ViewPager using Fragments.
Tabs are an important UI component for providing navigation. In this tutorial, we will create a material design Tab Layout with Android Design Support TabLayout widget and ViewPager using Fragments.
Creating Project
Here I have created an Android Studio project with package com.learn2crack.swipeview also Activity as MainActivity and layout as activity_main.
Adding Dependencies
Make sure you have Design Support Library and Constraint Layout library in your build.gradle. Latest versions of Android Studio adds these libraries on new project creation.
Creating Layout
Our content_main.xml layout has a ViewPager widget to display the Fragment Tabs content.
content_main.xml
<?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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.learn2crack.swipeview.MainActivity"
tools:showIn="@layout/activity_main">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
Our main layout activity_main.xml has TabLayout widget within AppBarLayout.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="com.learn2crack.swipeview.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Next, we will create three layouts for Fragments fragment_home, fragment_profile, fragment_settings.
fragment_home.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_home"
android:textAppearance="@style/TextAppearance.AppCompat.Display2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
fragment_profile.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_profile"
android:textAppearance="@style/TextAppearance.AppCompat.Display2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
fragment_settings.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_settings"
android:textAppearance="@style/TextAppearance.AppCompat.Display2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Creating Fragments
We are creating three Fragments HomeFragment, ProfileFragment, SettingsFragment to inflate the Fragment layouts.
HomeFragment.java
package com.learn2crack.swipeview;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
public static final String TITLE = "Home";
public static HomeFragment newInstance() {
return new HomeFragment();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
ProfileFragment.java
package com.learn2crack.swipeview;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ProfileFragment extends Fragment {
public static final String TITLE = "Profile";
public static ProfileFragment newInstance() {
return new ProfileFragment();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_profile, container, false);
}
}
SettingsFragment.java
package com.learn2crack.swipeview;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SettingsFragment extends Fragment {
public static final String TITLE = "Settings";
public static SettingsFragment newInstance() {
return new SettingsFragment();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_settings, container, false);
}
}
Creating Adapter
To have a swipe Tab layout, we need to create an Adapter for ViewPager and add it to the TabLayout. This adapter class renders Fragment to each ViewPager’s page. Our ViewPagerAdapter class extends from FragmentStatePagerAdapter. We need to override three methods getItem(), getCount(), getPageTitle(). The getItem() method requires a Fragment instance for each Tab position. The getCount() method needs the total fragment count. The getPageTitle() method requires page title as String for each Tab position. This method is required for displaying name of the Tab.
ViewPagerAdapter.java
package com.learn2crack.swipeview;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private static int TAB_COUNT = 3;
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return HomeFragment.newInstance();
case 1:
return ProfileFragment.newInstance();
case 2:
return SettingsFragment.newInstance();
}
return null;
}
@Override
public int getCount() {
return TAB_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return HomeFragment.TITLE;
case 1:
return ProfileFragment.TITLE;
case 2:
return SettingsFragment.TITLE;
}
return super.getPageTitle(position);
}
}
Creating Activity
Our MainActivity initializes ViewPager and sets up the ViewPager with TabLayout with the method setupWithViewPager(). The ViewPagerAdapter is set to the ViewPager using the setAdapter() method.
MainActivity.java
package com.learn2crack.swipeview;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private Toolbar mToolbar;
private ViewPagerAdapter mViewPagerAdapter;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
setViewPager();
}
private void setViewPager() {
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mViewPagerAdapter);
mTabLayout = (TabLayout) findViewById(R.id.tab);
mTabLayout.setupWithViewPager(mViewPager);
}
}
Screenshots
Complete Project Files
You can download the complete project as zip or fork from our Github repository.
Stay tuned!
Enjoy coding 🙂