Cómo programar una barra de navegación inferior para una aplicación de Android

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image — What You'll Be Creating

El equipo de Material Design de Google define la funcionalidad de las barras de navegación inferiores en Android de la siguiente manera:

Las barras de navegación inferiores facilitan explorar y cambiar entre las vistas de nivel superior en un solo toque.

Al tocar en el icono de navegación inferior, accederás directamente a la vista asociada o actualizarás la vista actualmente activa.

De acuerdo con las pautas oficiales de Material Design para la barra de navegación inferior, se debe usar cuando tu aplicación tenga:

De tres a cinco destinos de alto nivel
Destinos que requieren acceso directo

Un ejemplo de una aplicación popular que implementa la barra de navegación inferior es la aplicación Google+ Android de Google, que lo usa para navegar a diferentes destinos de la aplicación. Puedes verlo tu mismo descargando la aplicación Google+ de la tienda Google Play (si todavía no la tienes en tu dispositivo). La siguiente captura de pantalla es de la aplicación de Google+ que muestra una barra de navegación inferior.

En esta publicación, aprenderás a mostrar los elementos del menú dentro de la barra de navegación inferior en Android. Utilizaremos la API BottomNavigationView para realizar la tarea. Para una bonificación adicional, también aprenderás a usar la función de plantillas de Android Studio para iniciar rápidamente tu proyecto con una barra de navegación inferior.

Puedes encontrar un proyecto de muestra (en Kotlin) para este tutorial en nuestro repositorio de GitHub para que puedas seguirlo fácilmente.

Requisitos previos

Para poder seguir este tutorial, necesitarás:

Android Studio 3.0 o superior
Plugin de Kotlin 1.1.51 o superior

1. Crear un proyecto en Android Studio

Ejecuta Android Studio y crea un nuevo proyecto (puedes llamarlo BottomNavigationDemo) con una actividad vacía llamada MainActivity. Asegúrate de marcar también la casilla de verificación Incluír el soporte de Kotlin.

2. Agregando el BottomNavigationView

Para comenzar a utilizar BottomNavigationView en tu proyecto, asegúrate de importar el soporte de diseño y también el artefacto de soporte de Android. Añádelos al archivo build.gradle de tu módulo para importarlos.

1	dependencies {
2	implementation 'com.android.support:design:27.0.2'
3	}

Además, visita tu archivo res/layout/activlty_main.xml para incluir el widget BottomNavigationView. Este archivo de diseño también incluye un RestraintLayout y un FrameLayout. Ten en cuenta que FrameLayout servirá como contenedor o marcador de posición para los diferentes fragmentos que se colocarán en él cada vez que se haga clic en un elemento del menú en la barra de navegación inferior. (Vamos a llegar a eso en breve).

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="https://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="com.chikeandroid.bottomnavigationdemo.MainActivity">

    <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation"/>

</android.support.constraint.ConstraintLayout>

Aquí hemos creado un widget BottomNavigationView con el id navigationView. La documentación oficial dice que:

BottomNavigationView representa una barra de navegación inferior estándar para la aplicación. Es una implementación de material design para la navegación inferior.

Las barras de navegación inferiores facilitan a los usuarios explorar y cambiar entre las vistas de nivel superior en un solo toque. Se debe usar cuando la aplicación tiene entre tres y cinco destinos de nivel superior.

Los atributos importantes que debes tener en cuenta que se agregaron a nuestro BottomNavigationView son:

app:itemBackground este atributo establece el fondo de nuestros elementos del menú para el recurso dado. En nuestro caso, simplemente le dimos un color de fondo.
app:itemIconTint establece el tinte que se aplica a los iconos de los elementos de nuestro menú.
app:itemTextColor establece los colores a usar para los diferentes estados (normal, seleccionado, enfocado, etc.) del texto del elemento de menú.

Para incluir los elementos del menú en la barra de navegación inferior, podemos usar atributo app:menu con un valor que apunta a un archivo de recursos de menú.

1	<android.support.design.widget.BottomNavigationView
2	app:menu="@menu/navigation"/>

