Index / Android / Material Design: BottomNavigationView

Material Design: BottomNavigationView

Autor jc mouse jueves, junio 8, 2017

BottomNavigationView es una barra de navegación que se sitúa en la parte inferior de la pantalla en los dispositivos móviles. Material Design nos brinda una guía completa para su utilización en «Bottom navigation Guide Line» entre las cuales podemos citar:

BottomNavigationView se sitúa en la parte inferior en celulares y en la parte superior derecha en las tablets o desktop.
Si el BottomNavigationView sera coloreado, los iconos y el texto deben ser de color blanco o negro.
El texto de los labels debe ser corto, no debe ser trucado, es decir «Mis Paginas Favoritas del Viernes» 😉 es incorrecto, «Mis Paginas Fav…» es también incorrecto, lo correcto es «Favoritos» o «Viernes»
Se recomienda que el BottomNavigationView tenga una altura de 56dp, los iconos de 24dp y el texto de 14sp (activo) y 12sp (inactivo) respectivamente

A continuación implementaremos el BottomNavigationView en un proyecto android:

Necesitamos:

Android Studio
3 iconos de 24dp. Descarga gratis desde Material Icons

Paso 1. El Proyecto

Nuestro proyecto base se llamara «BNavigationView» y es el siguiente:

Paso 2. Dependencias

Abre el archivo build,gradle (Module:app) y añade:

compile ‘com.android.support:design:25.3.+’

Presiona Sync y espera unos segundos, si no tenemos problemas podemos continuar.

Paso 3. Menu

BottomNavigationView usa un recurso de menu para los botones de navegación, debemos crear un nuevo menú, para ello:

Clic derecho sobre carpeta «res» → new → android resource directory. En nombre de directorio escribimos «menu»

A continuación, clic derecho sobre la recién creada carpeta «menu» → new → menu resorce file. En File Name escribimos «menu_bnv» y presionamos OK para crear el recurso

Material Design recomienda usar de 3 a 5 items en el BottomNavigationView con iconos de 24 dp, pega tres iconos en la carpeta drawable

Ahora reemplaza el código del archivo menu_bnv por:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_item1"
        android:title="Dinero"
        android:icon="@drawable/ic_attach_money_black_24dp" />
    <item android:id="@+id/action_item2"
        android:title="Llamar"
        android:icon="@drawable/ic_call_black_24dp" />
    <item android:id="@+id/action_item3"
        android:title="Taxi"
        android:icon="@drawable/ic_drive_eta_black_24dp" />
</menu>

donde en android:icon indicamos el nombre de los iconos que descargamos , los tuyos serán diferentes, asi que debes cambiarlos.

Hasta este punto, debemos tener el proyecto de la siguiente forma:

Paso 4. Interfaz

Abre el archivo «Activity_main.xml» y reemplaza el código por:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:padding="0dp"
    android:orientation="vertical"
    tools:context="org.example.bnavigationview.MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <android.support.design.widget.BottomNavigationView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottomNavigationView"
        app:menu="@menu/menu_bnv"
        app:itemBackground="@color/colorPrimary"
        app:itemTextColor="#FFFFFF"
        app:itemIconTint="#FFFFFF"
        app:elevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"/>

</LinearLayout>

Paso 5. Código

Finalmente abre el archivo MainActivity.java y reemplaza por:

package org.example.bnavigationview;

import android.graphics.Color;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private MyFragment fragment;//Fragmento

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


        fragment = new MyFragment();//instancia a Fragment

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.container, fragment);
        transaction.commit();
        //barra de navegacion
        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigationView);
        //listener
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch(item.getItemId()){
                    case R.id.action_item1:
                        fragment.getView().setBackgroundColor(Color.RED);
                        fragment.updateText("El dinero no da la felicidad, ciertamente; pero tampoco es un serio obstáculo.",
                                "#FFFFCF0D");
                        break;
                    case R.id.action_item2:
                        fragment.getView().setBackgroundColor(Color.YELLOW);
                        fragment.updateText("Sabes que estas viejo cuando un fin de semana cualquiera llaman por telefono y ruegas que no sea para ti.","#FFD91E1E");
                        break;
                    case R.id.action_item3:
                        fragment.getView().setBackgroundColor(Color.GREEN);
                        fragment.updateText("La soledad me ha seguido toda mi vida. A todos lados. En las tabernas, en los autos. Por las aceras, en las tienda. Por todos lados. No hay manera de escapar de ella. Dios me hizo un hombre solitario",
                                "#FF0955B9");
                        break;
                }
                return true;
            }
        });

    }//onCreate:end

    /**
     * Clase Fragment
     * */
    public static class MyFragment extends Fragment {

        private TextView tv;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            tv = new TextView(getActivity());
            tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);
            tv.setGravity(Gravity.CENTER);
            return tv;
        }

        public void updateText(String value,String colorHex){
            tv.setText(value);
            tv.setTextColor(Color.parseColor(colorHex));
        }

    }

}//MainActivity:end