Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
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:

navigation sample

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.

gradle dependencias

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:

navigation view bolivia

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

Ejecuta y listo:

navegacion barra

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Biblioteca java para leer/escribir Metadatos

Biblioteca java para leer/escribir Metadatos

En posts anteriores hablamos sobre los metadatos y el porque son importantes en la Seguridad Informática, vimos el manej...

Proyecto Ascii Art (metodo de Black/white)

Proyecto Ascii Art (metodo de Black/white)

El Ascii Art o Arte Ascii, consiste en realizar dibujos con los caracteres ASCII (Código Americano Estándar de Intercamb...

Sumar 2 numeros

Sumar 2 numeros

Una vez que terminamos el obligatorio 🙂 «Hola mundo«, podemos crear aplicaciones un tanto más elaboradas, pero para nada...

Código de Control en PHP v7.0 Bolivia

Código de Control en PHP v7.0 Bolivia

NUEVA ESPECIFICACIÓN TÉCNICA DEL CÓDIGO DE CONTROL (Ver.7.0) En el marco del Nuevo Sistema de Facturación implementado p...

Autenticación de usuarios bajo el patrón MVC

Autenticación de usuarios bajo el patrón MVC

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales.  Estos s...

Tomar fotos con la camara y guardar en la sdcard

Tomar fotos con la camara y guardar en la sdcard

En este post realizaremos una aplicación android que hará uso de la cámara del celular para tomar una foto y guardarla e...

Comparte lo que sabes

Categorias

Últimas entradas

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

FFmpeg es una colección de software libre capaz de decodificar, codificar, transcodificar, mux, demux, transmitir, filtr...

The Age of AI o «La era de la Inteligencia Artificial»,  es una serie de 8 documentales de Youtube Original, presentados...

La comunidad 3D Buzz  era una de los lugares donde la gente curiosa de aprender a realizar videojuegos buscaba recursos...

Herramientas

Generador de Enlaces a Whatsapp