J'ai ajouté BottomNavigationView dans mon application comme.

main.xml

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

bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_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>

Clic MainActivity

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        //need change icon of favotites here.
                    case R.id.action_schedules:

                    case R.id.action_music:

                }
                return true;
            }
        });

Je veux changer l'icône de la navigation du bas de la position sélectionnée. Comment pouvons-nous obtenir cette fonctionnalité lorsque l'utilisateur clique sur un élément?

(si l'utilisateur a cliqué sur un élément, l'icône passe à un autre)

83
Adarsh 24 janv. 2017 à 13:44

11 réponses

Meilleure réponse

Vous devez réinitialiser l'icône en cliquant, puis sur le boîtier du commutateur, vous devez définir uniquement celui que vous devez modifier, donc uniquement lorsque sélectionné, l'icône change.

Menu menu = bottomNavigationView.getMenu();
menu.findItem(R.id.action_favorites).setIcon(favDrawable);

switch (item.getItemId()) {
                case R.id.action_favorites:
                     item.setIcon(favDrawableSelected);
                case R.id.action_schedules:
                case R.id.action_music:
            }
35
Henrique César Madeira 24 janv. 2017 à 11:04

Vous pouvez définir dynamiquement votre icône en utilisant cette méthode.

R.id.navigation_menu est l'identifiant de votre article dans votre R.menu.menu_bottom_navigation.

val menuItem = bottomNavigationView.menu.findItem(R.id.navigation_menu)
menuItem.setIcon(R.drawable.ic_icon)
0
Morgan Koh 3 mars 2020 à 03:11

Dans la bibliothèque de conception de matériaux les plus récents, le comportement par défaut de BottomNavigation est fourni là où vous n'avez pas besoin de fournir la propriété itemIconTint, il la gérera automatiquement.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:itemBackground="@color/white"
    app:itemTextColor="@color/textBlue"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_navigation"
    app:labelVisibilityMode="labeled"
    app:itemTextAppearanceActive="@color/colorPrimary"
    />
0
ice spirit 7 nov. 2019 à 07:15

D'accord, je voulais comprendre comment chaque élément avait sa propre image, et avec une certaine confusion dans les commentaires sur la destination, je voulais taper cette réponse.

Créez d'abord votre menu et ses éléments. Votre sélecteur ira à l'intérieur de ces éléments dans la valeur ICON . Ici, nous avons 2 sélecteurs, chacun conçu pour son élément de menu.

item
    android:id="@+id/navigation_home"
    android:icon="@drawable/navigation_home_selector"
    android:title="@string/title_home" />
item
    android:id="@+id/navigation_profile"
    android:icon="@drawable/navigation_profile_selector"
    android:title="@string/title_profile" />

Voici maintenant votre fichier de sélection qui sera hébergé dans votre dossier dessinable.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/menu" android:state_checked="false"/>
</selector>

La dernière étape a été fournie par @ KishanSolanki124

Ajoutez cette ligne de code à votre BottomNavigationView.

BottomNavigationView.setItemIconTintList(null);

Voilà. Tout fonctionne comme un charme.

27
A. Petrizza 25 nov. 2018 à 08:50

J'ai trouvé la réponse. on peut utiliser

item.setIcon(R.drawable.icon_name) 

Pour changer l'icône .. essaiera d'améliorer la réponse

 bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            //change the icon
                         item.setIcon(R.drawable.icon_name);
                        case R.id.action_schedules:

                        case R.id.action_music:

                    }
                    return true;
                }
            });
0
Adarsh 24 janv. 2017 à 11:00

Si les solutions ci-dessus ne fonctionnent pas pour que vous puissiez modifier l'icône de l'élément sélectionné, ajoutez la ligne ci-dessous à votre code:

bottomNavigationView.setItemIconTintList(null);

Cela désactivera l'effet de teinte de l'icône de l'élément sélectionné.

J'ai eu le même problème. J'ai ajouté un sélecteur pouvant être dessiné pour changer l'icône de l'élément BottomNavigationView lorsqu'il est coché / sélectionné.

63
Kishan Solanki 9 nov. 2017 à 14:06

Créez un sélecteur et spécifiez dessiné pour chaque état (par exemple, les états cochés et non cochés)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/calender_green" android:state_checked="true"/>
  <item android:drawable="@drawable/calender_black" android:state_checked="false"/>
