web-dev-qa-db-fra.com

Nouvelle barre de navigation inférieure ou navigation de fond Android sous Android

Vu que la nouvelle recommandation est sortie et utilisée dans la dernière application google photos . Je ne sais pas comment utiliser la nouvelle barre de navigation inférieure .

enter image description here

Impossible de trouver un échantillon officiel.

Comment utiliser la nouvelle barre inférieure? Je ne veux pas faire de personnaliser.

androidbottomnavigationview
114
zjywill

Je pense que vous pourriez chercher cela.

Voici un extrait pour bien commencer:

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Notice how you don't use the setContentView method here! Just
        // pass your layout to bottom bar, it will be taken care of.
        // Everything will be just like you're used to.
        mBottomBar = BottomBar.bind(this, R.layout.activity_main,
                savedInstanceState);

        mBottomBar.setItems(
                new BottomBarTab(R.drawable.ic_recents, "Recents"),
                new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
                new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
                new BottomBarTab(R.drawable.ic_friends, "Friends")
        );

        mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onItemSelected(final int position) {
                // the user selected a new tab
            }
        });
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mBottomBar.onSaveInstanceState(outState);
    }
}

Voici le lien de référence.

https://github.com/roughike/BottomBar

EDIT Nouveautés.

La vue de navigation inférieure figure depuis un certain temps déjà dans les instructions de conception des matériaux, mais il n’a pas été facile pour nous de l’implémenter dans nos applications. Certaines applications ont construit leurs propres solutions, tandis que d'autres ont eu recours à des bibliothèques tierces à code source ouvert pour faire le travail. La bibliothèque d’aide à la conception voit maintenant l’ajout de cette barre de navigation inférieure. Voyons maintenant comment nous pouvons l’utiliser!

Comment utiliser ?

Pour commencer, nous devons mettre à jour notre dépendance!

compile ‘com.Android.support:design:25.0.0’

Design 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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Content Container -->

    <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="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Créer un menu selon vos besoins.

<?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_schedules"
        Android:enabled="true"
        Android:icon="@drawable/ic_access_time_white_24dp"
        Android:title="@string/text_schedules"
        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>

Gestion des états activés/désactivés. Faire un fichier de sélecteur.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item
      Android:state_checked="true"
      Android:color="@color/colorPrimary" />
  <item
      Android:state_checked="false"
      Android:color="@color/grey" />
 </selector>

Gérer les événements de clic.

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.action_favorites:

                        break;
                    case R.id.action_schedules:

                        break;
                    case R.id.action_music:

                        break;
                }
                return false;
            }
});

Si vous voulez en savoir plus sur ses méthodes et son fonctionnement lisez ceci.

Cela vous aidera sûrement.

159
Jay Rathod RJ

Vous devez utiliser BottomNavigationView à partir de la bibliothèque de support Android v25 . Il représente une barre de navigation inférieure standard pour les applications.

Voici un article sur Medium qui comporte pas à pas:https://medium.com/@hitherejoe/exploring-the-Android-design-support-library-bottom-navigation- tiroir-548de699e8e0 # .9vmiekxze

48
Maksim Turaev

Vous pouvez également utiliser la disposition des onglets avec une vue en onglet personnalisée pour y parvenir. 

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="?attr/selectableItemBackground"
    Android:gravity="center"
    Android:orientation="vertical"
    Android:paddingBottom="10dp"
    Android:paddingTop="8dp">

    <ImageView
        Android:id="@+id/icon"
        Android:layout_width="24dp"
        Android:layout_height="24dp"
        Android:scaleType="centerInside"
        Android:src="@drawable/ic_recents_selector" />

    <TextView
        Android:id="@+id/title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:ellipsize="end"
        Android:maxLines="1"
        Android:textAllCaps="false"
        Android:textColor="@color/tab_color"
        Android:textSize="12sp"/>
</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <Android.support.v4.view.ViewPager

        Android:id="@+id/view_pager"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1" />

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        style="@style/AppTabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="56dp"
        Android:background="?attr/colorPrimary" />

</LinearLayout>

MainActivity.Java

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

    private int[] mTabsIcons = {
            R.drawable.ic_recents_selector,
            R.drawable.ic_favorite_selector,
            R.drawable.ic_place_selector};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup the viewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(viewPager);

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }

        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }


    private class MyPagerAdapter extends FragmentPagerAdapter {

        public final int PAGE_COUNT = 3;

        private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"};

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public View getTabView(int position) {
            // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView title = (TextView) view.findViewById(R.id.title);
            title.setText(mTabsTitle[position]);
            ImageView icon = (ImageView) view.findViewById(R.id.icon);
            icon.setImageResource(mTabsIcons[position]);
            return view;
        }

        @Override
        public Fragment getItem(int pos) {
            switch (pos) {

                case 0:
                    return PageFragment.newInstance(1);

                case 1:
                    return PageFragment.newInstance(2);
                case 2:
                    return PageFragment.newInstance(3);

            }
            return null;
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabsTitle[position];
        }
    }

}

