Android Bottom navegation. - App Game Tutoriales

En este tutorial vamos a explicar cómo crear un Bottom navegation con 5 botones en Android Studio, cada botón mostrará un fragmento distinto con su propia interfaz de usuario. Por lo tanto usaremos 5 fragmentos.

Bottom Navegation

Bottom Navegation es una barra que aparece en la parte inferior de la pantalla, y podemos colocar las principales opciones de nuestra aplicación.

Nos ayuda a mostrarle al usuario las opciones que tiene nuestra app, pero con pequeños botones que no afectan la Interfaz de usuario (UI) y sobre todo que siempre los tiene a la vista.

Con Bottom Navegation en Android, podemos usar fragmentos. Con los cuales es posible tener en una sola Actividad varias UI distintas con su propio código.

#Im bottom navegarion con un fragmento.

Resumen del tutorial, bottom navegation Android.

Primero creamos un nuevo proyecto, seleccionando “Empty layout”.
Luego en la UI de la actividad principal, agregaremos un BottomNavegationView (con id=bottom_navegation).
Lo siguiente es crear un nuevo Recurso de navegación (Navegation Resource file). Le daremos la id = “nav_fragment”.
En el recurso de navegación agregamos 5 fragmentos, cada uno con su id.
Ahora pasamos a la UI de la main activity y agregamos un navFregment (con la id=fragment). Si no has creado ningún fragmento no podrás agregar este elemento.
Luego crearemos un menú, a cada ítem le agregamos su símbolo y además agregamos su id, la cual debe ser igual a la del fragmento que abrirá cuando se presione, la id debe de ser la misma que la de cada fragmento.
Después, agregamos el menú que acabamos de crear a la BottonNavegationView en activity_main.xml
Casi para terminar pasamos al código en MainActivity. Aquí creamos un controlador del fragmento que tenemos en la main_activity.xml (id = fragment). Y con ese controlador indicamos que el contenido del fragmento se editará desde el Bottom Navegation.
NOTA: Puede ser necesario cambiar la versión de Kotlin, si nos marca un error en el paso 8.
Por último, en el código de la MainActivity hacemos que el título de cada fragmento aparezca en la barra superior (Action Bar).

Configurando un Bottom Navegation con 5 fragmentos, Android.

Vamos a seguir los pasos anteriores para hacer el Bottom navegation siguiente:

#im con bottom navegation

Creando un nuevo proyecto.

Primero crearemos un nuevo proyecto con un layout vacío (empty layout). Ya que configuraremos manualmente todo lo que necesitamos.

New proyect

Configurando la UI.

Ahora vamos a configurar la interfaz de usuario (UI) que es muy simple.

Usaremos constraintLayout para crear la UI.

Primero agregamos una Buttom Navegation y la acomodamos en la parte inferior.

Con una altura del tamaño de la ActionBar y con una id=”bottom_navegation”

.
.
android:id="@+id/bottom_navegation"
android:layout_height="?attr/actionBarSize"
.
.

Debemos agregar un NavigationHostFragment, encima del Bottom Naviagtion. Y que ahí es donde pondremos los fragmentos a mostrar. Pero no podremos agregarlo hasta que tengamos algún fragmento en el código.

Por lo tanto el siguiente paso es crear los fragmentos, y después regresaremos a la Main Activity.

NOTA: El navFragment, no se puede agregar a la UI si no hemos creado ningún fragmento. Por esa razón, agregaremos el navFragment, después de haber creado los fragmentos. Más adelante te diremos cuando regresar a este paso.

La UI es la siguiente:

El código nos queda así:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />  

</androidx.constraintlayout.widget.ConstraintLayout>

Creando recurso de navegación y los fragmentos, para la bottom navegation.

Vamos a crear un recurso de navegación. Con el cual se pueden manejar mejor los fragmentos. En este caso solamente los crearemos aquí, no usaremos nada más en esta sección.

Para crear el recurso de navegación (navegation resources) nos vamos a la ventana donde están los archivos y en la carpeta de “res” damos clic derecho, y seleccionamos New navegation resource.

Lo creamos y le damos el nombre de “nav_fragment”.

Posiblemente nos aparezca un cuadro de dialogo, que indica si queremos agregar librerías, presionamos en OK, para que se agreguen automáticamente.

Se agregan lo siguiente en el código de la app.

Creando fragmentos desde el recurso de navegación.

Al crearlo el recurso de navegación, lo abrimos y aquí podremos agregar fragmentos, esto se hace en la barra superior señalada con un circulo Azul en la siguiente imagen. Y en “Create new destination“.

Creamos 5 fragmentos aquí se crea su propio archivo en xml y su propio archivo de código.

A cada fragmento le damos su propia id (esta ID será la misma que tendrá cada Item en el menú). En este caso como no le tenemos una función específica a cada fragmento, las id serán las siguientes:

Fragmento 1 -> id=”fragment_1”

Fragmento 2 -> id=”fragment_2”

Fragmento 3 -> id=”fragment_3”

Fragmento 4 -> id=”fragment_4”

Fragmento 5 -> id=”fragment_5”

El código en el recurso de navegación es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/nav_fragment"
    app:startDestination="@id/fragment_1">

    <fragment
        android:id="@+id/fragment_1"
        android:name="com.app.dalvicstudios.animaciontuto.Fragment_1"
        android:label="Test 1"
        tools:layout="@layout/fragment_1" />
    <fragment
        android:id="@+id/fragment_2"
        android:name="com.app.dalvicstudios.animaciontuto.Fragment_2"
        android:label="Test 2"
        tools:layout="@layout/fragment_2" />
    <fragment
        android:id="@+id/fragment_3"
        android:name="com.app.dalvicstudios.animaciontuto.Fragment_3"
        android:label="Test 3"
        tools:layout="@layout/fragment_3" />
    <fragment
        android:id="@+id/fragment_4"
        android:name="com.app.dalvicstudios.animaciontuto.Fragment_4"
        android:label="Test 4"
        tools:layout="@layout/fragment_4" />
    <fragment
        android:id="@+id/fragment_5"
        android:name="com.app.dalvicstudios.animaciontuto.Fragment_5"
        android:label="Test 5"
        tools:layout="@layout/fragment_5" />
