Android: Bas mode de Navigation - changement de l'icône de l'élément sélectionné

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>

MainActivity cliquez sur

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 inférieure de la position sélectionnée. Comment pouvons-nous réaliser cette fonction lorsque l'utilisateur clique sur un élément?

(si l'utilisateur a cliqué sur un élément, puis le changement d'icône à l'autre)

OriginalL'auteur Adarsh | 2017-01-24

19

Vous devez réinitialiser l'icône onclick, puis sur le commutateur cas, vous devez définir les un vous avez besoin de changer, de sorte que lorsque sélectionné, l'icône modifier.
```
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:
            }
```
Je pense qu'il serait utile d'ajouter explicitement ce morceau de code en déclarant "item". MenuItem item = menu.findItem(R. id.action_favorites);
je vais essayer ce code, c'est le travail, mais quand je clique sur l'icône autres, alors il n'est pas défini par défaut de l'icône, à remplir l'icône ou de ne pas remplir icône
cela fonctionne, mais comment faire pour réinitialiser l'icône à celui d'origine quand un autre élément est cliqué
dans mon cas, j'essayais juste de changer de teinte différente couleur pour différentes bouton, arrivé en, de bottomNavigationView.itemIconTintList = ColorStateList.valueOf(ContextCompat.getColor(ce, iconColor))
Cela fonctionne, mais pourrait être un bon peu de travail supplémentaire. Vérifier les réponses ci-dessous pour les solutions plus propres.

OriginalL'auteur Henrique César Madeira
45

Vous pouvez simplement créer drawable sélecteur dans le dossier drawable et de l'image peut être changer en fonction de l'état du widget utilisé en 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>
```
Cela fonctionne mieux que la méthode de programmation. L'état de spécifier est en fait android:state_checked pas android:state_selected
Où s'adresser?
Vous devez appliquer ici: <android.support.design.widget.NavigationView . . app:itemTextColor="@drawable/your_selector"/>
sa ne fonctionne pas dans la version d'android kitkat. app se crash.
supprimer la teinte du fond de navigation de code xml pour restaurer la couleur d'origine des icônes

OriginalL'auteur kuljeet singh
28

Si les solutions ci-dessus ne sont pas de travail pour vous pour modifier l'élément sélectionné l'icône puis ajouter en dessous de la ligne de code:
```
bottomNavigationView.setItemIconTintList(null);
```
Cela va désactiver la teinte de l'effet de l'élément sélectionné icône.

J'ai eu le même problème. J'ai ajouté un sélecteur de drawable pour changer l'icône de BottomNavigationView élément lors de son vérifiés et sélectionnés.

Fonctionne bien Thnx.
merci de votre réponse m'a aidé à montrer icône d'origine au lieu de rectangle coloré.
C'est la réponse à tous les problèmes rencontrés ci-dessus, lorsque vous réglez le sélecteur de fond, il ne fonctionnera jamais sans cela, merci
Il fonctionne bien. N'oubliez pas de créer sélecteur avec un drawable et de l'utiliser dans le menu fichier
il a travaillé, mais je suis curieux de trouver l'équivalent pour la mise en page xml attribut. "@null" ne fonctionne pas pour moi.

OriginalL'auteur KishanSolanki124
12

Bon, je voulais comprendre comment ces objets ont leur propre image, et avec une certaine confusion dans les commentaires sur l'endroit où il devrait aller, j'ai voulu taper cette réponse.

D'abord créer votre menu et ses éléments. Votre sélecteur ira à l'intérieur de ces éléments dans le ICÔNE valeur. Ici, nous avons 2 sélecteurs, chacun fait de 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" />
```
Maintenant, voici votre sélecteur de fichier qui sera installé dans votre dossier drawable.
```
<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>
```
Dernière étape a été fourni par @
KishanSolanki124

Ajouter cette ligne de code à votre BottomNavigationView.
```
BottomNavigationView.setItemIconTintList(null);
```
Là vous l'avez. Tout fonctionne comme un charme.

comment changer l'icône de la couleur du texte??
Je crois que vous pouvez le régler sur la navigationListener. BottomNavigationView.SetTextColor

OriginalL'auteur A. Petrizza

J'ai trouvé c'est la meilleure approche à utiliser le sélecteur de drawable: -

Drawable nom est child_selector.xml au 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>

Il suffit de l'ajouter dans votre bottom_navigation_main.xml:-

<?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>

Bonne chance.

OriginalL'auteur Saiful Islam Sajib

Créer un sélecteur et de spécifier drawable pour chaque état (par exemple, enregistrés et non membres)

<?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>

il semble qu'il ne fonctionne pas
il a travaillé pour moi version du SDK de 25 ans, mais ne travaillant pas pour le SDK de la version 26. Avez-vous une idée?

OriginalL'auteur Pehlaj

Trouvé la réponse. nous pouvons utiliser

item.setIcon(R.drawable.icon_name)

de changer l'icône .. va essayer 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;
                }
            });

cela fonctionne, mais comment faire pour réinitialiser l'icône à celui d'origine quand un autre élément est cliqué.
regarde ma réponse au-dessus de celui-ci. Utilisez un sélecteur et il peut utiliser les 2 images différentes, entièrement ou a changé de couleur de l'image(Ce que mon application est en train de faire)

OriginalL'auteur Adarsh

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

Pour ceux qui se demandent comment la définir de la programmation, envisager d'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
}

OriginalL'auteur Wesely

Vous devez vous connecter pour publier un commentaire.