Select Page

How to create Swipeable Tabs like WhatsApp

by | Oct 30, 2016

How to create Swipeable Tabs like WhatsApp

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 {
implementation 'com.android.support:appcompat-v7:27.1.0'
implementation 'com.android.support:design:27.1.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);
  1. 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>
  1. 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

Latest posts by Jaison Fernando (see all)

  • Amit Dhiman

    hello, thanks for your code.
    i want upper scrolling and hide action bar android. This code does not have this type of scrolling.
    Please help me related this.

  • Muhammad Arfiandi

    how to make custom listview in each fragments and when we click the listview then we get the new activity, please help me solve this problem…I don’t know the code…thanks

  • Sunil Patil

    I am new to Android..can you provide step by step tutorial for the same.

  • TARUN UMATH

    thanks for code

  • Kavita Mantri

    Thanks for This code

  • Zane Campbell

    Great tutorial! Thank you very much.

    What would be the best way to update the badges on the tabs?

  • Kinajh

    ty brother

  • Majuran Cash

    Thanx for the code. I have updated your code to androidx version.