Dans ce tutoriel vous allez découvrir comment intégrer la Bottom Navigation View dans votre application android.
Table des matières
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>
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
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
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
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
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
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
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:
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
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.
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.
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
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
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
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);
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);
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);
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);
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>
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 composant | valeur par défaut de l’attributs du thème |
|---|---|
itemTextAppearanceActive | textAppearanceCaption |
itemTextAppearanceInactive | textAppearanceCaption |
android:background | colorSurface |
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 composant | valeur par défaut de l’attribut du thème |
|---|---|
itemTextAppearanceActive | textAppearanceCaption |
itemTextAppearanceInactive | textAppearanceCaption |
android:background | colorPrimary |
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
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.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.