Android: Bottom-Navigations-Ansicht - ändern Sie das Symbol des ausgewählten Elements

Habe ich Hinzugefügt BottomNavigationView in meiner Anwendung wie.

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 klicken Sie auf

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;
            }
        });

Will ich ändern das Symbol der unteren navigation der ausgewählten position. Wie können wir erreichen diese Funktion, wenn Benutzer klicken Sie auf ein Element?

(wenn Benutzer auf ein Element, dann das Symbol ändern, um ein anderes)

InformationsquelleAutor Adarsh | 2017-01-24

20

Sie zurücksetzen müssen Sie das Symbol anklicken, und dann auf den Schalter Fall müssen Sie nur die ein, die Sie ändern müssen, also nur, wenn das Symbol ausgewählt ändern.
```
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:
            }
```
- Ich denke, es wäre hilfreich, wenn Sie ausdrücklich hinzufügen, dass der Teil des Codes deklarieren 'Element' als gut. MenuItem item = menu.findItem(R. id.action_favorites);
- ich werde versuchen, diesen code es ist Arbeit, aber wenn ich auf anderes Symbol, dann ist es nicht " set default icon wie füllen Sie das Symbol oder nicht Symbol füllen
- dies funktioniert aber wie setzen Sie das Symbol zurück auf das original, wenn ein anderes Element angeklickt wird
- in meinem Fall war ich einfach zu ändern versuchen, verschiedene Farbe für unterschiedliche Taste, habe diese durch, bottomNavigationView.itemIconTintList = ColorStateList.valueOf(ContextCompat.getColor(this, iconColor))
- Dies funktioniert, könnte aber ein gutes Stück zusätzliche Arbeit. Überprüfen Sie die Antworten unten für sauberere Lösungen.
InformationsquelleAutor Henrique César Madeira
52

Können Sie einfach erstellen drawable-Auswahl im drawable-Ordner und die Bild kann sich ändern, je nach Zustand des widgets verwendet in Sicht
```
<?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>
```
- Dies funktioniert besser als die programmgesteuerte Methode. Der Staat angeben, ist eigentlich android:state_checked nicht android:state_selected
- Wo gelten diese?
- Sie sollte hier gelten: <android.support.design.widget.NavigationView . . app:itemTextColor="@drawable/your_selector"/>
- es funktioniert nicht in android kitkat version. app immer abstürzt.
- Wenn Sie dies tun, wird das logo ändern, aber die Auswahl der Farbe ist übernommen aus dem app-Thema Farbe. wissen Sie, wie Sie vermeiden, dass
- Dieser sollte gekennzeichnet sein als richtige Antwort.
- entfernen Sie den Farbton aus der unteren navigation xml-code, um wieder die ursprüngliche Farbe des icons
- Sie benötigen für Ihre Aktivität die nächste code: static { AppCompatDelegate.setCompatVectorFromResourcesEnabled(true); } Bitte überprüfen Sie die die Antwort
- Wie können Sie dies tun mit zwei Navigations-Elemente? Wenn ich will, Punkt eins zu ändern, um ein Bild und Ziffer 2 zu ändern, zu den anderen?
- entfernen itemIconTint von xml funktioniert immer noch nicht. bottomNavigationView.setItemIconTintList(null) ist die Lösung. Kennen Sie entspricht in xml?
- es gibt mehrere Tönungen gibt, ich denke, es ist ein hintergrund, Farbton, Symbol-Tönung und mehr. So versuchen, entfernen Sie alle und dann sehen wir weiter. Seiner irgendwann, da ich dieses problem behoben
InformationsquelleAutor kuljeet singh
34

Wenn die oben genannten Lösungen nicht für Sie arbeiten zu ändern ausgewählte Element-Symbol, dann fügen Sie folgende Zeile, um Ihren code:
```
bottomNavigationView.setItemIconTintList(null);
```
Deaktiviert das tint-Effekt des ausgewählten Elements-Symbol.

