Barra de navegación inferior en Android

Todos nos hemos encontrado con aplicaciones que tienen una barra de navegación inferior. Algunos ejemplos populares incluyen Instagram, WhatsApp, etc. En este artículo, aprendamos cómo implementar una barra de navegación inferior tan funcional en la aplicación de Android. A continuación se muestra la vista previa de una barra de navegación inferior de muestra:

¿Por qué necesitamos una barra de navegación inferior?

• Permite al usuario cambiar fácilmente a diferentes actividades/fragmentos.
• Hace que el usuario sea consciente de las diferentes pantallas disponibles en la aplicación.
• El usuario puede comprobar en qué pantalla se encuentra en este momento.

El siguiente es un diagrama anatómico de la barra de navegación inferior:

Pasos para crear la barra de navegación inferior

Paso 1: crea un nuevo proyecto de Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . 

Paso 2: Agregar la dependencia al archivo build.gradle(:app)

Usaremos la Biblioteca de diseño de materiales de Android, por lo que debemos importarla en el archivo build.gradle(:app) . Aquí está la dependencia que necesitamos agregar:

implementación ‘com.google.android.material:material:1.2.0’

Paso 3: trabajar con el archivo activity_main.xml

Para este ejemplo, cree una aplicación básica con un FrameLayout y una barra de navegación inferior . FrameLayout   contendrá fragmentos que cambiarán a medida que el usuario haga clic en los elementos de la barra de navegación inferior . Así es como se ve el archivo activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
 
    <FrameLayout
        android:id="@+id/flFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu"/>
     
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: crear un menú para la barra de navegación inferior

La barra de navegación debe tener algunos elementos que se crearán mediante el menú . Para crear un Menú , primero, cree un Directorio de menús haciendo clic en la aplicación -> res (clic con el botón derecho) -> Nuevo -> Directorio de recursos de Android y seleccione Menú en el Tipo de recurso . 

Para crear un archivo de recursos de menú , haga clic en la aplicación -> res -> menú (clic derecho) -> Nuevo -> Archivo de recursos de menú y asígnele el nombre bottom_nav_menu . 

Ahora el usuario puede crear tantos elementos como quiera en el archivo bottom_nav_menu.xml . El usuario también necesita crear un icono para cada uno de estos elementos. Para crear un ícono, haga clic en la aplicación -> res -> dibujable (clic con el botón derecho) -> Nuevo -> Activo de imagen.

En la ventana que se abre, el usuario puede nombrar el ícono como quiera, pero no debe contener ninguna letra mayúscula . El usuario puede seleccionar el ícono que desea buscándolo y cuando el usuario haya terminado, haga clic en Siguiente -> Finalizar. 

Ahora agregue estos elementos en bottom_nav_menu.xml . Así es como se ve el archivo bottom_nav_menu.xml después de agregar los elementos:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/person"
        android:title="Person"
        android:icon="@drawable/ic_person_foreground"/>
    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/ic_home_foreground"/>
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings_foreground"/>
</menu>

Paso 5: cambiar el estilo de la barra de acción

Dado que estamos utilizando la Biblioteca de diseño de materiales de Google , debemos cambiar el estilo de la barra de acción para usar la misma biblioteca; de lo contrario, la barra de navegación inferior será negra y sus elementos serán invisibles. Para cambiarlo, navegue a estilos.xml haciendo clic en la aplicación -> res -> valores -> estilos.xml y cambie la etiqueta de apertura de  estilo como:

 <nombre de estilo=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>

Así es como se ve el archivo styles.xml : 

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>

Paso 6: Creación de fragmentos para mostrar 

Ahora que tenemos nuestra barra de navegación inferior, nos gustaría que sea funcional llevándonos a un fragmento/actividad diferente cuando se hace clic en un elemento. En este ejemplo, cree un fragmento para cada elemento y navegue hasta ellos cada vez que haga clic en un elemento correspondiente. Dado que creamos tres elementos en la barra de navegación inferior, crearemos tres fragmentos. Para crear un Fragmento, haga clic en la aplicación (clic derecho) -> Nuevo -> Fragmento -> Fragmento (en blanco) . Nombre el fragmento como FirstFragment y el archivo XML correspondiente como fragment_first . Para simplificar las cosas, los tres fragmentos solo contendrán un TextView. Sin embargo, podemos modificar esto como queremos que esté en la aplicación. Así es como se ve fragment_first.xml después de agregar un TextView :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
 
    <TextView
        android:id="@+id/firstFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Geeks for Geeks"
        android:textColor="#43a047"
        android:textSize="40sp"
        android:textStyle="italic|bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

