¿Cómo implementar SuperBottomBar en la aplicación de Android?

En este artículo, vamos a implementar la navegación inferior como en Spotify. Todos nos hemos encontrado con aplicaciones que tienen una barra de navegación inferior. Algunos ejemplos populares incluyen Instagram, Snapchat, etc. En este artículo, aprendamos cómo implementar una barra de navegación inferior funcional SuperBottomBar fácil y elegante en la aplicación de Android. Para crear una barra de navegación inferior básica, consulte Barra de navegación inferior en Android . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia y el repositorio de JitPack

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.github.ertugrulkaragoz:SuperBottomBar:0.4’

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

todos los proyectos {

 repositorios {

   …

   experto {url «https://jitpack.io»}

     }

}

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.  

Paso 3: trabajar con el archivo de menú

Consulte Cómo crear una carpeta de menú y un archivo de menú en Android Studio y cree un archivo de menú. A continuación se muestra el código para el archivo menu.xml .

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_super_bottom_bar"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" />
  
    <item
        android:id="@+id/radio_super_bottom_bar"
        android:icon="@drawable/ic_message_black_24dp"
        android:title="Chat" />
  
    <item
        android:id="@+id/search_super_bottom_bar"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="Search" />
  
    <item
        android:id="@+id/library_super_bottom_bar"
        android:icon="@drawable/ic_library_books_black_24dp"
        android:title="Book" />
  
    <item
        android:id="@+id/profile_super_bottom_bar"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="Profile" />
      
</menu>

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?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:gravity="bottom"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <me.ertugrul.lib.SuperBottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:sbb_menu="@menu/menu" />
  
</LinearLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. Acabamos de establecer un oyente en BottomBar.

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import me.ertugrul.lib.OnItemSelectedListener;
import me.ertugrul.lib.SuperBottomBar;
  
public class MainActivity extends AppCompatActivity {
      
    SuperBottomBar botttomBar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initialise the layout
        botttomBar = findViewById(R.id.bottomBar);
          
        // when we click on any item the show the toast message as selected
        botttomBar.setOnItemSelectListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelect(int i) {
                Toast.makeText(MainActivity.this, "Selected", Toast.LENGTH_LONG).show();
            }
        });
    }
}

Producción: