Android

Android Tab Layout with swipe able Fragments

Swiping views using Android Tab Layout with swipe-able Fragments is the easiest and fastest way to switch views. Many famous apps like WhatsApp use Tab Layout to switch between calls, messages, and statuses. Android Material Design library provides a Tab Layout widget. In this tutorial, we will learn to develop material design swipe-able tabs using Tab Layout and View Pager.

Let’s get started with development. Here are the steps you need to follow to develop a swipeable tabs app.

1. Create New Android Studio Project

First of all, we will create a fresh new android studio project with an empty activity.

Screen Shot
Screen Shot

2. build.gradle (Module: app) support design Library.

We need to add an android support design library for tab layout widgets. You need to open build.gradle module app and add the following code depending on your target SDK version.

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

3. Styles.xml

We need to replace DarkActionBar theme with NoActionBar because we are going to use Toolbar and TabLayout to show Tabs.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

3.1 colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#d11617</color>
    <color name="colorPrimaryDark">#B31718</color>
    <color name="colorAccent">#B31718</color>
    <color name="white">#FFFFFF</color>
    <color name="grey">#d4d4d4</color>
</resources>

4. activity_main.xml

We will add Toolbar, Tablayout, and ViewPager inside our activity_main.xml file to display tabs. We will ink our TabLayout with ViewPage in ActivityMain.java implementation.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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.tutorialscache.tabslayout.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Base.Theme.AppCompat"/>
        <android.support.design.widget.TabLayout
            android:id="@+id/mTabLayout"
            android:labelFor="@id/toolBar"
            app:tabTextColor="@color/grey"
            app:tabIndicatorColor="@color/white"
            app:tabSelectedTextColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:layout_below="@id/appbarLayout"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

5. Fragments Creation

Now we will create a few fragments which will be shown through viewpager and TabLayout on MainActivity.java. To create a new fragment right click on your package and click new class. Fragment will be of movie types like action, drama, and comedy.

Screen Shot

1. ActionMoviesFragment

After creating the ActionMoviesFragment class and extending it with the Fragment superclass we need to implement the onCreate and onCreateView methods. To return the view in onCreateView we need also to create a new XML file and name it fragment_action.xml.

We will implement ArrayAdapter in fragments to show movie names on ListView. If you want to learn how ArrayAdapter works please visit Simple ListView using ArrayAdapter – Android Example.

After implementation, our codes will look like this in ActionMoviesFragment.java

package com.tutorialscache.tabslayout;
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;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ActionMoviesFragment extends Fragment {
    ListView listView;
    ArrayAdapter<String> arrayAdapter;
    String[] actionMovies = {"Final Score","Venom","Overlord","Hunter Killer","Beirut","Tomb Raider","Den of Thieves","Upgrade",
            "Aquaman","Mohawk","Braven","Mandy","Black Panther","The Commuter","Revenge"};
    public ActionMoviesFragment(){
    //constructor
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_action,container,false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        listView = view.findViewById(R.id.listView);
        arrayAdapter = new ArrayAdapter<>(getActivity(),android.R.layout.simple_list_item_1,actionMovies);
        //setting ArrayAdapter on listView
        listView.setAdapter(arrayAdapter);
    }
}

fragment_action.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
    
</LinearLayout>

2. DramaMoviesFragment.java

By following the previous fragment steps we will create another fragment name DramaMoviesFragment.java and a few movies with drama categories.

After implementation code will look like this in DramaMoviesFragment.java

package com.tutorialscache.tabslayout;
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;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class DramaMoviesFragment extends Fragment {
    ListView listView;
    ArrayAdapter<String> arrayAdapter;
    String[] dramaMovies = {"First Man","Vice","Tully","The commuter","Creed II","Searching"};
    public DramaMoviesFragment(){
        //constructor
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_drama,container,false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        listView = view.findViewById(R.id.listView);
        arrayAdapter = new ArrayAdapter<>(getActivity(),android.R.layout.simple_list_item_1,dramaMovies);
        //setting ArrayAdapter on listView
        listView.setAdapter(arrayAdapter);
    }
}

fragment_drama.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
    
</LinearLayout>

3. ComedyMoviesFragment

Third and the last fragment will be ComedyMoviesFragment in which we will list Comedy movies. Create a new fragment and name it as ComedyMoviesFragment which will look like this.

package com.tutorialscache.tabslayout;
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;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ComedyMoviesFragment extends Fragment {
    ListView listView;
    ArrayAdapter<String> arrayAdapter;
    String[] comedyMovies = {"TAG","The Grinch","Damsel","Early Man","'Blockers","Overboard"};
    public ComedyMoviesFragment(){
        //constructor
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_comedy,container,false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        listView = view.findViewById(R.id.listView);
        arrayAdapter = new ArrayAdapter<>(getActivity(),android.R.layout.simple_list_item_1,comedyMovies);
        //setting ArrayAdapter on listView
        listView.setAdapter(arrayAdapter);
    }
}

fragment_comedy.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
    
</android.support.constraint.ConstraintLayout>

6. PagerAdapter

PagerAdapter will be used to set fragments on TabLayout. Create a new class PagerAdapter and extend it with FragmentPagerAdapter.

Screen Shot

Implement the Adapter in the following way in PagerAdapter.java

package com.tutorialscache.tabslayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
public class PagerAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> fragmentsList = new ArrayList<>();
    ArrayList<String> fragmentsTitle = new ArrayList<>();
    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        return fragmentsList.get(position);
    }
    @Override
    public int getCount() {
        return fragmentsList.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentsTitle.get(position);
    }
    public void addFragment(Fragment fragment, String title) {
        fragmentsList.add(fragment);
        fragmentsTitle.add(title);
    }
}

7. MainActivity.java

MainActivity is the core implementation of the whole project here I have used a naming convention that very meaning full so you can understand it easily. You can place icons in drawable and link to each tab using setIcon of TabLayout.

package com.tutorialscache.tabslayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    TabLayout tabLayout;
    ViewPager viewPager;
    PagerAdapter pagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //link views
        getViews();
        //setting toolbar
        initializeToolBar();
        //adapter setup
        pagerAdapter = new PagerAdapter(getSupportFragmentManager());
        //attaching fragments to adapter
        pagerAdapter.addFragment(new ActionMoviesFragment(),"Action");
        pagerAdapter.addFragment(new ComedyMoviesFragment(),"Comedy");
        pagerAdapter.addFragment(new DramaMoviesFragment(),"Drama");
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
        //setting icons
        tabLayout.getTabAt(0).setIcon(R.drawable.ic_movie_white_24dp);
        tabLayout.getTabAt(1).setIcon(R.drawable.ic_movie_white_24dp);
        tabLayout.getTabAt(2).setIcon(R.drawable.ic_movie_white_24dp);
    }
    private void getViews() {
        toolbar = findViewById(R.id.toolBar);
        tabLayout = findViewById(R.id.mTabLayout);
        viewPager = findViewById(R.id.viewPager);
    }
    private void initializeToolBar() {
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("Awesome Hollywood Movies");
     }
}

Comments are closed.