A continuación, codifique FirstFragment para mostrar fragment_first.xml . Para esto, elimine todo el código escrito previamente en FirstFragment y reemplácelo con el código a continuación. El siguiente código solo toma el diseño que creamos para nuestro fragmento y lo infla. 

Nota: si queremos que nuestro fragmento tenga alguna lógica o realice alguna tarea, agregaremos ese código en nuestro FirstFragment.

import androidx.fragment.app.Fragment
 
class FirstFragment:Fragment(R.layout.fragment_first) {
}

import java.io.*;
import androidx.fragment.app.Fragment
 
public class FirstFragment extends Fragment {
 
    public FirstFragment(){
        // require a empty public constructor
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false);
    }
}

Del mismo modo, cree dos fragmentos más para los dos elementos restantes. A continuación se encuentran los archivos fragment_second.xml, SecondFragment, fragment_third.xml y ThirdFragment respectivamente. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
 
    <TextView
        android:id="@+id/secondFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Data Structures"
        android:textColor="#43a047"
        android:textSize="40sp"
        android:textStyle="italic|bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

import androidx.fragment.app.Fragment
 
class SecondFragment:Fragment(R.layout.fragment_second) {
}

import androidx.fragment.app.Fragment;
import java.io.*;
 
public class SecondFragment extends Fragment {
 
    public SecondFragment(){
        // require a empty public constructor
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
 
    <TextView
        android:id="@+id/thirdFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Algorithms"
        android:textColor="#43a047"
        android:textSize="40sp"
        android:textStyle="italic|bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

import androidx.fragment.app.Fragment
 
class ThirdFragment:Fragment(R.layout.fragment_third) {
}

import androidx.fragment.app.Fragment;
import java.io.*;
 
public class ThirdFragment extends Fragment {
 
    public ThirdFragment(){
        // require a empty public constructor
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
        return inflater.inflate(R.layout.fragment_third, container, false);
    }
}

Paso 7: trabajar con el archivo MainActivity 

Ahora tenemos todo lo que necesitamos y, por último, solo necesitamos codificar MainActivity para conectar todo a la aplicación. Aquí, primero, cree una función llamada que tome un Fragmento como argumento y lo configure en nuestro FrameLayout del archivo activity_main.xml . Agregue un detector de clics a los elementos de la barra de navegación inferior para que mostremos el Fragmento correspondiente cuando se haga clic en un elemento. Después de agregar todos estos códigos, MainActivity se ve así:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val firstFragment=FirstFragment()
        val secondFragment=SecondFragment()
        val thirdFragment=ThirdFragment()
 
        setCurrentFragment(firstFragment)
 
        bottomNavigationView.setOnNavigationItemSelectedListener {
            when(it.itemId){
                R.id.home->setCurrentFragment(firstFragment)
                R.id.person->setCurrentFragment(secondFragment)
                R.id.settings->setCurrentFragment(thirdFragment)
 
            }
            true
        }
 
    }
 
    private fun setCurrentFragment(fragment:Fragment)=
        supportFragmentManager.beginTransaction().apply {
            replace(R.id.flFragment,fragment)
            commit()
        }
     
}

import java.io.*;
import androidx.appcompat.app.AppCompatActivity;
import androidx.annotation.NonNull;
import com.example.Fragment.*;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import android.os.Bundle;
import android.view.MenuItem;
 
public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
 
    BottomNavigationView bottomNavigationView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        bottomNavigationView = findViewById(R.id.bottomNavigationView);
       
        bottomNavigationView.setOnNavigationItemSelectedListener(this);
        bottomNavigationView.setSelectedItemId(R.id.person);
 
    }
    FirstFragment firstFragment = new FirstFragment();
    SecondFragment secondFragment = new SecondFragment();
    ThirdFragment thirdFragment = new ThirdFragment();
 
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
 
        switch (item.getItemId()) {
            case R.id.person:
                getSupportFragmentManager().beginTransaction().replace(R.id.container, firstFragment).commit();
                return true;
 
            case R.id.home:
                getSupportFragmentManager().beginTransaction().replace(R.id.container, secondFragment).commit();
                return true;
 
            case R.id.settings:
                getSupportFragmentManager().beginTransaction().replace(R.id.container, thirdFragment).commit();
                return true;
        }
        return false;
    }
}

Producción: