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!!!
Agregar una imagen a un jpanel o a un jframe no es complicado pero para un programador novato puede convertirse en todo[...]
La clase Canvas (Lienzo) de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para[...]
MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde[...]
Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ[...]
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[...]
JavaFX un producto de Sun Microsystems/Oracle Corporation que salio a la luz para competir con tecnologías como Flash o[...]