Téléchargez l'exemple de projet complet

16
waleedsarwar86

Comme Sanf0rd l'a mentionné, Google a lancé BottomNavigationView en tant que faisant partie de la bibliothèque de support technique de la version 25.0.0. Les limitations qu'il a mentionnées sont pour la plupart vraies, sauf que vous POUVEZ changer la couleur d'arrière-plan de la vue et même la couleur du texte et la teinte de l'icône. Il comporte également une animation lorsque vous ajoutez plus de 4 éléments (malheureusement, il ne peut pas être activé ou désactivé manuellement).

J'ai écrit un tutoriel détaillé à ce sujet avec des exemples et un référentiel, que vous pouvez lire ici:https://blog.autsoft.hu/now-you-can-use-the-bottom -navigation-view-in-the-design-support-library/

L'essentiel

Vous devez les ajouter dans votre niveau d'application build.gradle:

compile 'com.Android.support:appcompat-v7:25.0.0'  
compile 'com.Android.support:design:25.0.0'

Vous pouvez l'inclure dans votre mise en page comme ceci:

<Android.support.design.widget.BottomNavigationView  
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/bottom_navigation_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:itemBackground="@color/darkGrey"
        app:itemIconTint="@color/bottom_navigation_item_background_colors"
        app:itemTextColor="@color/bottom_navigation_item_background_colors"
        app:menu="@menu/menu_bottom_navigation" />

Vous pouvez spécifier les éléments via une ressource de menu comme ceci:

<?xml version="1.0" encoding="utf-8"?>  
<menu  
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:id="@+id/action_one"
        Android:icon="@Android:drawable/ic_dialog_map"
        Android:title="One"/>
    <item
        Android:id="@+id/action_two"
        Android:icon="@Android:drawable/ic_dialog_info"
        Android:title="Two"/>
    <item
        Android:id="@+id/action_three"
        Android:icon="@Android:drawable/ic_dialog_email"
        Android:title="Three"/>
    <item
        Android:id="@+id/action_four"
        Android:icon="@Android:drawable/ic_popup_reminder"
        Android:title="Four"/>
</menu>

Et vous pouvez définir la teinte et la couleur du texte comme liste de couleurs pour que l'élément actuellement sélectionné soit mis en surbrillance:

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:color="@color/colorAccent"
        Android:state_checked="false"/>
    <item
        Android:color="@Android:color/white"
        Android:state_checked="true"/>

</selector>

Enfin, vous pouvez gérer la sélection des éléments avec un OnNavigationItemSelectedListener:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {  
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()) {
            case R.id.action_one:
                // Switch to page one
                break;
            case R.id.action_two:
                // Switch to page two
                break;
            case R.id.action_three:
                // Switch to page three
                break;
        }
        return true;
    }
});
10
Balázs Gerlei

Comment ajouter une barre de navigation inférieure

La réponse acceptée est bonne, mais j'ai trouvé l'organisation un peu difficile à suivre et une partie du contenu inutile. L'exemple complet suivant montre comment créer une barre de navigation inférieure similaire à l'image de la question.

 enter image description here

Ajouter la bibliothèque de support de conception

Ajoutez cette ligne au fichier build.grade de votre application, à côté des autres éléments de la bibliothèque de support.

implementation 'com.Android.support:design:28.0.0'

Remplacez le numéro de version par tout ce qui est actuel.

Créer la mise en page de l'activité

La seule chose spéciale que nous avons ajoutée à la mise en page est la BottomNavigationView. Pour changer la couleur de l'icône et du texte lorsque vous cliquez dessus, vous pouvez utiliser une variable selector au lieu de spécifier directement la couleur. Ceci est omis pour des raisons de simplicité ici.

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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <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:menu="@menu/bottom_nav_menu"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@Android:color/white"
        app:itemTextColor="@Android:color/white" />

</RelativeLayout>

Notez que nous avons utilisé layout_alignParentBottom pour le mettre en bas. 

Définir les éléments de menu

Le code XML ci-dessus pour la vue de navigation inférieure se réfère à bottom_nav_menu. C’est ce qui définit chaque élément de notre point de vue. Nous allons le faire maintenant. Tout ce que vous avez à faire est ajoutez une ressource de menu comme vous le feriez pour une barre d’action ou une barre d’outils.

