material design 2 et le bottom navigation view sur android

Bottom Navigation View

Partager
  • 16
  •  
  •  
  • 1
  •  
  •  
    17
    Partages

Dans ce tutoriel vous allez découvrir comment intégrer la Bottom Navigation View dans votre application android.

Bottom Navigation View

La barre de navigation de bas encore appelée Bottom Navigation View est un des composants du material design.Elle est introduite pour la première fois dans la librairie de support d’android , et aujourd’hui elle est disponible dans la librairie des composants material.

Vous pouvez l’utiliser lorsque vous souhaitez qu’un utilisateur navigue à travers les contenues principaux de votre application en un seul clic et lorsque votre application à entre 3 à 5 principales destinations.

La Bottom Navigation View construit ces items de navigation à partir des items d’un fichier ressource de menu.Ces items de menu sont aussi utilisés pour sélectionner en programmation la destination actuellement active.Nous allons à présent voir comment intégrer la bottom navigation view.

Créer un Nouveau projet

Nous allons à présent implémenter la Bottom Navigation View dans une application.Pour cela dans android studio créer un nouveau projet en cliquant sur File ->New->New Project, sélectionnez ensuite Empty Activity puis cliquez sur Next.

Dans la fenêtre qui s’affiche nommez votre projet BottomNavigationView ,choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Si vous n’avez pas encore lu l’introduction au material design 2, cliquez ici

Ajouter la dépendance de la librairie des composants material dans votre projet

La BottomNavigationView est à présent dans la librairie des composant material. Vous devez donc ajouter cette librairie comme dépendance dans votre projet .Ouvrez le fichier build.gradle(Module app) puis ajoutez la dépendances suivantes.

...
 implementation 'com.google.android.material:material:1.1.0-alpha10'
...

Note:Avant d’utiliser la librairie des composant material, vous devez migrer vers AndroidX. Cliquez ici pour lire le tutoriel sur la migration vers AndroidX.

Faire hériter le thème de votre application d’un des nouveaux thèmes material

Vous devez faire hériter votre thème d’un des thème de la librairie des composants material comme suit

   <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>


    </style>

Ajouter le BottomNavigationView dans votre projet

Avant de créer une barre de navigation bas, vous devez créer un menu et l’associer au bottomnavigationView pour créer ses items de navigations.Pour cela créer un menu comme suit

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="@string/menu_str_home"
        android:icon="@drawable/ic_home"
        />
    <item
        android:id="@+id/chat"
        android:title="@string/menu_str_chat"
        android:icon="@drawable/ic_chat"
        />
    <item
        android:id="@+id/profil"
        android:title="@string/menu_str_profil"
        android:icon="@drawable/ic_profil"
        />
</menu>

Voici les chaines de caractère utilisé dans le menu

<resources>
    <string name="app_name">BottomNavigationView</string>
    <string name="menu_str_home">Accueil</string>
    <string name="menu_str_chat">Chat</string>
    <string name="menu_str_profil">Profil</string>
    <string name="tv_str_content_home">Fenêtre de l\'accueil</string>
    <string name="tv_str_content_chat">Fenêtre du chat</string>
    <string name="tv_str_content_profil">Fenêtre de votre profil</string>
</resources>

Voici la palette de couleur que j’utilise

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

Icon. Pour retrouver les icons que j’utilise dans cet exemple , sélectionnez le répertoire res/drawable de votre projet puis dans le menu principale d’android studio faite cliquez sur File puis survoler sur New puis cliquez sur Vector Asset.

Ajoutez ensuite la Bottom Navigation view en allant dans le dans le fichier res/layout/activity_main.xml et ajoutez le contenu suivant

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/content_name"
            android:text="@string/tv_str_content_home"
            android:layout_gravity="center"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:menu="@menu/menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous devez constater que le menu de la barre de navigation de bas est définit avec l’attribut app:menu.

On pouvait aussi définir le menu de la barre de navigation de bas dans le code en java ou en kotlin comme suit

 mbottomNavigationView.inflateMenu(R.menu.menu)
 mBottomNavigationView.inflateMenu(R.menu.menu);

Dans cette vue nous avons ajouté la Bottom Navigation View en bas de la fenêtre et en dessous du FrameLayout grâce au ConstraintLayout.

