TabLayout Horizontal Scrollable

Implementar TabLayout Horizontal Scrollable

Fuente:

Añadir dependencias

implementation 'com.android.support:design:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'

Crear un layout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:orientation="vertical">



    <android.support.design.widget.TabLayout

        android:id="@+id/tlTab"

        style="@style/AppTabLayout"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_gravity="center_horizontal"

       app:tabMode="scrollable" />

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

</LinearLayout>

en values/styles añadir las caracteristicas de los tab

<resources>

   <style name="AppTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">0dp</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabPaddingStart">6dp</item>
        <item name="tabPaddingEnd">6dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
        <item name="tabSelectedTextColor">@color/orange</item>
    </style>

    <!-- for text -->
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">18sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/orange</item>
        <item name="textAllCaps">false</item>
    </style>

    <color name="orange">#1015be</color>
</resources>

crear una clase

public class ViewPagerAdaptador extends FragmentPagerAdapter
{

    private ArrayList<Fragment> arrayFragmentos;
    private ArrayList<String> arrayTitulos;

    public ViewPagerAdaptador(FragmentManager fm,
                              ArrayList<Fragment> arrayFragmentos,
                              ArrayList<String> arrayTitulos)
    {
        super(fm);
        this.arrayFragmentos = arrayFragmentos;
        this.arrayTitulos = arrayTitulos;
    }

    @Override
    public Fragment getItem(int position) {
        return arrayFragmentos.get(position);
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return arrayTitulos.get(position);
    }
}

En el layout activity donde queramos los tabs incluir

<include layout="@layout/tab3_tab_layout"  />

en la clase activity donde queramos implementar los tabs

TabLayout mTabLayout;  // v4.support
ViewPager vpContenido;
ViewPagerAdaptador adapter;

/** import android.support.v4.app.Fragment; */

ArrayList<Fragment> arrayFragmentos;
ArrayList<String> arrayTitulos;

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_tab3);



    mTabLayout = findViewById(R.id.tlTab);

    vpContenido = findViewById(R.id.vpContenido);



    cargarFragmentos();

    cargarTitulos();

    viewPagerEnTabLayout();

}



private void cargarFragmentos()

{

    arrayFragmentos = new ArrayList<>();

    arrayFragmentos.add(new AnteriorFragment());

    arrayFragmentos.add(new ActualFragment());

    arrayFragmentos.add(new Capilla1Fragment());

    arrayFragmentos.add(new Capilla3Fragment());

    arrayFragmentos.add(new VipFragment());

    arrayFragmentos.add(new TrasladoFragment());

}



private void cargarTitulos()

{

    arrayTitulos = new ArrayList<>();

    arrayTitulos.add("AYER");

    arrayTitulos.add("HOY");

    arrayTitulos.add("CAPILLA 1 Y 2");

    arrayTitulos.add("CAPILLA 3");

    arrayTitulos.add("VIP");

    arrayTitulos.add("TRASLADOS");

}



private void viewPagerEnTabLayout()

{

    adapter = new ViewPagerAdaptador(getSupportFragmentManager(),

            arrayFragmentos, arrayTitulos);

    vpContenido.setAdapter(adapter);

    mTabLayout.setupWithViewPager(vpContenido);

    mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_ayer);

    mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_hoy);

    mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_cap1y2);

    mTabLayout.getTabAt(3).setIcon(R.mipmap.ic_cap3);

    mTabLayout.getTabAt(4).setIcon(R.mipmap.ic_vip);

    mTabLayout.getTabAt(5).setIcon(R.mipmap.ic_traslado); 

    TabLayout.Tab tab = mTabLayout.getTabAt(1);

    tab.select();

}