Buen día.
Me presento, soy Carlos Fernando Pinzón, ingeniero químico y muy atraído por el desarrollo de aplicaciones móviles en Android, en ésta primera oportunidad escribiendo mi primer tutorial en Platzi voy a relatar cómo implementé el BottomNavigationView con la librería de soporte que proporciona Android Stuido a diferencia del video 34 del curso “Creando nuestros fragments” donde la excelente profesora Anahí implementa ésta vista desde una librería extraida en Github.
Como primer paso debemos asegurarnos que tenemos la librería de soporte que nos permite implementar y trabajar con ésta vista en nuestro proyecto, investigué en qué revisión de la librería de soporte se añadió ésta vista a la librería siguiendo la ruta:
https://developer.android.com/index.html >>Develop >> Bibliotecas >> Bibliotecas de Compatibilidad >> Historial de revisión >> Recent revisions >> Revision Archive >> y en la parte derecha seleccionamos la revisión 25.0.0 >> en la sección de new APIs podemos ver:
Se añadió para Octubre del 2016, por lo tanto como siguiente paso es revisar cuál librería tengo en mi proyecto, para ello abrimos nuestro archivo gradle y en dependencias buscamos la libreria de soporte:
En mi caso es una versión superior a la librería en la cual se implementó la vista por parte de Android, por lo cual entiendo que puedo estár seguro que la tengo disponible para mi proyecto.
Otra forma que a mí se me ocurrió(si me equivoco, corregirme) basándome en un tip que Anahí me enseñó fue cambiar la vista de android que se encuentra al lado izquierdo de Android Studio por project, y buscando en la pestaña de external libraries >>design-25.2.0 >> widget >>BottomNavigationView, como se verá en la imagen, tendremos :
En la parte de la derecha tendremos comentados una introducción a la vista y un link que hace referencia a las reglas de material design que se recomienda para éste tipo de vista, con lo cual volvemos a confirmar que tenemos la clase lista para trabajar en nuestra aplicación Platzigram.
Seguros de nuestra librería de soporte, procedemos a crear la activity contenedora , los fragments y el recurso xml (bottombar.xml) dónde diseñaremos nuestro BottomNavigationView, en éste último escribimos el siguiente código
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.BottomNavigationViewxmlns: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:itemIconTint="@drawable/bottombar_selector"app:itemTextColor="@drawable/bottombar_selector"app:menu="@menu/bottom_navigation_main_menu"android:background="@color/colorPrimaryDark"></android.support.design.widget.BottomNavigationView>Cabe destacar dos cosas:
Empecemos por el número 1
Necesitamos implementar un comportamiento en cada opción de nuestra vista, el cual cambie de color cuando la opción sea marcada o desmarcada, ésto se logra con un selector creado dentro de la carpeta drawable (bottombar_selector.xml), el código es:
<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="@android:color/white"android:state_checked="true"/><itemandroid:color="@color/colorPrimary"android:state_checked="false"/></selector>En alguna fuente encontré que el estado lo manejaron con enabled, lo cual es erroneo porque enabled hace referencia a si la opción está habilitada y como por default siempre va a estar habilitada el color nunca va a cambiar, por lo tanto se usa state_checked.
Segundo.
El menú se infla desde un paquete llamado menú que pertenece a res y dentro de menú creé el archivo bottom_navigation_main_menu.xml cuyo código es:
<?xml version="1.0" encoding="utf-8"?><menuxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/search"android:title="@string/bottombar_search"app:showAsAction="ifRoom"android:icon="@drawable/ic_search"></item><itemandroid:id="@+id/home"android:title="@string/bottombar_home"app:showAsAction="ifRoom"android:icon="@drawable/ic_home"></item><itemandroid:id="@+id/profile"android:title="@string/bottombar_profile"app:showAsAction="ifRoom"android:icon="@drawable/ic_user"></item></menu>Una vez se tiene el menú y toda la vista del bottombar.xml lista, se incluye a la activity que la va a contener con la sentencia include que Anahí nos enseñó y listo!!!
Aquí relato las diferencias de mi camino para implementar la vista con respecto al camino que tomó nuestra excelente profesora Anahí en el video de la clase, espero haya sido de su agrado y entendimiento.
Muchas gracias 😃
Twitter: @ChemicAlgorithm
Github: cafer89
fuentes
https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0
https://github.com/segunfamisa/bottom-navigation-demo/blob/master/app/src/main/java/com/segunfamisa/sample/bottomnav/MainActivity.java
https://gist.github.com/hitherejoe/cc0dbc84c5397ee630d0b9298112d54c#file-selector-xml
https://www.youtube.com/watch?v=wcE7IIHKfRg
https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-style
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html#lattrs
Mi bottombar se queda arriba en top incluso con la propiedad gravity en bottom|end