Le FrameLayout quand à lui contient un Textview qui doit afficher dans quelle fenêtre on se trouve.

Dans la Bottom Navigation View,nous avons utiliser l’ attribut android:background pour définir la couleur d’arrière plan de la barre de navigation de bas.

Voici le résultat que vous devez obtenir

bottomnavigationview

Ajouter un gestionnaire d’événement aux items de la barre de navigation de bas

Vous pouvez ajouter un gestionnaire d’événement avec la méthode mBottomNavigationView.setOnNavigationItemSelectedListener pour détecter lorsqu’un item est sélectionné dans la barre de navigation de bas comme suit

package com.example.bottomnavigationviewkotlin2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.TextView
import com.google.android.material.bottomnavigation.BottomNavigationItemView
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var mbottomNavigationView: BottomNavigationView
    private lateinit var tvContenName: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mbottomNavigationView=findViewById(R.id.bottom_navigation)
        tvContenName=findViewById(R.id.content_name)
        mbottomNavigationView.setOnNavigationItemSelectedListener(object :BottomNavigationView.OnNavigationItemSelectedListener{

            override fun onNavigationItemSelected(item: MenuItem): Boolean {
              return when(item.itemId){

                  R.id.home ->{
                      tvContenName.setText(R.string.tv_str_content_home)
                      true
                  }
                  R.id.chat ->{
                      tvContenName.setText(R.string.tv_str_content_chat)
                    true
                  }

                  R.id.profil ->{
                      tvContenName.setText(R.string.tv_str_content_profil)
                     true
                  }
                  else -> false
              }
            }
        })
    }
}
package com.example.bottomnavigationview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBottomNavigationView;
    private TextView tvContenName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBottomNavigationView=findViewById(R.id.bottom_navigation);
        tvContenName=findViewById(R.id.content_name);
        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.home:
                        tvContenName.setText(R.string.tv_str_content_home);
                      return true;
                    case R.id.chat:
                        tvContenName.setText(R.string.tv_str_content_chat);
                        return true;
                    case R.id.profil:
                        tvContenName.setText(R.string.tv_str_content_profil);
                        return true;
                }

                return false;
            }
        });
    }
}

Dans cet exemple nous déclarons deux variables mBottomNavigationView ,tvContenName pour faire référence respectivement à la barre de navigation de bas et au TextView qui affiche la fenêtre actuellement active.

Ensuite nous avons ajouté un gestionnaire d’événement dans lequel on gère l’affichage de la fenêtre actuellement active en fonction de l’item sélectionné par l’utilisateur.

Voir le résultat

bottom navigation view et une couleur simple

Gérer l’état des items sélectionnés et non sélectionnés

La barre de navigation de bas à deux propriétés The app:itemIconTint et and app:itemTextColor pour définir respectivement la couleur le l’icon et du texte des items de navigation .Dans ces propriétés, vous pouvez définir soit une simple couleur soit une  ColorStateList .

Définir la couleur des icons et des textes des items à partir d’une simple couleur

Vous pouvez directement définir la couleur des icons et du texte des items de navigation avec les attributs app:itemIconTint et app:itemTextColor comme suit

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/content_name"
            android:text="@string/tv_str_content_home"
            android:layout_gravity="center"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
        app:menu="@menu/menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous devez constater que lorsque vous définissez une couleur simple,tous les icons et textes des items ont une même couleur et il est impossible de détecter lorsqu’un item est sélectionné ou pas.

Voir le résultat

bottomnavigationview avec une couleur simple

Définir la couleur des icons et des textes à partir d’une ColorStateList 

Pour définir la couleur des icons et des textes de la barre de navigation de bas,vous pouvez utiliser une ColorStateList. L’avantage d’utiliser une ColorStateList est que vous pourrez définir une couleur lorsque l’icon et le texte de l’ item de navigation est sélectionné ou pas.

Vous pouvez appliquer une ColorStateList comme suit

Voici les couleurs utilisées

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorOnSurface">#000000</color>
</resources>

Voici la ColorStatList utilisée pour les items de navigation

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

</selector>

La ColorStateList est ensuite utilisée avec les attributs app:itemIconTint et app:itemTextColor comme suit;

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:menu="@menu/menu"
        .../>