</navigation>

El label le pusimos “Test 1”, “Test 2”, “Test 3”, “Test 4” y “Test 5”, esto para poder diferenciar esta opción y veamos con mayor claridad donde es donde aparece este titulo.

Ese será el titulo de cada fragmento que aparece en la Toolbar.

Agregar el Navigation Host Fragment

Ahora si podemos regresar a la UI de la actividad principal y agregamos el Navigation Host Fragment, que se explicó en el paso anterior.

En la actividad principal, en el archivo XML, agregamos un Navigation Host Fragment, como se ve en la siguiente imagen.

Al agregarlo seleccionamos el recurso de navegación que nos aparece.

Configurando cada fragmento.

Ahora vamos a configurar el contenido de cada fragmento. Para este ejemplo, simplemente colocaremos un texto en el centro de la UI, que distinga a cada fragmento.

Además le daremos un nombre a cada fragmento, ya que ese nombre más adelante lo pondremos para que aparezca en la barra superior (Action Bar).

El código de un fragmento es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment_2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Fragmento 2"
        android:textColor="@android:color/background_dark"
        android:textSize="30sp" />

</FrameLayout>

En la siguiente imagen te mostramos como se ven los 5 fragmentos:

Creando el menú.

El siguiente paso es hacer un menú, agregar los 5 items para cada fragmento e indicar a cada ítem cual fragmento va a mostrar.

Para hacer el menú, damos clic derecho en la carpeta “res” y buscamos la opción de nuevo menú. Al menú le damos el nombre de “bottom_menu”.

Ahora agregamos 5 ítems, cada uno abrirá un fragmento. Agregamos la imagen correspondiente a cada ítem. Y le damos una ID, idéntica a la ID del fragmento que vamos a abrir cuando se presione cada item.

El código del menú es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/fragment_1"
        android:icon="@drawable/f_1"
        android:title="Fragmento 1" />

    <item
        android:id="@+id/fragment_2"
        android:icon="@drawable/f_2"
        android:title="Fragmento 2" />

    <item
        android:id="@+id/fragment_3"
        android:icon="@drawable/f_3"
        android:title="Fragmento 3" />

    <item
        android:id="@+id/fragment_4"
        android:icon="@drawable/f_4"
        android:title="Fragmento 4" />

    <item
        android:id="@+id/fragment_5"
        android:icon="@drawable/f_5"
        android:title="Fragmento 5" />

</menu>

NOTA: Es importante que la id de cada ítem tenga exactamente la misma que la Id de cada fragmento en el recurso de navegación.

Las imágenes las agregamos a la carpeta Drawables. Podemos usar la opción dando click derecho y buscando Show in explorer.

Agregando el menú a la Bottom navegation.

Una vez que ya tenemos el menú, el siguiente paso es agregarlo a la Bottom navegation.

Para esto, vamos a activity_main.xml y en la BottomNavegationView, agregamos la siguiente línea de código:

app:menu="@menu/bottom_menu"

Con esto ya se mostrará el menú en la Bottom Navegation, el código completo queda así:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navegation"
        android:layout_width="409dp"
        android:layout_height="?attr/actionBarSize"
        app:menu="@menu/bottom_menu"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginBottom="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <fragment
        android:id="@+id/fragment_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="409dp"
        android:layout_height="672dp"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginBottom="1dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navegation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_fragment" />
</android.support.constraint.ConstraintLayout>

Agregando el control de los fragmentos.

Un paso muy importante, es poder hacer que cada fragmento se abra con un ítem de la bottom navegation.

Hasta aquí ya configuramos al Menú para que se encargue de elegir el fragmento que se abrirá. Solamente nos falta dejar que realice esa acción.

Así que en el código de la MainActivity, vamos a crear un controlador para indicar que la selección de fragmentos se haga mediante la BottomNavegation, que a su vez tiene el Menú “bottom_menu” con los fragmentos seleccionados.

El código lo podemos escribir en el método onCreate(), el código es el siguiente:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    BottomNavigationView navView = findViewById(R.id.bottom_navegation);    
    NavController navController = Navigation.findNavController(this, R.id.fragment_host);
    NavigationUI.setupWithNavController(navView, navController);
}

Simplemente relacionamos las variables en el código con los elementos en xml, e indicamos que el control de los fragmentos se hace mediante la Bottom Navegation.

Con esto, si probamos la app, veremos como el menú realmente funciona. Podemos cambiar de un fragmento a otro presionando los botones de la bottom navegation.

NOTA: Si nos marca un error debemos cambiar la versión de Kotlin, en el código de la app.

Título del fragmento en la ActionBar.

Por último podemos configurar que el título de cada fragmento aparezca en la barra superior, llamada Action Bar o Toolbar.

Para esto, escribimos el siguiente código en la MainActivity.

El código en la Main Activity es el siguiente:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    BottomNavigationView navView = findViewById(R.id.bottom_navegation);

    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
            R.id.fragment_1, R.id.fragment_2, R.id.fragment_3, R.id.fragment_4, R.id.fragment_5)
            .build();
    NavController navController = Navigation.findNavController(this, R.id.fragment_host);
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
    NavigationUI.setupWithNavController(navView, navController);
}

Con esto ya funciona la bottom navegation.

Para más tutoriales de Android puedes ver la sección de Android Studio.