Aquí está el archivo de recurso del menú res/menu/navigation.xml:

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

    <item
            android:id="@+id/navigation_songs"
            android:icon="@drawable/ic_music_note"
            android:title="Songs"/>

    <item
            android:id="@+id/navigation_albums"
            android:icon="@drawable/ic_album"
            android:title="Albums"/>

    <item
            android:id="@+id/navigation_artists"
            android:icon="@drawable/ic_person"
            android:title="Artists"/>

</menu>

Aquí hemos definido un Menu usando la etiqueta <menu> que sirve como un contenedor para los elementos <item> del menú. Un crea un MenuItem, que representa un solo elemento en un menú. Como puedes ver, cada <item> tiene una identificación, un ícono y un título.

3. Inicialización de componentes

Ahora, vamos a inicializar una instancia de BottomNavigationView. La inicialización ocurrirá dentro de onCreate() en MainActivity.kt.

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    lateinit var toolbar: ActionBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        toolbar = supportActionBar!!
        val bottomNavigation: BottomNavigationView = findViewById(R.id.navigationView)
    }
}

4. Probando la aplicación

¡Ahora podemos ejecutar la aplicación!

First demo app showing bottom navigation

Como puedes ver, nuestra barra de navegación se muestra en la parte inferior de la pantalla de la aplicación. No sucederá nada si haces clic en cualquiera de los elementos de navegación que hay allí; vamos a manejar esa parte en la siguiente sección.

5. Configuración de los eventos clic

Ahora, veamos cómo configurar los eventos clic para cada uno de los elementos en la barra de navegación inferior. Recuerda que al hacer clic en cualquier elemento de allí debe llevar al usuario a un nuevo destino en la aplicación.

