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!!!
easyUML es una herramienta para crear diagramas UML para NetBeans de forma visual. Adecuado para el aprendizaje de este[...]
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[...]
En un tutorial anterior se creo un WebServices [Java WebServices] utilizando java y Netbeans, en esta ocasión se da cont[...]
En este tuto realizaremos la implementación y ejecución de procedimientos almacenados de MySQL en Java, si quieres darle[...]
Un ProgressDialog muestra una ventana con un texto y una barra de progreso que indica el tiempo que tarda una tarea en r[...]
MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales. Estos s[...]