Select Page

Hey, everyone in this post I am going to teach how to create swipeable tabs like WhatsApp using TabLayout and ViewPager. You can find basic details about TabLayout in my previous post.

First, create an application, and add the design and app compact dependencies into that application build.gradle (Module : app) file.

dependencies {
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
}

Then create the layout with TabLayout and ViewPager using the code below.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorTextPrimary"
            app:tabTextColor="@color/colorTextDisable" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/tablayout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Now you need to add the tabs into that TabLayout. Here you need to decide the way of implementation

1. If your tab contains only plain text then no need to add tabs manually because setupWithViewPager method will take care of it.

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

2. If your tab contains text with icons then you can use TabItem into your layout file.


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

<android.support.design.widget.TabItem
    android:id="@+id/tab1"
    android:icon="@drawable/tab_call_selector"
    style="@style/tab_item"
    android:text="@string/tab1" />

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


3. If you need to customize the view of the tab then you can add tabs and set custom views into that tabs programmatically.

private void setupTabIcons()
{
    for(int i=0;i<tabItems.length;i++)
    {
        TabLayout.Tab tabitem = tabLayout.newTab();
        tabitem.setCustomView(customView.get(i));
        tabLayout.addTab(tabitem);
    }
}

Here we are going to implement the last way because in WhatsApp we need to show the unread chat count badge. For this, we need to create the layout with needed design and then implement it into the tabs.

whatsapp_viewpager

While customizing this layout we need to create a selector for the text color and the circle background for the badge.The following code helps you to make this happen.

badge_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item xmlns:android="http://schemas.android.com/apk/res/android">
        <shape android:shape="oval">
            <solid android:color="@drawable/tab_text_color_selector" />
        </shape>
    </item>
</layer-list>

tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorTextPrimary" android:state_selected="true" />
    <item android:color="@color/colorAccent"/>
</selector>

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:padding="12dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Calls"
            android:textColor="@drawable/tab_text_color_selector"
            android:textSize="@dimen/large_text" />

        <TextView
            android:id="@+id/tv_count"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="6dp"
            android:background="@drawable/badge_background"
            android:gravity="center"
            android:text="99"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/medium_text" />

    </LinearLayout>

</RelativeLayout>


At next, create necessary fragments for each tab of the viewpager. Here we need to create three fragments because in WhatsApp we have three tabs named as Calls, Chats, and Contacts.Then create the needed menus for populating the menu in action bar.

Now we need to setup the viewpager with the corresponding fragments, using the following snippet.


//Initializing viewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
setupViewPager(viewPager);

//Initializing the tablayout
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);


private void setupViewPager(ViewPager viewPager)
{
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    callsFragment=new CallsFragment();
    chatFragment=new ChatFragment();
    contactsFragment=new ContactsFragment();
    adapter.addFragment(callsFragment,"CALLS");
    adapter.addFragment(chatFragment,"CHAT");
    adapter.addFragment(contactsFragment,"CONTACTS");
    viewPager.setAdapter(adapter);
}

I made a simple sample app, it’s over on GitHub if you want to check it out.

View on GithubDownload .zip

This ends the blog on Swipeable Tabs like WhatsApp. Feel free to comment and share, keep watching this space get more updates on Android Stuff!

Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere