Cómo implementar la pestaña de navegación inferior según la nueva guía de Google

Cómo implementar la pestaña de navegación inferior según la nueva guía de Google (Pure android). ¿Hay algún ejemplo?

Ref: https://www.google.com/design/spec/components/bottom-navigation.html

Aquí la primera solución personalizada hasta donde yo sé.

ACTUALIZAR:

Oficial BottomNavigationView está disponible en Support lib 25.

Puede utilizar la biblioteca de soporte v25.

Agregue en su build.gradle

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

Agregue BottomNavigationView en su diseño:

 <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" app:menu="@menu/bottom_navigation_menu" android:layout_width="match_parent" android:layout_height="wrap_content" app:itemBackground="@color/colorPrimary" app:itemIconTint="@color/mycolor" app:itemTextColor="@color/mycolor"/> 

A continuación, cree un archivo de menú (menu / bottom_navigation_menu.xml):

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/my_action1" android:enabled="true" android:icon="@drawable/my_drawable" android:title="@string/text" app:showAsAction="ifRoom" /> .... </menu> 

A continuación, agregue el oyente:

 BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.my_action1: //Do something... break; } return false; } }); 

Más información en la documentación.

Ahora, BottomNavigationView se agrega en soporte de diseño lib v25.0.0 publicado en octubre de 2016

Agregue BottomNavigationView en su archivo xml.

Por ejemplo, Activity_main.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="priyank.patel.bottomnavigationdemo.MainActivity"> <FrameLayout android:id="@+id/main_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_navigation" android:layout_alignParentTop="true"> </FrameLayout> <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:itemBackground="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:menu="@menu/bottom_navigation_main" /> </RelativeLayout> 

Agregue xml para elementos de menú en la carpeta del menú.

Por ejemplo, Bottom_navigation_main.xml

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_favorites" android:enabled="true" android:icon="@drawable/ic_favorite_white_24dp" android:title="@string/text_favorites" app:showAsAction="ifRoom" /> <item android:id="@+id/action_video" android:enabled="true" android:icon="@drawable/ic_music_video_white_24dp" android:title="@string/text_video" app:showAsAction="ifRoom" /> <item android:id="@+id/action_music" android:enabled="true" android:icon="@drawable/ic_audiotrack_white_24dp" android:title="@string/text_music" app:showAsAction="ifRoom" /> </menu> 

Establezca OnNavigationItemSelectedListener en BottomNavigationView en su clase de actividad.

Por ejemplo, MainActivity.java

 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.view.MenuItem; public class MainActivity extends AppCompatActivity { private Fragment fragment; private FragmentManager fragmentManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fragmentManager = getSupportFragmentManager(); fragment = new FavouriteFragment(); final FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.add(R.id.main_container, fragment).commit(); BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_favorites: fragment = new FavouriteFragment(); break; case R.id.action_video: fragment = new VideoFragment(); break; case R.id.action_music: fragment = new MusicFragment(); break; } final FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.replace(R.id.main_container, fragment).commit(); return true; } }); } } 

Compruebe aquí para BottomNavigation-Demo

No hay ejemplos de código por ahí. Aunque hay bibliotecas personalizadas que pueden hacer el trabajo a partir de ahora (como se menciona en los mensajes anteriores) No recomendaría usar TabLayout para lograr esto, ya que en las directrices de diseño para la pestaña de navegación inferior su claramente mencionado que deslizar la pantalla no debe Desplaza las páginas horizontalmente. Sin embargo, TabLayout extiende HorizontalScrollView y su principal motivo es facilitar el desplazamiento, aunque se puede desactivar, no será ideal.

Como dijo user6146138, https://github.com/roughike/BottomBar es una gran implementación. Y usted puede comprobar hacia fuera un gran tutorial en él aquí , que es realmente fácil de seguir y la parte 2 le muestra cómo utilizarlo con los fragmentos atados.

Otra buena implementación es https://github.com/aurelhubert/ahbottomnavigation si quieres comprobarlo. No sé de ningún tutorial sobre él, pero las instrucciones en el enlace son lo suficientemente bueno IMO.

A partir de ahora no hay ejemplos de código y la barra inferior no está en la biblioteca de soporte (todavía). He encontrado una biblioteca de terceros que imita las directrices sin embargo. Se puede encontrar aquí .

Repositorio He añadido proyecto completo en este enlace echar un vistazo https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

Hola Esto puede ser poco tarde aquí es el xml

 <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.BottomNavigationView android:id="@+id/nm_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/colorPrimaryDark" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:layout_scrollFlags="scroll|enterAlways" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:menu="@menu/nav_menu" /> <android.support.v7.widget.RecyclerView android:id="@+id/rv" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/nm_bottom" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </RelativeLayout> 

Puede utilizar las bibliotecas de soporte de diseño de Google para BottomNavigationView . Lea la respuesta aquí .

Todavía no hay ejemplos de código. Pero hay bibliotecas personalizadas en el arsenal android y este es un tutorial detallado que puede comprobar Android diseño de material de navegación inferior

No hay un ejemplo oficial, pero compruebe debajo del enlace.
Muy buena implementación. https://github.com/roughike/BottomBar

Puede usar TabLayout para eso. Se puede alinear fácilmente en la parte inferior de la pantalla.

  • Problema anidado de RecyclerView con AppBarLayout
  • Mostrar programaticamente la barra de herramientas después de ocultarlo mediante desplazamiento (Android Design Library)
  • AppBarLayout cambiar compensación mediante programación
  • Estilizar texto en TabLayout
  • Cómo utilizar SwipeDismissBehavior.OnDismissListener en RecyclerView
  • Vistas arriba y abajo de RecyclerView
  • Cómo ocultar FAB cuando el teclado está abierto.
  • Android TextInputField Error de inflador
  • (Design Support Library) Elementos de la barra de herramientas detrás de la barra de estado
  • Establecer menú predeterminado para BottomNavigationView
  • Biblioteca de soporte de diseño de Android: Utilice ViewPager / TabLayout con barra de desplazamiento y botón pegajoso
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.