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

com.android.support:appcompat-v7 last version

Question

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

Answer 1

A partir de ahora no hay ejemplos de código y la barra Inferior no está en la biblioteca de soporte (todavía). Sin embargo, he encontrado una biblioteca de terceros que imita las directrices. Se puede encontrar Here .

Answer 2

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

Agregue BottomNavigationView en su archivo xml.

Por ej. 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>

Añadir xml para los elementos del menú en la carpeta del menú.

Por ej. 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 ej. 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;
}
});
}
}

BottomNavigation-Demo aquí para BottomNavigation-Demo

Answer 3

Como dijo el usuario 6146138, Here es una gran implementación. Y puede ver un gran tutorial sobre él here , que es realmente fácil de seguir y la parte 2 le muestra cómo usarlo con los fragmentos adjuntos.

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

Answer 4

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

Answer 5

No hay ejemplos de código todavía. Pero hay bibliotecas personalizadas en el arsenal de Android y este es un tutorial detallado que puede verlo.

Answer 6

No hay un ejemplo oficial, pero verifique el siguiente enlace.
Muy buena implementación. Here

Answer 7

Puede usar las bibliotecas de soporte de diseño de google para BottomNavigationView . Lee la respuesta here .

Answer 8

Puede utilizar la biblioteca de soporte v25.

Añade en tu build.gradle

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

Agregue el 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"/>

Luego 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;
}
});

Answer 9

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

Answer 10

Here primera solución personalizada por lo que sé.

ACTUALIZAR:

Official BottomNavigationView está disponible en Support lib 25.

Answer 11

Repositorio. He agregado el proyecto completo en este enlace para ver https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

Hola Esto podría ser un 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>