How to make tabs similar to Whatsapp?

Question

Does anyone have any example of how I can create this style of tabs on Android.

In the image the example is the Whats App.

I mean:

1 - CALL, Chats, Contacts tabs
2 - The Search bar, which is always, regardless of the tab I click

Can someone help me?

Answer 1

In the case of Whatsapp I imagine that a Tablayout and a Viewpager are used:

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Fragmentpageradapter:

public class MyCustomPagerAdapter extends FragmentPagerAdapter {
    public MyCustomPagerAdapter(FragmentManager fm) {
        super(fm);
    }

//   Aqui você retorna uma instancia de fragment para cada aba dependendo da posição
    @Override
    public Fragment getItem(int position) {
//  Exemplo:
        switch (position) {
            case 0: return new CallFragment();
            case 1: return new ChatFragment();
        }
        return null;
    }

//   Aqui você retorna o número de páginas que o pager vai ter 
    @Override
    public int getCount() {
//  Exemplo   
        return 2;
    }

//  Aqui você retorna o titulo de acordo com a posição de cada aba (as que você definiu antes no getItem)  
    @Override
    public CharSequence getPageTitle(int position) {
//  Exemplo
        switch (position) {
            case 0: return "Calls";
            case 1: return "Chats";
        }
        return super.getPageTitle(position);
    }
}

Activity

public class MyActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
        setContentView(R.layout.my_pager_layouut);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        MyCustomPagerAdapter pagerAdapter = new MyCustomPagerAdapter(getFragmentManager());
        pager.setAdapter(pagerAdapter);
        tabLayout.setupWithPager(pager);
    }
}