Android WhatsApp Like Material Design Sliding TabLayout With ListView

By | October 7, 2015

In the Previous series of tutorials we have seen how to create Custom ListView like whatsapp list which contains imageview and textviews and we also seen how to create the new material design SlidingTabLayout , In this tutorial we will see the combination of SlidingTabLayout with listview which looks similar to the new whatsapp design .

Android_Sliding_TabLayout_ListVIew

String Constant

Before i start coding i have intialized the array constants ( member_names , profile_pics , statues , contactType  ) inside res/strings.xml . and also i  have kept  all the images inside the drawable folder which you  can find in the download source code below .

file : strings.xml

<resources>
    <string name=”app_name”>SlideTabListView</string>
    <string name=”hello_world”>Hello world!</string>
    <string name=”action_settings”>Settings</string>

    <!– Names –>
    <string-array name=”Member_names”>
        <item>Pavan D</item>
        <item>DayaSagar</item>
        <item>Pavan B</item>
        <item>Maddy</item>
        <item>Pavan H</item>
        <item>Nikhil</item>
    </string-array>

    <!– Pictures –>
    <array name=”profile_pics”>
        <item>@drawable/pavand_pic</item>
        <item>@drawable/daya_pic</item>
        <item>@drawable/pavanb_pic</item>
        <item>@drawable/maddy_pic</item>
        <item>@drawable/pavanh_pic</item>
        <item>@drawable/nikhil_pic</item>
    </array>

    <!– Status –>
    <string-array name=”statues”>
        <item>Available</item>
        <item>Available</item>
        <item>Busy</item>
        <item>In a meeting</item>
        <item>At work</item>
        <item>At gym</item>
    </string-array>

    <!– contact type –>
    <string-array name=”contactType”>
        <item>Mobile</item>
        <item>Mobile</item>
        <item>Mobile</item>
        <item>Mobile</item>
        <item>Mobile</item>
        <item>Mobile</item>
    </string-array>

</resources>

XML Layout

Create a main layout which contains Toolbar , SlidingTabLayout and ViewPager .

file : activity_main.xml

<LinearLayout
    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”
    android:orientation=”vertical”>

    <android.support.v7.widget.Toolbar
        android:id=”@+id/toolbar”
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:background=”?attr/colorPrimary”
        android:fitsSystemWindows=”true”
        android:minHeight=”?attr/actionBarSize”
        android:padding=”2dp”
        app:titleMarginStart=”20dp”
        app:titleTextAppearance=”@style/AppTheme.Toolbar.Title” />

    <com.tutorialsbuzz.slidingtab.slider.SlidingTabLayout
        android:id=”@+id/tabs”
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:background=”#075E54″
         />

    <android.support.v4.view.ViewPager
        android:id=”@+id/pager”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”
        android:layout_weight=”1″
        android:background=”#e5e5e5″ >
    </android.support.v4.view.ViewPager>

</LinearLayout>

Custom ListFragment For Tab

XML Layout

Create list_item.xml inside layout directory ,this layout is used to the design of each row items in a list view

file : list_item.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”
    android:paddingLeft=”8dp”
    android:paddingRight=”8dp” >

    <ImageView
        android:id=”@+id/profile_pic”
        android:layout_width=”70dp”
        android:layout_height=”70dp”
        android:contentDescription=”desc”
        android:paddingLeft=”10dp”
        android:paddingRight=”10dp” />

    <TextView
        android:id=”@+id/member_name”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_marginTop=”10dp”
        android:layout_toRightOf=”@+id/profile_pic”
        android:paddingBottom=”10dp”
        android:text=”txt”
        android:textColor=”#000000″
        android:textSize=”20sp” />

    <TextView
        android:id=”@+id/status”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_alignLeft=”@+id/member_name”
        android:layout_below=”@+id/member_name”
        android:text=”txt”
        android:textColor=”#000000″
        android:textSize=”16sp” />

    <TextView
        android:id=”@+id/contact_type”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_alignBaseline=”@+id/member_name”
        android:layout_alignBottom=”@+id/member_name”
        android:layout_alignParentRight=”true”
        android:text=”txt”
        android:layout_marginLeft=”7dp”
        android:textSize=”16sp” />

