web-dev-qa-db-fra.com

Comment mettre en œuvre l'onglet de navigation du bas conformément à la nouvelle directive de Google

Comment mettre en œuvre l'onglet de navigation du bas selon les nouvelles directives de Google (Android pur). Y a-t-il un exemple?

Réf.: https://www.google.com/design/spec/components/bottom-navigation.html

androidandroid-design-library
26
Govinda Paliwal

Ici première solution personnalisée pour autant que je sache.

METTRE À JOUR:

Official BottomNavigationView est sorti dans Support lib 25.

13
Geralt_Encore

Vous pouvez utiliser la bibliothèque de support v25.

Ajoutez dans votre build.gradle

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

Ajoutez la BottomNavigationView dans votre mise en page:

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

Créez ensuite un fichier de menu (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>

Ajoutez ensuite l'auditeur:

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;
            }
        });
13
Gabriele Mariotti

Maintenant, BottomNavigationView est ajouté au support de conception lib v25.0.0 publié en octobre 2016

Ajoutez BottomNavigationView dans votre fichier xml.

Par ex. 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>

Ajouter XML pour les éléments de menu dans le dossier de menu.

Par ex. 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>

Définissez OnNavigationItemSelectedListener sur BottomNavigationView dans votre classe d'activité. 

Par ex. 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;
                }
            });
    }
}

Commander ici pour BottomNavigation-Demo

9
Priyank Patel

Il n'y a pas d'exemples de code là-bas. Bien que certaines bibliothèques personnalisées puissent faire le travail à partir de maintenant. (Comme mentionné dans les messages ci-dessus) l'écran ne doit pas faire défiler les pages horizontalement. Cependant, TabLayout étend HorizontalScrollView et son objectif principal est de faciliter le défilement, même si vous pouvez le désactiver, cela ne sera pas idéal.

5
Gopal

Comme le dit l'utilisateur 6146138, https://github.com/roughike/BottomBar est une excellente implémentation. Et vous pouvez consulter un excellent didacticiel à ce sujet ici , qui est vraiment facile à suivre et la partie 2 vous montre comment l’utiliser avec des fragments attachés.

Une autre implémentation de Nice est https://github.com/aurelhubert/ahbottomnavigation si vous voulez y accéder. Je ne connais aucun tutoriel sur ce sujet, mais les instructions sur le lien sont assez bonnes, IMO.

2
ninjachippie

Repository J'ai ajouté le projet complet en cliquant sur ce lien https://gitlab.com/ashish29agre/Android-bottom-navigation-view-support-lib

Salut Cela pourrait être un peu tard ici, voici le 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>

1
silentsudo

Pour l'instant, il n'y a pas d'exemples de code et la barre du bas ne se trouve pas (encore) dans la bibliothèque de support. J'ai trouvé une bibliothèque tierce qui imite les directives. On peut le trouver ici .

1
Niels Masdorp

Vous pouvez utiliser les bibliothèques de support de conception Google pour BottomNavigationView . Lire la réponse ici .

1
Bimbow

Vous pouvez utiliser TabLayout pour cela. Il peut être facilement aligné en bas de l'écran.

0
kevz

Il n'y a pas d'exemple officiel mais vérifiez le lien ci-dessous.
Très bonne implémentation. https://github.com/roughike/BottomBar

0
user6146138

Il n'y a pas encore d'exemples de code. Mais il existe des bibliothèques personnalisées dans l'arsenal Android et il s'agit d'un didacticiel détaillé que vous pouvez vérifier conception du matériel Android, navigation de fond

0
Fareed