web-dev-qa-db-fra.com

Android: Vue de navigation du bas - icône de changement 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 click

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 en 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 est remplacée par un autre)

androidandroid-layoutandroid-support-librarybottomnavigationview
35
Adarsh

Vous devez réinitialiser l'icône onclick, puis sur le boîtier du commutateur, vous ne devez définir que celui que vous devez modifier, donc uniquement lorsque cette option est sélectionnée, 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:
            }
21
Henrique César Madeira

Vous pouvez simplement créer un sélecteur pouvant être dessiné dans un dossier pouvant être dessiné 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>
59
kuljeet singh

Si les solutions ci-dessus ne vous permettent pas de 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é.

38
KishanSolanki124

D'accord, je voulais comprendre comment attribuer à chaque élément sa propre image et, avec une certaine confusion dans les commentaires sur l'endroit où il devrait aller, je voulais dactylographier cette réponse.

Commencez par créer votre menu et ses éléments. Votre sélecteur ira à l'intérieur de ces éléments dans la valeur [~ # ~] icône [~ # ~] . Ici nous avons 2 sélecteurs, chacun fait pour son article 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 fichier de sélecteur qui sera logé dans votre dossier pouvant être dessiné.

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

19
A. Petrizza

J'ai trouvé que cette approche est préférable d'utiliser sélecteur dessinable: -

Au début, créez un fichier XML dans votre dossier pouvant être dessiné. Par exemple, le nom du fichier XML est child_selector.xml dans le dossier pouvant être dessiné.

<?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 le menu de votre bottom_navigation_main.xml: -

J'aime: 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.

17
Saiful Islam Sajib

Créez un sélecteur et spécifiez le 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

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

Pour ceux qui se demandent comment le redéfinir sur Origine icône non sélectionnée par programmation, envisagez de 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
}
1
Wesely

Trouvé la réponse. on peut utiliser

item.setIcon(R.drawable.icon_name)

pour changer l'icone .. va essayer d'importer 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;
                }
            });
1
Adarsh