bottom_nav_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/action_recents"
        Android:enabled="true"
        Android:icon="@drawable/ic_action_recents"
        Android:title="Recents"
        app:showAsAction="ifRoom" />

    <item
        Android:id="@+id/action_favorites"
        Android:enabled="true"
        Android:icon="@drawable/ic_action_favorites"
        Android:title="Favorites"
        app:showAsAction="ifRoom" />

    <item
        Android:id="@+id/action_nearby"
        Android:enabled="true"
        Android:icon="@drawable/ic_action_nearby"
        Android:title="Nearby"
        app:showAsAction="ifRoom" />
</menu>

Vous devrez ajouter les icônes appropriées à votre projet. Ce n'est pas très difficile si vous allez dans Fichier> Nouveau> Image Asset et choisissez Barre d'action et icônes de tabulation comme type d'icône.

Ajouter un élément écouteur sélectionné

Il n'y a rien de spécial qui se passe ici. Nous venons d'ajouter un auditeur à la barre de navigation inférieure dans la méthode onCreate de notre activité.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        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.action_recents:
                        Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_favorites:
                        Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_nearby:
                        Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
                        break;

                }
                return true;
            }
        });
    }
}

Besoin d'aide?

J'ai appris comment faire cela en regardant la vidéo YouTube suivante. La voix de l'ordinateur est un peu étrange, mais la démonstration est très claire.

8
Suragch

Autre bibliothèque alternative, vous pouvez essayer: - https://github.com/Ashok-Varma/BottomNavigation

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    Android:layout_gravity="bottom"
    Android:id="@+id/bottom_navigation_bar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"/>

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
8
Ashok Varma

j'ai créé une classe privée qui utilise un gridview et une ressource de menu:

private class BottomBar {

    private GridView mGridView;
    private Menu     mMenu;
    private BottomBarAdapter mBottomBarAdapter;
    private View.OnClickListener mOnClickListener;

    public BottomBar (@IdRes int gridviewId, @MenuRes int menuRes,View.OnClickListener onClickListener) {
        this.mGridView = (GridView) findViewById(gridviewId);
        this.mMenu = getMenu(menuRes);
        this.mOnClickListener = onClickListener;

        this.mBottomBarAdapter = new BottomBarAdapter();
        this.mGridView.setAdapter(mBottomBarAdapter);
    }

    private Menu getMenu(@MenuRes int menuId) {
        PopupMenu p = new PopupMenu(MainActivity.this,null);
        Menu menu = p.getMenu();
        getMenuInflater().inflate(menuId,menu);
        return menu;
    }

    public GridView getGridView(){
        return mGridView;
    }

    public void show() {
        mGridView.setVisibility(View.VISIBLE);
        mGridView.animate().translationY(0);
    }

    public void hide() {
        mGridView.animate().translationY(mGridView.getHeight());
    }



    private class BottomBarAdapter extends BaseAdapter {

        private LayoutInflater    mInflater;

        public BottomBarAdapter(){
            this.mInflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            return mMenu.size();
        }

        @Override
        public Object getItem(int i) {
            return mMenu.getItem(i);
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            MenuItem item = (MenuItem) getItem(i);

            if (view==null){
                view = mInflater.inflate(R.layout.your_item_layout,null);
                view.setId(item.getItemId());
            }

            view.setOnClickListener(mOnClickListener);
            view.findViewById(R.id.bottomnav_icon).setBackground(item.getIcon());
            ((TextView) view.findViewById(R.id.bottomnav_label)).setText(item.getTitle());

            return view;
        }
    }

votre_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@+id/item1_id"
        Android:icon="@drawable/ic_item1"
        Android:title="@string/title_item1"/>
    <item Android:id="@+id/item2_id"
        Android:icon="@drawable/ic_item2"
        Android:title="@string/title_item2"/>
    ...
</menu>

et un élément de disposition personnalisé your_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content" Android:layout_height="wrap_content"
    Android:orientation="vertical"
    Android:layout_margin="16dp">
    <ImageButton Android:id="@+id/bottomnav_icon"
        Android:layout_width="24dp"
        Android:layout_height="24dp"
        Android:layout_gravity="top|center_horizontal"
        Android:layout_marginTop="8dp"
        Android:layout_marginBottom="4dp"/>
    <TextView Android:id="@+id/bottomnav_label"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|center_horizontal"
        Android:layout_marginBottom="8dp"
        Android:layout_marginTop="4dp"
        style="@style/mystyle_label" />
</LinearLayout>

utilisation dans votre activité principale:

BottomBar bottomBar = new BottomBar(R.id.YourGridView,R.menu.your_menu, mOnClickListener);

et

private View.OnClickListener mOnClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.item1_id:
                //todo item1
                break;
            case R.id.item2_id:
                //todo item2
                break;
            ...
        }
    }
}

