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:
A continuación implementaremos el BottomNavigationView en un proyecto android:
Necesitamos:
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
Ejecuta y listo:
enjoy!!!
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! :)
En post anteriores se vio algunos conceptos y ejemplos de lo que es el patrón MVC, dando un paso más adelante ahora con...
Última parte del tutorial «Mapas interactivos HTML5», vamos uniendo todo todo el código. En la parte 5 de este tutorial,...
Hace tiempo pidieron un video tutorial sobre como crear sus propios componentes swing java, lamentablemente debo decir q...
En este post te hablaremos sobre una interesante herramienta para le lectura y edición de metadatos que no te debe de fa...
En este post dejo una forma de como utilizar imágenes en un JTable ademas de implementar MouseListener para realizar dif...
En esta oportunidad, se deja a disposición de la comunidad de programadores de Bolivia y también porque no, del que quie...
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...