Ich hatte das gleiche problem. Ich habe drawable-Selektor für sich ändernde Symbol der BottomNavigationView Element, wenn sein markiert/ausgewählt.
- Arbeiten gut Thnx.
- vielen Dank deine Antwort hat mir geholfen zu zeigen, original-Symbol anstelle des farbigen Rechtecks.
- Dies ist die Antwort auf alle Probleme konfrontiert, oben, wenn Sie den hintergrund-Selektor wird niemals funktionieren ohne diese, Dank
- Es funktioniert gut. Vergessen Sie nicht, erstellen Selektor mit drawables und es verwenden, im Menü Datei
- es funktionierte, aber ich bin gespannt, das äquivalent für xml-layout-Attribut. "@null" hat bei mir nicht funktioniert.
InformationsquelleAutor KishanSolanki124
15

Okay ich wollte verstehen, wie jedes Element hat sein eigenes Bild, und einige Verwirrung in den Kommentaren auf, wo sollte es gehen, ich wollte zu geben, diese zu beantworten.

Zuerst erstellen Sie Ihr Menü und Ihre Elemente. Ihre Selektor innen gehen diese Elemente in der SYMBOL Wert. Hier haben wir 2 Auswahlen, die jeweils für dem Menüpunkt.
```
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" />
```
Nun, hier ist Ihre Selektor-Datei, die sich in Ihrer drawable Ordner.
```
<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>
```
Letzten Schritt wurde zur Verfügung gestellt von @
KishanSolanki124

Fügen Sie diese Zeile code auf Ihre BottomNavigationView.
```
BottomNavigationView.setItemIconTintList(null);
```
Dort haben Sie es. Alles funktioniert wie ein Charme.
- so ändern Sie das Symbol Textfarbe??
- Ich glaube, man kann dies auf die navigationListener. BottomNavigationView.SetTextColor
InformationsquelleAutor A. Petrizza
11

Ich festgestellt, dass dies der bessere Ansatz zu verwenden selector drawable: -

Zuerst erstellen Sie eine xml-Datei in Ihrem drawable-Ordner.
Für die Beispiel-xml-Datei-name child_selector.xml im drawable-Ordner.
```
<?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>
```
Fügen Sie einfach child_selector im Menüpunkt Ihrer bottom_navigation_main.xml:-

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

Beispiel:
```
<?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>
```
Muss und fügen Sie folgende Zeile in Ihrer Tätigkeit
```
bottomNavigationView.setItemIconTintList(null);
```
Glück.
- Als 5 andere Leute bereits vorgeschlagen, diese gleiche Lösung, es ist immer noch ein fehlender code-Zeile in Java/Kotlin, die erforderlich ist, um diese Arbeit zu machen. Leider.
- die eine fehlt?
- BottomNavigationView.setItemIconTintList(null);
- Ich habe diese Zeile Hinzugefügt und jetzt ist es gut funktioniert.
InformationsquelleAutor Saiful Islam Sajib

Erstellen Sie einen Auswahlbereich und geben Sie drawable für jeden Zustand (z.B. checked und unchecked Staaten)

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

scheint, es funktioniert nicht
es war für mich arbeiten, SDK-version, die 25, aber nicht die Arbeit für die SDK-version, 26. Haben Sie eine Idee?

InformationsquelleAutor Pehlaj

Fand die Antwort. wir können

item.setIcon(R.drawable.icon_name)

um das Symbol zu ändern .. werde versuchen Sie zu imporve Antwort

 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;
                }
            });

dies funktioniert aber wie setzen Sie das Symbol zurück auf das original, wenn ein anderes Element angeklickt wird.
schau in meine Antwort über dieser. Verwenden Sie einen Selektor und es können 2 verschiedene Bilder, die ganz oder eine Farbe, die geändert Bild(das, Was meine app macht)

InformationsquelleAutor Adarsh

Danke für die selector Methode, die funktioniert für mich (api v26)

Für diejenigen, die sich Fragen, wie Sie zurück zum Ursprung nicht ausgewählte Symbol programmgesteuert, prüfen, fügen Sie diese zu Ihrem OnNavigationItemSelectedListener vor Ihrer switch(Java) oder 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
}

InformationsquelleAutor Wesely

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.