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