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

Actualizar JComboBox al cambiar valor de otro JComboBox

Cuando se trabaja con base de datos, estos datos son dinámicos, cambian con el tiempo y es necesario que esos cambios se[...]

JCPanel 3.0

Nueva versión de un viejo proyecto swing «JCMousePanel» que nos permitía agregar imágenes en los contenedores JPanel. En[...]

Conversor de Audio y Video (GRATUITO)

Shutter Encoder es un software de conversión de video el cual tambien maneja audio e imagenes. Su interfaz de usuario ha[...]

Libreria Tojorí – Java/MySQL

Tojorí es una libreria Java/Mysql para la creación de aplicaciones de base de datos utilizando el IDE de Netbeans desde[...]

Subir imagen a un servidor web con REST/JSON

En este tutorial crearemos una sencilla aplicación para android que nos permitirá subir una imagen a un servidor web. La[...]

Introducción a la internacionalización de aplicaciones

La internacionalización permite a las aplicaciones adaptarse a los diferentes idiomas y regiones sin necesidad de cambio[...]