</selector>
3
Pehlaj - Mobile Apps Developer 25 mai 2017 à 09:21

Merci pour la méthode selector, qui fonctionne pour moi (api v26)

Pour ceux qui se demandent comment le rétablir par programmation sur icône non sélectionnée d'origine, pensez à l'ajouter à votre OnNavigationItemSelectedListener avant votre switch(Java) ou when(Kotlin):

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home)
    navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account)
    navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading)
    navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet)
    when (item.itemId) {
        R.id.navigation_home -> {
            message.setText(R.string.title_home)
            item.setIcon(R.drawable.ic_tab_home_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_account -> {
            message.setText(R.string.title_account)
            item.setIcon(R.drawable.ic_tab_account_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_trading -> {
            message.setText(R.string.title_trading)
            item.setIcon(R.drawable.ic_tab_trading_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_wallet-> {
            message.setText(R.string.title_wallet)
            item.setIcon(R.drawable.ic_tab_wallet_active)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}
2
Wesely 17 avril 2019 à 02:49

La réponse ci-dessus de ajay singh https://stackoverflow.com/a/57248961/9793057 m'a aidé, ainsi que employant des réponses d'en haut.

Le code suivant dans le dossier res-> drawable (selector_stock_bottom_nav_view.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/button_and_tab_color" android:state_checked="true" />
    <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>

Ce sont les attributs de ma vue de navigation inférieure

<com.google.android.material.bottomnavigation.BottomNavigationView

        app:itemIconTint="@drawable/selector_stock_bottom_nav_view" //To change icon color
        app:itemTextColor="@drawable/selector_stock_bottom_nav_view" //To change text color
        app:itemTextAppearanceActive="@style/stockBottomNavigationView.Active" //To change size of text during active state
        app:itemTextAppearanceInactive="@style/stockBottomNavigationView.InActive"
        app:menu="@menu/bottom_navigation_menu"
        app:labelVisibilityMode="labeled"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:selectedBackgroundVisible="false"
        android:id="@+id/stock_bottom_navigation"/>

JE N'AI PAS utilisé "BottomNavigationView.setItemIconTintList (null)" n'importe où dans mon code.

Maintenant, voici le morceau de code le plus important , assurez-vous de renvoyer "TRUE" dans l'auditeur de la vue de navigation inférieure, c'est-à-dire

private BottomNavigationView.OnNavigationItemSelectedListener stockBottomNavListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            return true;

        }
    };

Bonus: pour changer la taille du texte état actif / inactif Placez le code suivant dans le fichier styles.xml

    <style name="stockBottomNavigationView.InActive" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">7sp</item>
    </style>

    <style name="stockBottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">8sp</item>
    </style>

La réponse ci-dessus est une compilation de réponses à partir de diverses réponses dans stackoverflow liées aux vues de navigation du bas, au changement de couleur / taille des icônes et du texte.

0
Subind Suresh 29 févr. 2020 à 10:48

J'ai trouvé que c'était une meilleure approche pour utiliser le sélecteur dessinable: -

Au début, créez un fichier xml dans votre dossier dessinable. Par exemple, le nom de fichier xml est child_selector.xml dans le dossier drawable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/child" android:state_checked="false"/>
    <item android:drawable="@drawable/child_fill" android:state_checked="true"/>
</selector>

Ajoutez simplement child_selector dans l'élément de menu de votre bottom_navigation_main.xml: -

Comme: android: icon = "@ drawable / child_selector"

Exemple:

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

<item
    android:id="@+id/navigation_child"
    android:icon="@drawable/child_selector"
    android:title="@string/title_child" />

</menu>

Et vous devez ajouter la ligne suivante dans votre activité-

bottomNavigationView.setItemIconTintList(null);

Bonne chance.

50
Saiful Islam Sajib 23 mai 2019 à 15:16

Vous pouvez simplement créer un sélecteur dessinable dans un dossier dessinable et l'image peut être modifiée en fonction de l'état du widget utilisé dans la vue

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/calender_green" android:state_checked="true"/>
    <item android:drawable="@drawable/calender_black" android:state_checked="false"/>
</selector>
104
Nik 22 oct. 2017 à 21:58