0

Creando nuestro BottomNavigationView

Nathaly Stefani
Nasterb
33834

En la clase 34 del Curso Definitivo de Android se lleva acabo la creación del BottomBar que se implementa en PlatziGram. Para los que tenemos versiones en AndroidStudio iguales o posteriores al SDK 25.2.2, tendremos la librería oficial de BottomNavigationView, por lo cual no tendremos que utilizar la librería no oficial desde GitHub.

En este tutorial se describe el procedimiento para crear nuestra BottomNavigationView utilizando la librería oficial:

1. Debes verificar que la versión del SDK sea posterior a la v. 25.2.2. Esto lo visualizas en build.gradle(Module:app)

2. Creamos un layout al cual nombraremos bootombar.xml y dentro colocamos lo siguiente:

<android.support.design.widget.bottomnavigationview xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/bottombar" android:layout_width="match_parent" android:layout_height="@dimen/bottombar_height" android:layout_alignparentbottom="true" android:layout_gravity="bottom|end" app:itembackground="@color/colorPrimary" app:itemicontint="@drawable/bottombar_selector" app:itemtextcolor="@drawable/bottombar_selector" app:menu="@menu/menu_navigation"></android.support.design.widget.bottomnavigationview>

Como se observa en el código anterior, debemos crear dos archivos auxiliares:

  • @menu/menu_navigation En este archivo generaremos los iconos que se muestran en el BottomBar con sus respectivos títulos.

  • @drawable/bottombar_selector En este archivo configuraremos los colores (tanto de los iconos como de los títulos) teniendo en cuenta el estado
    del BottomBar.

3. Para crear @menu/menu_navigation damos clic derecho en la carpeta res->New->Android Resource File y colocamos:

File Name: menu_navigation
Root Element: Menu

En el archivo que se genera, colocamos:

Para generar los iconos directamente desde AndroidStudio damos clic derecho en la carpeta app->New->Icon Pack Drawable Importer.

Desde aquí, buscamos y agregamos los iconos ic_search, ic_home y ic_person, siempre teniendo en cuenta que el tamaño debe ser de

24dp.

4. Para crear @drawable/bottombar_selector damos clic derecho en la carpeta drawable->New->Drawable Resource File y colocamos:

File Name: bottombar_selector

En el archivo que se genera, colocamos:

5. Integramos bottombar.xml a activity_container.xml con la siguiente línea de código:

6. Por último, para conectar el Login con el Container cuando se dé clic en el botón LOGIN, realizamos el siguiente Intent:
En activity_login.xml ubicamos la etiqueta Button correspondiente a LOGIN y añadimos:

< android:onClick="goHome" />`

En LoginActivity.java creamos el método goHome:

	<
	publicvoidgoHome(View view){
   			Intent intent = new Intent(this, ContainerActivity.class);
    		startActivity(intent);
		}
	>

¡Y con esto, ya podemos emular nuestro proyecto y visualizar nuestra BottomNavigationBar!

BottomNavigationBar.png
Escribe tu comentario
+ 2