Voir le résultat ci-dessous

une bottom navigation view avec une colorstateliste

La couleur de l’effet Ripple

Vous pouvez changer la couleur de l’effet ripple avec l’attribut app:itemRippleColor comme suit

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:itemRippleColor="@color/colorPrimary"
        app:menu="@menu/menu"
        .../>

Voici le résultat que vous devez obtenir

une bottom navigation view avec un effet ripple

Visibilité du texte des items de navigation de la barre de navigation de bas

Vous pouvez contrôler la visibilité du texte des items de navigation selon qu’il soit sélectionné ou pas.Cela est possible grâce à l’attribut app:labelVisibilityMode qui peut prendre 4 (quatre) valeurs : auto,selected,labeled,unlabeled

app:labelVisibilityMode:labeled

Lorsque la valeur de l’attribut app:labelVisibilityMode est définie à labeled, le texte des items de navigation s’affiche toujours quelque soit si l’item est sélectionné ou pas.

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:itemRippleColor="@color/colorPrimary"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/menu"
        .../>

Résultat

une bottomview navigation view avec mode de visibilité labeled

app:labelVisibilityMode:unlabeled

Lorsque la valeur de l’attribut app:labelVisibilityMode est définie à unlabeled,seul les icons des items de navigation qui s’affiche et les textes des items de navigations ne s’affiche pas.

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:itemRippleColor="@color/colorPrimary"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/menu"
        .../>

Résultat:

une bottom navigation view avec mode de visibilté unlabeled

app:labelVisibilityMode:selected

Lorsque la valeur de l’attribut app:labelVisibilityMode est définie à selected, le texte des items de navigation s’affiche uniquement lorsque l’item est sélectionné.

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:itemRippleColor="@color/colorPrimary"
        app:labelVisibilityMode="selected"
        app:menu="@menu/menu"
        .../>

Résultat

une bottom navigation view avec mode de visibilité selected

app:labelVisibilityMode:auto

Lorsque la valeur de l’attribut app:labelVisibilityMode est définie à auto, android choisi de finalement définir la valeur de cet attribut soit à labeled lorsqu’il y a au plus 3 items de navigation ou définir finalement la valeur à selected lorsqu’il y a 4 ou 5 items de navigation.

Définir des badges sur la BottomNavigationView

Une des nouvelles fonctionnalités qu’offre la BottomNavigationView avec le material design 2 est la possibilité de facilement définir et d’afficher des badges dans le coins haut à droit (par défaut) comme des notifications.

Il existe deux type de badge:des badges pointés ( s’affichent comme un point coloré ) et des badges numérotés.Vous pouvez créer un badge comme suit

Badge pointé

var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)  
  BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);

Vous devez constater que pour créer un badge , on appelle la méthode getOrCreateBadge de la barre de navigation de bas.Cette méthode prend en paramètre l’ id de l’item de menu sur lequel vous souhaitez afficher le badge. Par défaut cette méthode crée un badge pointé.

Cette méthode retourne une instance de la classe BadgeDrawable si elle existe ou crée une nouvelle instance si elle n’existe pas

Voir lé résultat.

bottom navigation view avec badge pointé

Badge numéroté:Pour afficher un badge numéroté, vous devez appeler la méthode setNumber sur l’instance de la classe BadgeDrawable comme suit

var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)  
badgeDrawable.number=12 
 BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
 badgeDrawable.setNumber(12);

Voir le résultat

bottom navigation view avec badge numéroté

La classe BadgeDrawable fournit plusieurs méthode pour personnaliser et positionner le badge .Les méthodes tel que :

la méthode setBackgroundColor

La méthode setBackgroundColor permet de changer la couleur d’arrière plan du badge pour les badges numérotés et la couleur de remplissage pour les badges pointés

  var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
       badgeDrawable.number=12
        badgeDrawable.backgroundColor=ContextCompat.getColor(applicationContext,R.color.colorPrimary)
BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
       badgeDrawable.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.colorPrimary));

Voir le résultat

bottom navigation view avec couleur d'arrière plan personnalisée

la méthode setBadgeTextColor

