Dentro de las opciones para incluir un menú en una aplicación, la librería de diseño ha incluido un elemento nuevo llamado BottomNavigationBar que permite la interacción directa con elementos sin necesidad de desplegar menos adicionales, con un funcionamiento similar a una barra de pestañas. Desde Google se incide en que es importante que esta barra de inferior se utilice teniendo en cuenta algunos principios:
- Las opciones de menú estarán entre 3 y 5 items
- Las opciones deben ser accesibles desde cualquier parte de forma necesaria
- Nunca utilizarlas para pantallas de settings o tareas muy simples
- Limitar su uso conjunto al de las pestañas
- No utilizar variedad de colores en los iconos de la barra
- No abusar de los efectos en el cambio de vistas al pulsar opciones de menú
Para poder empezar a utilizar el elemento primero se debe importar la librería de diseño, la cual permitirá seleccionarlo como elemento de interfaz:
implementation 'com.android.support:design:28.0.0'
Una vez implementada se selecciona BottonBar en el xml, situándolo en el lugar seleccionado:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="+@id/"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="@color/colorPrimary"
app:menu="@menu/menu_bottom" />
</LinearLayout>
Donde algunas de las configuraciones del elemento BottonNavigationView en xml son:
- layout_insetEdge: ubicación de la barra de menu
- menu: archivo xml donde se indican las opciones de menú
- itemIconTint: color que tendría el icono
- itemTextColor: color que tendrá el texto asociado al icono
El archivo correspondiente al menú se codificaría con las opciones de la siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/opcion1"
android:icon="@android:drawable/ic_dialog_info"
android:title="Opción 1" />
<item
android:id="@+id/opcion2"
android:icon="@android:drawable/ic_dialog_alert"
android:title="Opción 2" />
<item
android:id="@+id/opcion3"
android:icon="@android:drawable/ic_dialog_dialer"
android:title="Opción 3" />
<item
android:id="@+id/opcion4"
android:icon="@android:drawable/ic_dialog_email"
android:title="Opción 4" />
</menu>
Adicionalmente, si se quiere personalizar los colores tanto del icono tanto del texto cuando está seleccionado o de seleccionado se puede utilizar un elemento de tipo selector mediante el cual se indican los estados y colores asociados. Para ello hay que crear un archivo selector de colores con el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_checked="true" />
<item android:color="@color/colorPrimaryDark" android:state_checked="false" />
</selector>
Y este se aplica a las configuraciones de color dentro del elemento BottomNavigationView
<android.support.design.widget.BottomNavigationView android:id="@+id/bottom_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:itemBackground="@color/colorPrimary" app:itemIconTint="@drawable/state_color_bottom" app:itemTextColor="@drawable/state_color_bottom" app:menu="@menu/menu_bottom" />
Para poder darle funcionalidad se utiliza el método setOnNavigationItemReselectedListener() el cual evalúa la pulsación en cada uno de los elementos del menú
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomBar = findViewById(R.id.bottom_bar);
bottomBar.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.opcion1:
mostrarToast("Pulsada opción 1");
break;
case R.id.opcion2:
mostrarToast("Pulsada opción 2");
break;
case R.id.opcion3:
mostrarToast("Pulsada opción 3");
break;
case R.id.opcion4:
mostrarToast("Pulsada opción 4");
break;
}
return true;
}
});
}
private void mostrarToast(String s) {
Toast.makeText(getApplicationContext(), s, Toast.LENGTH_SHORT).show();
}
Efectos adicionales
Adicionalmente se pueden incorporar efectos para que la barra de navegación inferior desaparezca cuando se realiza una acción concreta. Para ello se utiliza el ya visto coordinator layout con las etiquetas layout_scrollFlags y layout_behavior.
[ezcol_2third]
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@drawable/state_color_bottom"
app:itemTextColor="@drawable/state_color_bottom"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
app:layout_scrollFlags="scroll|enterAlways"
app:menu="@menu/menu_bottom" />
</android.support.design.widget.CoordinatorLayout>
[/ezcol_2third] [ezcol_1third_end]
[/ezcol_1third_end]
Adicionalmente se puede incluir la animación con una barra superior con un efecto conjunto
[ezcol_2third]
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@drawable/state_color_bottom"
app:itemTextColor="@drawable/state_color_bottom"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
app:layout_scrollFlags="scroll|enterAlways"
app:menu="@menu/menu_bottom" />
</android.support.design.widget.CoordinatorLayout>
[/ezcol_2third] [ezcol_1third_end]
[/ezcol_1third_end]