Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / Material Design: BottomNavigationView

Material Design: BottomNavigationView

Por 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

Artículos similares

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi[...]

Crear Helpers en Laravel 10

El archuivo helpers.php en Laravel contiene funciones globales de PHP los cuales se pueden utilizar en cualquier parte d[...]

Gestión de productos – El modelo (Parte 4)

En la estructura del proyecto, nuestro modelo mvc esta compuesto por tres paquetes, la vista, el modelo y controlador. L[...]

Conexion Access con PHP

Para poder conectar PHP con una base de datos de microsoft Access debemos seguir los siguientes pasos: 1. Crea una base[...]

MVC: Modelo, Vista y Controlador en PHP

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien defin[...]

Material Design: Notificaciones (Snackbar)

Material Design introduce una nueva forma de mostrar notificaciones al usuario, estos son los snackbar, similares a los[...]