¿Qué vista debería usarse para el nuevo diseño de materiales? Navegación inferior?

Estoy seguro de que todos ustedes han escuchado sobre la adición de navegación inferior a las pautas de diseño de materiales. Estoy planeando agregarlo a mi aplicación. Sin embargo, no estoy seguro de cuál es la mejor manera de abordarlo. ¿Qué tipo de vista sería mejor mostrar la barra inferior?

BottomNavigationView es un componente agregado en Google Support Library 25 . Proporciona una navegación rápida entre las vistas de nivel superior dentro de una aplicación. Se debe usar cuando la aplicación tiene de tres a cinco destinos de alto nivel. Mi implementación incluye el cambio entre Fragmentos al Seleccionar los Elementos del Menú.

Agregar a build.gradle de su módulo de proyecto

compile'com.android.support:design:25.3.1' 

Cree el BottomNavigationView en xml de su diseño y proporcione un recurso de menú al mismo:

  

Cree un archivo aquí navigation.xml en la carpeta de recursos del menú. Este archivo se usa para proporcionar MenuItems en BottomNavigationView

        

Con todo en línea, este gran código muestra la BottomBar al ejecutar la aplicación. Ahora configuremos el oyente para los eventos Click OnNavigationItemSelectedListener y OnNavigationItemReselectedListener en los elementos del menú –

 private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.navigation_home: return true; case R.id.navigation_dashboard: return true; case R.id.navigation_notifications: return true; case R.id.navigation_settings: return true; } return true; } }; private BottomNavigationView.OnNavigationItemReselectedListener mOnNavigationItemReselectedListener = new BottomNavigationView.OnNavigationItemReselectedListener() { @Override public void onNavigationItemReselected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.navigation_home: Log.d(TAG, "Navigation Reselected ==="); break; case R.id.navigation_dashboard: Log.d(TAG, "Dashboard Reselected ==="); break; case R.id.navigation_notifications: Log.d(TAG, "Notification Reselected ==="); break; case R.id.navigation_settings: Log.d(TAG, "Settings Reselected ==="); break; } } }; bottomNavigationView.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener); bottomNavigationView.setOnNavigationItemReselectedListener (mOnNavigationItemReselectedListener); 

Si el número de elementos de menú es más de 3, entonces el elemento seleccionado tendrá más espacio en BottomNavView y se ve un poco extraño a partir de ahora, puede ser intencionalmente que Google lo haya mantenido así.

enter image description here

Este comportamiento se define mediante la propiedad ShiftingMode de BottomNavigationView, que no se puede deshabilitar de forma directa a partir de ahora, ya que su api no es pública. Pero hay un camino a través de Reflection para hacerlo:

 BottomNavigationMenuView menuView = (BottomNavigationMenuView) btmNavigationView.getChildAt(0); try { Field shiftingMode = menuView.getClass() .getDeclaredField("mShiftingMode"); shiftingMode.setAccessible(true); shiftingMode.setBoolean(menuView, false); shiftingMode.setAccessible(false); for (int i = 0; i < menuView.getChildCount(); i++) { BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i); item.setShiftingMode(false); //To update view, set the checked value again item.setChecked(item.getItemData().isChecked()); } } catch (NoSuchFieldException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (SecurityException e) { e.printStackTrace(); } 

Después de llamar al código anterior, el resultado es:

enter image description here

Para obtener más información, consulte mi Proyecto Github: https://github.com/pmahsky/BottomNavigationViewDemo

Un LinearLayout con pesos iguales para sus vistas, orientación horizontal. Botones en LinearLayout con drawableTop configurado en el icono de elección.

Agrégalo a la parte inferior:

En FrameLayout o CoordinatorLayout puedes agregarlo al final con layout_gravity="bottom" o en un RelativeLayout usar android:layout_alignParentBottom="true"

Dimensiones, tamaño de letra, etc.

Consulte las especificaciones de navegación del fondo del diseño de materiales para los márgenes y tamaños de fuente, etc.

Altura: 56dp

Icono: 24 x 24dp

Alineación de contenido:
El texto y el ícono están centrados horizontalmente dentro de la vista.

Relleno:

  • 6dp arriba del ícono (vista activa), 8dp arriba del ícono (vista inactiva)
  • 10dp bajo texto
  • 12dp a la izquierda y a la derecha del texto

Etiqueta de texto:

  • Roboto Regular 14sp (vista activa)

  • Roboto Regular 12sp (vista inactiva)

Ocultar en desplazamiento

Use un CoordinatorLayout de la biblioteca de soporte de diseño de Android. Agregue este LinearLayout como un niño en el xml y establezca un Comportamiento para ocultar en desplazamiento.


Actualizar

Ahora hay una biblioteca de código abierto disponible que está construida según las especificaciones: https://github.com/roughike/BottomBar

Actualización 2

Ahora es parte de la lib de soporte .

Desde la biblioteca de soporte android 25 tiene un BottomNavigationView nativo que es el mismo que se menciona en las pautas de diseño de materiales.
Para empezar, necesitamos actualizar nuestra dependencia:

 compile 'com.android.support:design:25.0.0' 

A continuación, simplemente necesitamos agregar el widget Vista de navegación inferior a nuestro archivo de diseño deseado. Recuerde que esto debe estar alineado con la parte inferior de la pantalla con todo el contenido que se muestra arriba. Podemos agregar esta vista así:

     

Para obtener un artículo más detallado, visite esto: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.bgoj4br93