// ...
    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_songs -> {
                
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_albums -> {
             
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_artists -> {
                
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
// ...     

Aquí llamamos al método setOnNavigationItemSelectedListener. Esto es lo que hace según la documentación oficial:

Establece un receptor que recibirá una notificación cuando se seleccione un elemento de navegación inferior.

Utilizamos la expresión when para realizar diferentes acciones en función del elemento del menú en el que se hizo clic, los ids del elemento de menú sirven como constantes para la expresión when. Al final de cada when, devolvemos true.

Luego pasamos nuestro receptor mOnNavigationItemSelectedListener a setOnNavigationItemSelectedListener() como argumento.

Ten en cuenta que hay otro método similar llamado setOnNavigationItemReselectedListener, que recibirá una notificación cuando se vuelva a seleccionar el elemento de navegación inferior seleccionado actualmente.

A continuación, vamos a crear las diferentes páginas (o Fragmentos) para cada uno de los elementos del menú en el panel de navegación, de modo que cuando se haga clic o se toque un elemento del menú, se muestre un Fragmento o página de Android diferente.

6. Creando los Fragmentos (Páginas)

Comenzaremos con la clase SongsFragment.kt, y debes seguir un proceso similar para las dos clases de fragmentos restantes: AlbumsFragment.kt y ArtistsFragment.kt.

Aquí está mi SongsFragment.kt:

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class SongsFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_songs, container, false)

    companion object {
        fun newInstance(): SongsFragment = SongsFragment()
    }
}

También, aquí está mi R.layout.fragment_songs:

<?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"
              android:orientation="vertical">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Songs"
            android:gravity="center_vertical|center_horizontal"/>

</LinearLayout>

7. Lanzar los fragmentos

Cuando se hace clic en cualquiera de los elementos del menú, abrimos el Fragmento correspondiente y también cambiamos el título de la barra de acciones.

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_songs -> {
            toolbar.title = "Songs"
            val songsFragment = SongsFragment.newInstance()
            openFragment(songsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_albums -> {
            toolbar.title = "Albums"
            val albumsFragment = AlbumsFragment.newInstance()
            openFragment(albumsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_artists -> {
            toolbar.title = "Artists"
            val artistsFragment = ArtistsFragment.newInstance()
            openFragment(artistsFragment)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

private fun openFragment(fragment: Fragment) {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.container, fragment)
    transaction.addToBackStack(null)
    transaction.commit()
}

Aquí estamos usando un método llamado openFragment() que simplemente usa FragmentTransaction para agregar nuestro fragmento a la UI.

¡Ahora ejecuta el proyecto nuevamente para ver cómo funciona todo!

Cada vez que hagas clic en cualquier elemento del menú, llevarás al usuario a un nuevo Fragmento.

Ten en cuenta que cuando tenemos más de cuatro elementos de menú en la barra de navegación inferior, es decir. en BottomNavigationView, entonces el sistema Android automáticamente habilita el modo de cambio. En este modo, cuando se hace clic en cualquiera de los elementos del menú, los demás elementos a la derecha o a la izquierda del elemento cliqueado se desplazan.

8. Bonificación: usando las plantillas de Android Studio

Ahora que ya aprendiste sobre las API involucradas para crear una barra de navegación inferior desde cero en Android, te mostraré un atajo que te ayudará la próxima vez. Simplemente puedes usar una plantilla en lugar de codificar una barra de navegación desde cero.

Android Studio proporciona plantillas de código que siguen las mejores prácticas de diseño y desarrollo de Android. Estas plantillas de códigos existentes (disponibles en Java y Kotlin) pueden ayudarte a poner en marcha rápidamente tu proyecto. Una de esas plantillas se puede usar para crear una barra de navegación inferior.

Para utilizar esta práctica función para un nuevo proyecto, primero inicia Android Studio.

Ingresa el nombre de la aplicación y haz clic en el botón Siguiente. Puedes dejar los valores predeterminados tal como están en el cuadro de diálogo Target Android Devices.

Haz clic en el botón Siguiente nuevamente.

En el cuadro de diálogo Agregar una actividad al dispositivo móvil, selecciona Actividad de navegación inferior. Haz clic en el botón Siguiente nuevamente después de eso.

En el último cuadro de diálogo, puedes cambiar el nombre de la Actividad o cambiar su nombre o título de diseño si lo deseas. Finalmente, haz clic en el botón Finalizar para aceptar todas las configuraciones.

Android Studio ahora nos ha ayudado a crear un proyecto con una actividad de navegación inferior. ¡Realmente genial!

Se recomienda encarecidamente explorar el código generado.

En un proyecto existente de Android Studio, para usar esta plantilla, simplemente ve a Archivo > Nuevo > Actividad > Actividad de navegación inferior.

Navigation from file menu to Bottom Navigation Activity

Ten en cuenta que las plantillas que vienen incluidas con Android Studio son buenas para diseños simples y para hacer aplicaciones básicas, pero si realmente quieres poner en marcha tu aplicación, puedes considerar algunas de las plantillas de aplicaciones disponibles en Envato Market.

Son un gran ahorro de tiempo para desarrolladores experimentados, ayudándoles a superar el reto de crear una aplicación desde cero y enfocar sus talentos en las partes únicas y personalizadas de la creación de una nueva aplicación.

Conclusión

En este tutorial, aprendiste a crear una barra de navegación inferior en Android utilizando la API BottomNavigationView desde cero. También exploramos cómo usar fácil y rápidamente las plantillas de Android Studio para crear una actividad de navegación inferior.

Recomiendo consultar las directrices oficiales de Material Design para la barra de navegación inferior y así obtener más información sobre cómo diseñar y usar correctamente la barra de navegación inferior en Android.

Para obtener más información sobre la programación en Android, consulta algunos de nuestros otros cursos y tutoriales aquí en Envato Tuts +.

1	// ...
2	private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
3	when (item.itemId) {
4	R.id.navigation_songs -> {
5
6	return@OnNavigationItemSelectedListener true
7	}
8	R.id.navigation_albums -> {
9
10	return@OnNavigationItemSelectedListener true
11	}
12	R.id.navigation_artists -> {
13
14	return@OnNavigationItemSelectedListener true
15	}
16	}
17	false
18	}
19
20	override fun onCreate(savedInstanceState: Bundle?) {
21	// ...
22	bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
23	}
24	// ...