et dans layout_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout 
    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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">
    ...
    <FrameLayout Android:id="@+id/fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <GridView Android:id="@+id/bottomNav"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/your_background_color"
        Android:verticalSpacing="0dp"
        Android:horizontalSpacing="0dp"
        Android:numColumns="4"
        Android:stretchMode="columnWidth"
        app:layout_anchor="@id/fragment_container"
        app:layout_anchorGravity="bottom"/>
</Android.support.design.widget.CoordinatorLayout>
3
G Dias

Une nouvelle version de BottomNavigationView dans la version 25 de la bibliothèque de support de conception

https://developer.Android.com/reference/Android/support/design/widget/BottomNavigationView.html ajouter un niveau compile 'com.Android.support:design:25.0.0'

XML

<Android.support.design.widget.BottomNavigationView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:design="http://schema.Android.com/apk/res/Android.support.design"
    Android:id="@+id/navigation"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    design:menu="@menu/my_navigation_items" />
2
Mrk_Slk

Je pense que cela est également utile. 

Snippet

public class MainActivity : AppCompatActivity, BottomNavigationBar.Listeners.IOnTabSelectedListener
{
    private BottomBar _bottomBar;

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        SetContentView(Resource.Layout.MainActivity);

        _bottomBar = BottomBar.Attach(this, bundle);
        _bottomBar.SetItems(
            new BottomBarTab(Resource.Drawable.ic_recents, "Recents"),
            new BottomBarTab(Resource.Drawable.ic_favorites, "Favorites"),
            new BottomBarTab(Resource.Drawable.ic_nearby, "Nearby")
        );
        _bottomBar.SetOnItemSelectedListener(this);
        _bottomBar.HideShadow();
        _bottomBar.UseDarkTheme(true);
        _bottomBar.SetTypeFace("Roboto-Regular.ttf");

        var badge = _bottomBar.MakeBadgeForTabAt(1, Color.ParseColor("#f02d4c"), 1);
        badge.AutoShowAfterUnSelection = true;
    }

    public void OnItemSelected(int position)
    {

    }

    protected override void OnSaveInstanceState(Bundle outState)
    {
        base.OnSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        _bottomBar.OnSaveInstanceState(outState);
    }
}

Liens

https://github.com/pocheshire/BottomNavigationBar

C'est https://github.com/roughike/BottomBar porté en C # pour les développeurs Xamarin

2
Pocheshire

Cette bibliothèque, BottomNavigationViewEx , étend la vue Google de BottomNavigationView. Vous pouvez facilement personnaliser la bibliothèque de Google pour avoir la barre de navigation inférieure comme vous le souhaitez. Vous pouvez désactiver le mode de décalage, modifier la visibilité des icônes et des textes, et bien plus encore. Certainement l'essayer. 

1
Anky An
<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

navigation.xml (dans le menu)

<?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/navigation_home"
        Android:icon="@drawable/ic_home_black_24dp"
        Android:title="@string/title_home"
        app:showAsAction="always|withText"
        Android:enabled="true"/>

Dans la méthode onCreate(),

BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
//Dont forgot this line     
BottomNavigationViewHelper.disableShiftMode(navigation);

Et créer une classe comme ci-dessous.

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.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);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}
0
Kishore Reddy

J'ai référé ce github post et j'ai défini le three layouts pour three fragment pages dans la barre de tabulation inférieure.

FourButtonsActivity.Java:

bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(LibraryFragment.newInstance(R.layout.library_fragment_layout), R.drawable.ic_update_white_24dp, "Recents"),
            new BottomBarFragment(PhotoEffectFragment.newInstance(R.layout.photo_effect_fragment), R.drawable.ic_local_dining_white_24dp, "Food"),
            new BottomBarFragment(VideoFragment.newInstance(R.layout.video_layout), R.drawable.ic_favorite_white_24dp, "Favorites")

    );

Pour définir le nombre de badges:

  BottomBarBadge unreadMessages = bottomBar.makeBadgeForTabAt(1, "#E91E63", 4);
  unreadMessages.show();
  unreadMessages.setCount(4);
  unreadMessages.setAnimationDuration(200);
  unreadMessages.setAutoShowAfterUnSelection(true);

LibraryFragment.Java:

import Android.os.Bundle;
import Android.support.annotation.Nullable;
import Android.support.v4.app.Fragment;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;

public class LibraryFragment extends Fragment {
    private static final String STARTING_TEXT = "Four Buttons Bottom Navigation";

    public LibraryFragment() {
    }

    public static LibraryFragment newInstance(int resource) {
        Bundle args = new Bundle();
        args.putInt(STARTING_TEXT, resource);

        LibraryFragment sampleFragment = new LibraryFragment();
        sampleFragment.setArguments(args);

        return sampleFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        View view = LayoutInflater.from(getActivity()).inflate(
                getArguments().getInt(STARTING_TEXT), null);
        return view;


    }
0
Stephen