</RelativeLayout>

Java Bean

Create a Bean Class RowItem which is used for setting and getting row data’s of each items in ListView ( member_name , profile_pic_id, status, contactType ) .

file : RowItem.java

package com.tutorialsbuzz.slidingtab.contacts;

public class RowItem {

private String member_name;
private int profile_pic_id;
private String status;
private String contactType;

public RowItem(String member_name, int profile_pic_id, String status,
  String contactType) {

 this.member_name = member_name;
 this.profile_pic_id = profile_pic_id;
 this.status = status;
 this.contactType = contactType;
}

public String getMember_name() {
 return member_name;
}

public void setMember_name(String member_name) {
 this.member_name = member_name;
}

public int getProfile_pic_id() {
 return profile_pic_id;
}

public void setProfile_pic_id(int profile_pic_id) {
 this.profile_pic_id = profile_pic_id;
}

public String getStatus() {
 return status;
}

public void setStatus(String status) {
 this.status = status;
}

public String getContactType() {
 return contactType;
}

public void setContactType(String contactType) {
 this.contactType = contactType;
}

Custom Adapter

Create a custom adapter which extends BaseAdapter , this is used for inflating each row items of the listview

file : CustomAdapter

package com.tutorialsbuzz.slidingtab.contacts;

import java.util.List;
import com.tutorialsbuzz.slidetablistview.R;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

Context context;
List<RowItem> rowItems;

CustomAdapter(Context context, List<RowItem> rowItems) {
this.context = context;
this.rowItems = rowItems;
}

@Override
public int getCount() {
return rowItems.size();
}

@Override
public Object getItem(int position) {
return rowItems.get(position);
}

@Override
public long getItemId(int position) {
return rowItems.indexOf(getItem(position));
}

/* private view holder class */
private class ViewHolder {
ImageView profile_pic;
TextView member_name;
TextView status;
TextView contactType;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder = null;

LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.list_item, null);
holder = new ViewHolder();

holder.member_name = (TextView) convertView
.findViewById(R.id.member_name);
holder.profile_pic = (ImageView) convertView
.findViewById(R.id.profile_pic);
holder.status = (TextView) convertView.findViewById(R.id.status);
holder.contactType = (TextView) convertView
.findViewById(R.id.contact_type);

RowItem row_pos = rowItems.get(position);

holder.profile_pic.setImageResource(row_pos.getProfile_pic_id());
holder.member_name.setText(row_pos.getMember_name());
holder.status.setText(row_pos.getStatus());
holder.contactType.setText(row_pos.getContactType());

convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

return convertView;
}

}

ListFragment

file : Contact.java

package com.tutorialsbuzz.slidingtab.contacts;

import java.util.ArrayList;
import java.util.List;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.tutorialsbuzz.slidetablistview.R;

public class Contact extends ListFragment {

String[] member_names;
TypedArray profile_pics;
String[] statues;
String[] contactType;
List<RowItem> rowItems;
ListView mylistview;

@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.contact, container, false);
return v;
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

rowItems = new ArrayList<RowItem>();

member_names = getResources().getStringArray(R.array.Member_names);
profile_pics = getResources().obtainTypedArray(R.array.profile_pics);
statues = getResources().getStringArray(R.array.statues);
contactType = getResources().getStringArray(R.array.contactType);

for (int i = 0; i < member_names.length; i++) {
RowItem item = new RowItem(member_names[i],
profile_pics.getResourceId(i, -1), statues[i],
contactType[i]);
rowItems.add(item);
}

CustomAdapter adapter = new CustomAdapter(getActivity(), rowItems);
setListAdapter(adapter);
profile_pics.recycle();
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu, inflater);
getActivity().getMenuInflater().inflate(R.menu.menu_main, menu);
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
}

