Tabs

Según la documentación de Google sobre Material Design

Las Tabs hacen fácil explorar y cambiar entre diferentes vistas o aspectos funcionales de una aplicación o buscar entre conjuntos categorizados de datos.

¿Cómo se añade?

I. En tu archivo build.gradle añade las últimas versiones de las librerías design y appcompat.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'
    compile 'com.android.support:support-v13:X.X.X'
    // X.X.X Especifica la versión

    // Si quieres soportar una versión menor
    // que v13 añade la librería de soporte v4
    // en vez de v13
}

II. Haz que tu Activity extienda de android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {  
 ... 
}

III. Declara un elemento TabLayout y otro ViewPager en tu archivo de layout, layout.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"/>

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

</LinearLayout>  

IV. Configura tu TabLayout con el ViewPager.

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);

//set adapter to your ViewPager
viewPager.setAdapter(new TabPagerAdapter(getFragmentManager()));

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

V. Sobreescribe el método getPageTitle en tu ViewPager's adapter para devolver el título correcto por pestaña.

@Override
public CharSequence getPageTitle(int position) {  
     switch (position) {
          case ITEM_ONE:
               return "Item One";
          ...
     }
}

¿Cómo modificar el estilo?

I. Declara tu estilo personalizado en el archivo de estilos styles.xml.

<style name="TabLayoutStyle" parent="Widget.Design.TabLayout">  
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">@color/pink</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">8dp</item>
    <item name="tabPaddingEnd">8dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TabTextAppearance</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
</style>

<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">  
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/color_white_semitransparent</item>
    <item name="textAllCaps">true</item>
</style>  

II. Aplica este estilo a tu TabLayout con el atributo style.

<android.support.design.widget.TabLayout  
        style="@style/TabLayoutStyle"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Tabs con iconos y texto

I. Sobreescribe el método getPageTitle en el adaptador del ViewPager's para devolver el título de la pestaña.

@Override
public CharSequence getPageTitle(int position) {  
     switch (position) {
          case ITEM_ONE:
               return "Item One";
          ...
     }
}

II. Crea selectores por cada icono y pestaña.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_selected="true"
        android:drawable="@drawable/ic_call_selected" />

    <item
        android:state_selected="false"
        android:drawable="@drawable/ic_call_unselected" />

</selector>  

III. Para cambiar el icono de la pestaña utiliza el método TabLayout.Tab#setIcon. Puedes obtener una instancia de TabLayout.Tab con el método TabLayout#getTabAt, el cúal acepta un índice como parámetro.

...
// Despues de inicializar tu TabLayout y tu Viewpager
TabLayout.Tab tabCall = tabLayout.getTabAt(ITEM_CALL);  
tabCall.setIcon(R.drawable.selector_call);

// Repite el código para cada una de tus pestañas
...

Tabs solo con iconos

I. Crea selectores por cada pestaña

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_selected="true"
        android:drawable="@drawable/ic_call_selected" />

    <item
        android:state_selected="false"
        android:drawable="@drawable/ic_call_unselected" />

</selector>  

II. Para cambiar el icono de la pestaña utiliza el método TabLayout.Tab#setIcon. Puedes obtener una instancia de TabLayout.Tab con el método TabLayout#getTabAt, el cúal acepta un índice como parámetro.

...
// Despues de inicializar tu TabLayout y Viewpager
TabLayout.Tab tabCall = tabLayout.getTabAt(ITEM_CALL);  
tabCall.setIcon(R.drawable.selector_call);

// Repite este código por cada pestaña
...

Scrollable Tabs

Para hacer que tu TabLayout sea scrollable añade el atributo custom:tabMode con el valor scrollable.

<android.support.design.widget.TabLayout  
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:tabMode="scrollable"/>

Tabs centradas

Para crear pestañas centradas añade el atributo custom:tabGravity con el valor center.

<android.support.design.widget.TabLayout  
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        custom:tabGravity="center"/>