Tabs y toolbars en Android

Vamos a realizar una aplicación que nos permita observar la forma en que se crean los tabs y toolbars en android.

El resultado final lo puedes ver aquí: Tabs y toolbars en Android: Resultado final

Comencemos:

Crea un nuevo proyecto.

Agregar las dependencias

Abre el archivo build.gradle (Module:app)

Añada a la sección de dependencies las siguientes dos:

 implementation ‘com.android.support:support-v4:27.1.1’

 implementation ‘com.android.support:design:27.1.1′

Donde la versión coincida con su versión de compileSdkVersion que aparece en ese mismo archivo.

Clic en Sync Now para descargar las dependencias.

Toolbars en Android

Abra su archivo styles.xml (res->layout->values->styles.xml)

Verifique que la linea siguiente efectivamente apunte a NoActionBar

<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>

Con esto indicamos que quite el actionbar, y lo hacemosporque  vamos a implementar nuestro propio toolbar.

Crear un toolbar

En la carpeta de res->Layout Agregue un nuevo Layout Resource File con el nombre toolbar.

El código de éste archivo lo puedes ver a continuación:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"


    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

    />

En el activity_main.xml haga referencia a ese archivo

<include

        android:id=”@+id/toolbar”

        layout=”@layout/toolbar”

        />

Eso iría dentro del constraint layout, antes del textview que en este momento dice Hello World

Vamos a MainActivity e implementamos el toolbar.

Podemos crear una función que nos haga esa labor:

private void setToolBar(){
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        //getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

Y desde onCreate la mandamos a llamar:

setToolBar();

Nuestra app se vería así:

Creación de  los fragments que mostrarán el contenido de cada Tab

Cree un nuevo Package con el nombre Fragments (este paso es opcional)

Cree tres fragments: de clic secundario sobre el package Fragments y New->Fragment->Fragment Blank como se ve en la siguiente imagen.

Los nombre de los fragments que usaremos serán: EstadosFragment, ChatsFragment, y LlamadasFragment.

Vaya a EstadosFragment.java y notará la siguiente línea:

return inflater.inflate(R.layout.fragment_estados, container, false);

Modifíquela para que quede de la siguiente forma:

 View view = inflater.inflate(R.layout.fragment_estados, container, false);

        return view;

Y haga lo mismo para los tres fragments

Vaya a fragment_estados.xml y vamos a modificar el texto por default que contiene:

<TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="90dp"
        android:text="estados" />

Haga algo similar para los siguientes dos fragments,

Creación de los tabs

En el activity_main.xml agregariamos el código del tablayout. También agregaremos un ViewPager para hacer el efecto de desplazamiento entre los tabs. Éste código lo puedes insertar debajo del toolbar.

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />



<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="459dp"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"

        />

Implementar el TabLayout

 TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("Estados"));
        tabLayout.addTab(tabLayout.newTab().setText("Chats"));
        tabLayout.addTab(tabLayout.newTab().setText("Llamadas"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

En éste momento nuestra app se vería así:

Crear el adaptador

Para mostrar el contenido de los fragments en cada pestaña de los tabs necesitamos un Adaptador. Cree una nueva Clase de Java y nómbrela PagerAdapter (o el nombre que desee proporcionarle).

El código completo de ésta clase es el siguiente:

public class PagerAdapter extends FragmentStatePagerAdapter {

    private int numberOfTabs;


    public PagerAdapter(FragmentManager fm, int numberOfTabs) {
        super(fm);
        this.numberOfTabs = numberOfTabs;
    }

    @Override
    public int getCount() {
        return numberOfTabs;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return  new EstadosFragment();
            case 1:
                return  new ChatFragment();
            case 2:
                return  new LlamadasFragment();
            default:
                return null;
        }

    }
}

Ahora debemos implementar éste adaptador.

Vamos a mainactivity.java

En onCreate agregamos:

PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(),
                tabLayout.getTabCount());

        final ViewPager viewPager =  findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));


        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                viewPager.setCurrentItem(position);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

Listo. Podemos observar el comportamiento de nuestra aplicación, donde al cambiar entre pestañas vemos el contenido de cada fragment. Podemos modificar éste contenido a lo que deseemos.

Puedes ver el resultado final aqui: Tabs y toolbars en Android: Resultado final

Tu comentario

opiniones