Barra de navegación en Android utilizando la librería Bottom Bar

Hoy vamos a discutir sobre cómo crear una barra de navegación en Android utilizando la librería Bottom Bar. Las barras de navegación de Android o Bottom Bar es un menú secundario situado encima de la barra de navegación de Android que se utiliza para proporcionar una navegación rápida al usuario a las páginas o secciones más utilizadas de una aplicación, como puedes ver en la imagen de abajo.

Utilizaremos la librería Bottom Bar para este tutorial que imita el patrón de navegación inferior del Material Design de Google. Dicho todo esto, vamos a empezar:

Crear barra de navegación en Android

Gradle configurará tu proyecto y resolverá las dependencias. Una vez finalizado, deberás proceder a los siguientes pasos:

• Ve a File >> New >> New Project e introduce el nombre de tu aplicación
• Introduce el dominio de tu empresa, el cual utilizaremos únicamente para identificar el paquete de tu App
• Escoge la ubicación del proyecto y el SDK, y en la siguiente pantalla escoge Empty Activity, ya que añadiremos la mayor parte del código nosotros mismos. A continuación, haz clic en Siguiente.
• Selecciona el nombre de la actividad. Asegúrate que la casilla Layout File está seleccionada, de lo contrario tendremos que generar el Layout nosotros mismos. Haz clic en Finish. Hemos utilizado como nombre de actividad MainActivity ya que esta será nuestra screen por defecto y lo que verá el usuario por primera vez cuando abra la app.

Ahora abre el build.gradle de tu proyecto y agrega la siguiente dependencia.

build.gradle

compile 'com.roughike:bottom-bar:2.0'

Añade la BottomBar en el Layout de la App

Abre activity_main.xml y añade el siguiente código. Tenemos dos text views, uno para mostrar el Name y otro para mostrar el Email del usuario logueado.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="300dp"
        android:textStyle="bold"
        android:gravity="center_horizontal"/>
    </FrameLayout>
    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/navigation_bar_menu"
        app:bb_behavior="underNavbar"/>
</RelativeLayout>

Crear tabs, recursos drawables y estilos para el Bottom Bar

navigation_bar_menu.xml

<tabs>
    <tab
        id="@+id/tab_calls"
        icon="@drawable/ic_calls"
        title="Calls"
        activeColor="@color/colorAccent"
        />
    <tab
        id="@+id/tab_groups"
        icon="@drawable/ic_groups"
        title="Groups"
        activeColor="@color/colorAccent" />
    <tab
        id="@+id/tab_chats"
        icon="@drawable/ic_chats"
        title="Chats"
        activeColor="@color/colorAccent"/>
</tabs>

Hemos utilizado los siguientes drawables para las tres opciones del menú.

• Crea un nuevo fichero XML llamado navigation_bar_menu.xml y añade lo siguiente.
• Descarga el código fuente para este Android Navigation Bar Menu App y añade los drawables del código fuente en tus carpetas drawables.
• Define un estilo hijo del tema principal de tu aplicación.

res/values-v21/styles.xml

<style name="AppTheme.TransNav" parent="AppTheme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

Para evitar fallos en versiones anteriores a Lollipop, crea una versión de stub del mismo tema.

res/values/styles.xml

<style name="AppTheme.TransNav" parent="AppTheme" />

Aplica el tema en AndroidManifest.xml para tu Actividad

AndroidManifest.xml

<activity android:name=".MainActivity" android:theme="@style/AppTheme.TransNav" />

Añadiendo la funcionalidad a MainActivity

private TextView textView;
private BottomBar bottomBar;

@Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     textView = (TextView)findViewById(R.id.textView);

     bottomBar = (BottomBar) findViewById(R.id.bottomBar);
     bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
         @Override
         public void onTabSelected(@IdRes int tabId) {
             if (tabId == R.id.tab_calls) {
                 // The tab with id R.id.tab_calls was selected,
                 // change your content accordingly.
                 textView.setText("Your Calls");
             } else if (tabId == R.id.tab_groups) {
                 // The tab with id R.id.tab_groups was selected,
                 // change your content accordingly.
                 textView.setText("Your Groups");
             } else if (tabId == R.id.tab_chats) {
                 // The tab with id R.id.tab_chats was selected,
                 // change your content accordingly.
                 textView.setText("Your Chats");
             }
         }
     });
 }

Ahora, ejecuta la aplicación y haz clic en choose options en la barra de navegación de Android o Bottom Bar. Esto reflejará la opción de menú seleccionada en el TextView.

Fuente: Andy Point