Android_Fragment_ListView
Similarly Create Two More Fragments

Android_Fragment_Call_Tab Android_Fragment_Chat_Tab

ViewPager

  1. Create a class ViewPagerAdapter and extend this class to FragmentStatePagerAdapter .
  2. override the getCount() and getItem() method inside the ViewPagerAdapter class .
  3. Inside the getItem() method instantiate the fragment based on the index and return.

file : ViewPagerAdapter.java

package com.tutorialsbuzz.slidetablistview;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import com.tutorialsbuzz.slidingtab.calls.Call;
import com.tutorialsbuzz.slidingtab.chats.Chat;
import com.tutorialsbuzz.slidingtab.contacts.Contact;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

CharSequence Titles[];
int NumbOfTabs;

public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],
int mNumbOfTabsumb) {
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
}
// This method return the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Call();

case 1:
return new Chat();
case 2:
return new Contact();
}
return null;
}
// This method return the titles for the Tabs in the Tab Strip
@Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
@Override
public int getCount() {
return NumbOfTabs;
}
}

MainActivity

  1. Create a class MainActivity and extend this class to ActionBarActivity .
  2. set the content of the activity with above defined activity_main.xml file .
  3. set the ViewPagerAdapter for Sliding Tabs Layout.

file : MainActivity.java

package com.tutorialsbuzz.slidetablistview;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.tutorialsbuzz.slidingtab.slider.SlidingTabLayout;

public class MainActivity extends AppCompatActivity {

    // Declaring Your View and Variables
    private Toolbar toolbar;
    private ViewPager pager;
    private ViewPagerAdapter adapter;
    private SlidingTabLayout tabs;
    private CharSequence Titles[] = {“Calls”, “Chats”, “Contacts”};
    int Numboftabs = 3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Creating The Toolbar and setting it as the Toolbar for the activity

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setIcon(R.drawable.ic_launcher);

        // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles
        // fot the Tabs and Number Of Tabs.
        adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,
                Numboftabs);

        // Assigning ViewPager View and setting the adapter
        pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(adapter);

        // Assiging the Sliding Tab Layout View
        tabs = (SlidingTabLayout) findViewById(R.id.tabs);
        tabs.setDistributeEvenly(true);
        tabs.setViewPager(pager);
    }
}

  • Hi,
    Currently same concept i'm working on it.I have in second tab(In that i'm having a button on click of it i'm replacing the whole fragment with another).Now when user click on the back button of the fragment i need to show the viewpager second tab,In @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case android.R.id.home:
    getActivity().onBackPressed();

    break;
    default:
    break;
    }
    return super.onOptionsItemSelected(item);
    } i have written the above code it is redirecting to that page but it is showing blank how to solve it .

  • Hi Tutorial Buzz i need little help from u ppl……… actually my requirement is i have to do 3 things
    1) I need to have some user form fields like Name First Name Last name ….. so on and i need to have dotted progress bar on top of UI layout to confirm user that weather they submitted the particular data

    2) I need to capture there picture with there longitude and latitude should be saved to database

  • Friends how to add search view with all tab filter data. like whatsapp anyone have u any idea please help me

  • In the contacts window , as I can do to open a fragment or activity ?

  • nice tutorial, but i have some problem with this code. how to add intent from this app, like if I click Pavan B it go to other activity..
    please help me,.

  • Thank you Pawan Deshpande, you helped me a lot!!! Best wishes to you.

  • Thank you very much !!!

  • how to set onClicklistener on Listview.If i click any contact it should open new page .I have tried everything but i cant find the solution .Please help me out

  • Not able to download code

  • it is not downloading! why please email zip to petermusumbi@gmail.com

  • Mohamed Kaleel

    How to implement
    setOnItemClickListener , setOnItemLongClickListener , i tried onitemclicklistner is not trigerring , could u help