La méthode setBadgeTextColor permet de changer la couleur du texte du badge pour les badges numérotés

  var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
        badgeDrawable.number=12
        badgeDrawable.backgroundColor=ContextCompat.getColor(applicationContext,R.color.colorPrimary)
        badgeDrawable.badgeTextColor=ContextCompat.getColor(applicationContext,R.color.colorAccent)
  BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
        badgeDrawable.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.colorPrimary));
        badgeDrawable.setBadgeTextColor(ContextCompat.getColor(getApplicationContext(),R.color.colorAccent));

Voir le résultat

bottom navigation view avec texte de badge personnalisé

La méthode setBadgeGravity

Lé méthode setBadgeGravity est utilisée pour positionner le badge.Cette méthode peut prendre 4 valeurs dont

BadgeDrawable.TOP_END(valeur par défaut ):Permet de positionner le badge en haut à droite

 var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
       badgeDrawable.number=12
        badgeDrawable.badgeGravity=BadgeDrawable.TOP_END
BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
        badgeDrawable.setBadgeGravity(BadgeDrawable.TOP_END);
bottom navigation view avec badge en haut et à droit

BadgeDrawable.TOP_START: Permet de positionner le badge en haut et à gauche

 var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
       badgeDrawable.number=12
        badgeDrawable.badgeGravity=BadgeDrawable.TOP_START
 BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
        badgeDrawable.setBadgeGravity(BadgeDrawable.TOP_START);
bottom navigation view avec badge en haut à gauche

BadgeDrawable.BOTTOM_START: Permet de positionner le badge en bas et à gauche

  var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
       badgeDrawable.number=12
       badgeDrawable.badgeGravity=BadgeDrawable.BOTTOM_START

  BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
        badgeDrawable.setBadgeGravity(BadgeDrawable.BOTTOM_START);

bottom navigation view avec badge en bas à gauche

BadgeDrawable.BOTTOM_END: permet de positionner le badge en bas et à droite

 var badgeDrawable: BadgeDrawable=mbottomNavigationView.getOrCreateBadge(R.id.home)
       badgeDrawable.number=12
       badgeDrawable.badgeGravity=BadgeDrawable.BOTTOM_END
BadgeDrawable badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
        badgeDrawable.setNumber(12);
        badgeDrawable.setBadgeGravity(BadgeDrawable.BOTTOM_END);
bottom navigation view avec badge en bas à droite

La méthode removeBadge

Cette méthode permet de supprimer un badge sur un item de navigation de la barre. Elle prend en paramètre l’id de l’item de menu sur lequel on souhaite supprimer le badge.

   mbottomNavigationView.setOnNavigationItemSelectedListener(object :BottomNavigationView.OnNavigationItemSelectedListener{

            override fun onNavigationItemSelected(item: MenuItem): Boolean {
                return when(item.itemId){

                    R.id.home ->{
                      mbottomNavigationView.getBadge(R.id.home)?.let { badgeDrawable ->
                          if(badgeDrawable.isVisible){
                             mbottomNavigationView.removeBadge(R.id.home)
                          }
                      }?:mbottomNavigationView.getOrCreateBadge(R.id.home)?.apply {
                          number=12
                      }
                        
                        true
                    }
                    R.id.chat ->{
                        mbottomNavigationView.getBadge(R.id.chat)?.let { badgeDrawable ->
                            if(badgeDrawable.isVisible){
                                mbottomNavigationView.removeBadge(R.id.chat)
                            }
                        }?:mbottomNavigationView.getOrCreateBadge(R.id.chat)?.apply {
                            number=12
                        }
                        true
                    }

                    R.id.profil ->{
                        mbottomNavigationView.getBadge(R.id.profil)?.let { badgeDrawable ->
                            if(badgeDrawable.isVisible){
                                mbottomNavigationView.removeBadge(R.id.profil)
                            }
                        }?:mbottomNavigationView.getOrCreateBadge(R.id.profil)?.apply {
                            number=12
                        }
                        true
                    }
                    else -> false
                }
            }
        })

  mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.home:

                        BadgeDrawable badgeDrawable=mBottomNavigationView.getBadge(R.id.home);
                           if(badgeDrawable!=null){

                               if(badgeDrawable.isVisible()){
                                  mBottomNavigationView.removeBadge(R.id.home);
                               }
                           }
                           else{
                            badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
                            badgeDrawable.setNumber(12);
                           }

                      return true;
                    case R.id.chat:
                        BadgeDrawable badgeDrawable1=mBottomNavigationView.getBadge(R.id.chat);
                        if(badgeDrawable1!=null){

                            if(badgeDrawable1.isVisible()){
                                mBottomNavigationView.removeBadge(R.id.chat);
                            }
                        }
                        else{
                            badgeDrawable1=mBottomNavigationView.getOrCreateBadge(R.id.chat);
                            badgeDrawable1.setNumber(12);
                        }
                        return true;
                    case R.id.profil:
                        BadgeDrawable badgeDrawable2=mBottomNavigationView.getBadge(R.id.profil);
                        if(badgeDrawable2!=null){

                            if(badgeDrawable2.isVisible()){
                                mBottomNavigationView.removeBadge(R.id.profil);
                            }
                        }
                        else{
                            badgeDrawable2=mBottomNavigationView.getOrCreateBadge(R.id.profil);
                            badgeDrawable2.setNumber(12);
                        }
                        return true;
                }

                return false;
            }
        });

