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

Componente swing jcMousePanel v1.6.9

Agregar una imagen a un jpanel o a un jframe no es complicado pero para un programador novato puede convertirse en todo[...]

Dibujando con Canvas

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para[...]

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde[...]

Introducción a Scene Builder y MVC (Parte II)

Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ[...]

Criba de Eratóstenes animado

Eratóstenes era un matemático griego del siglo  III a.C. el cual ideó una manera rápida de obtener todos los números pri[...]

Reproducir video en JFrame Swing con JavaFX

JavaFX un producto de  Sun Microsystems/Oracle Corporation que salio a la luz para competir con tecnologías como Flash o[...]