Le code complet

package com.example.bottomnavigationview3

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.TextView
import com.google.android.material.badge.BadgeDrawable
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    private lateinit var mbottomNavigationView: BottomNavigationView
    private lateinit var tvContenName: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mbottomNavigationView=findViewById(R.id.bottom_navigation)
        tvContenName=findViewById(R.id.content_name)

        mbottomNavigationView.setOnNavigationItemSelectedListener(object :BottomNavigationView.OnNavigationItemSelectedListener{

            override fun onNavigationItemSelected(item: MenuItem): Boolean {
                return when(item.itemId){

                    R.id.home ->{
                      mbottomNavigationView.getBadge(R.id.home)?.let { badgeDrawable ->
                          if(badgeDrawable.isVisible){
                             mbottomNavigationView.removeBadge(R.id.home)
                          }
                      }?:mbottomNavigationView.getOrCreateBadge(R.id.home)?.apply {
                          number=12
                      }
                        
                        true
                    }
                    R.id.chat ->{
                        mbottomNavigationView.getBadge(R.id.chat)?.let { badgeDrawable ->
                            if(badgeDrawable.isVisible){
                                mbottomNavigationView.removeBadge(R.id.chat)
                            }
                        }?:mbottomNavigationView.getOrCreateBadge(R.id.chat)?.apply {
                            number=12
                        }
                        true
                    }

                    R.id.profil ->{
                        mbottomNavigationView.getBadge(R.id.profil)?.let { badgeDrawable ->
                            if(badgeDrawable.isVisible){
                                mbottomNavigationView.removeBadge(R.id.profil)
                            }
                        }?:mbottomNavigationView.getOrCreateBadge(R.id.profil)?.apply {
                            number=12
                        }
                        true
                    }
                    else -> false
                }
            }
        })
    }
}
package com.example.bottomnavigationview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBottomNavigationView;
    private TextView tvContenName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBottomNavigationView=findViewById(R.id.bottom_navigation);
        tvContenName=findViewById(R.id.content_name);

        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.home:

                        BadgeDrawable badgeDrawable=mBottomNavigationView.getBadge(R.id.home);
                           if(badgeDrawable!=null){

                               if(badgeDrawable.isVisible()){
                                  mBottomNavigationView.removeBadge(R.id.home);
                               }
                           }
                           else{
                            badgeDrawable=mBottomNavigationView.getOrCreateBadge(R.id.home);
                            badgeDrawable.setNumber(12);
                           }

                      return true;
                    case R.id.chat:
                        BadgeDrawable badgeDrawable1=mBottomNavigationView.getBadge(R.id.chat);
                        if(badgeDrawable1!=null){

                            if(badgeDrawable1.isVisible()){
                                mBottomNavigationView.removeBadge(R.id.chat);
                            }
                        }
                        else{
                            badgeDrawable1=mBottomNavigationView.getOrCreateBadge(R.id.chat);
                            badgeDrawable1.setNumber(12);
                        }
                        return true;
                    case R.id.profil:
                        BadgeDrawable badgeDrawable2=mBottomNavigationView.getBadge(R.id.profil);
                        if(badgeDrawable2!=null){

                            if(badgeDrawable2.isVisible()){
                                mBottomNavigationView.removeBadge(R.id.profil);
                            }
                        }
                        else{
                            badgeDrawable2=mBottomNavigationView.getOrCreateBadge(R.id.profil);
                            badgeDrawable2.setNumber(12);
                        }
                        return true;
                }

                return false;
            }
        });
    }
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/content_name"
            android:text="@string/tv_str_content_home"
            android:layout_gravity="center"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavigation_color_state"
        app:itemTextColor="@drawable/bottomnavigation_color_state"
        app:itemRippleColor="@color/colorPrimary"
        app:labelVisibilityMode="auto"
        app:menu="@menu/menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
bottom nvaigation avec suppression des badges

Les nouveaux styles material

En utilisant la Bottom Navigation View avec un des nouveaux thème material ( Theme.MaterialComponents ), cela fournira au Bottom Navigation View le nouveau style des composant material. Si le thème de votre application n’hérite pas d’un des nouveaux thème material vous pouvez tout simplement appliquer un des nouveaux style material au widget dans le fichier xml.

Le nouveau style material

Le nouveau style material par défaut du Bottom Navigation View définit une nouvelle valeur pour la couleur ;la taille du texte et une mise à jour pour son comportement.La Bottom Navigation View par défaut à une couleur d’arrière plan blanche , la couleur tu texte et de l’icon est définie à la couleur primaire.

Le style par défaut de la Bottom Navigation View peut être définit avec l’attribut style comme suit

style="@style/Widget.MaterialComponents.BottomNavigationView"
  <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        style="@style/Widget.MaterialComponents.BottomNavigationView"
        ... />

Le style material coloré

Ce style hérite du style par défaut de la Bottom Navigation View mais utilise des couleurs qui sont différente des couleurs du style par défaut .Vous pouvez l’utiliser lorsque vous souhaitez que la couleur d’arrière plan de la barre de navigation soit défini à la couleur primaire. et la couleur des icons et du texte définie à une nuance de la couleur blanche.

Le style coloré de la Bottom Navigation View peut être définit avec l’attribut style comme suit

style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
 <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        ... />

Style hérité

Vous pouvez définir ce style sur votre Bottom Navigation View si vous souhaitez avoir barre l’ancienne barre de navigation avec l’ancien comportement

Vous pouvez ajouter ce style avec l’attribut style comme suit

style="@style/Widget.Design.BottomNavigationView"
  <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        style="@style/Widget.Design.BottomNavigationView"
        .../>

Les attributs de thème du style par défaut

style="@style/Widget.MaterialComponents.BottomNavigationView"
Attribut du composantvaleur par défaut de l’attributs du thème
itemTextAppearanceActivetextAppearanceCaption
itemTextAppearanceInactivetextAppearanceCaption
android:backgroundcolorSurface
itemIconTint (checked)colorPrimary
itemIconTint (not checked)colorOnSurface at 60% opacity
itemTextColor (checked)colorPrimary
itemTextColor (not checked)colorOnSurface at 60% opacity

Style material coloré

style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
Attribut du composantvaleur par défaut de l’attribut du thème
itemTextAppearanceActivetextAppearanceCaption
itemTextAppearanceInactivetextAppearanceCaption
android:backgroundcolorPrimary
itemIconTint (checked)colorOnPrimary
itemIconTint (not checked)colorOnPrimary at 60% opacity
itemTextColor (checked)colorOnPrimary
itemTextColor (not checked)colorOnPrimary at 60% opacity

Autres ressources

https://material.io/go/design-bottom-navigation

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/BottomNavigationView.java

https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView

Conclusion

Nous somme à la fin de ce tutoriel dans lequel nous avons découvert la Bottom Navigation View. J’espère que ce tutoriel vous aidera à utiliser ce composant.A bientôt pour un autre tutoriel.

ABONNEZ-VOUS A LA NEWSLETTER
Rejoignez la communauté de développeur Android pour apprendre encore plus sur le dévéloppement d'application Android.
Nous détestons les spam. Votre adresse email ne sera ni vendue ni partagée avec qui que ce soit.

Partager
  • 16
  •  
  •  
  • 1
  •  
  •  
    17
    Partages
  • 17
    Partages

Laisser un commentaire

Résoudre : *
30 × 14 =


%d blogueurs aiment cette page :