Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toolbar Action Button Icon color

I am using the appcompat-v7 toolbar and added some menu with icons.

My menu_items.xml

<item
    android:id="@+id/quit"
    android:title="Quit"
    android:icon="@drawable/ic_power"
    android:orderInCategory="700"
    app:showAsAction="never"/>
<item
    android:id="@+id/app_settings"
    android:orderInCategory="600"
    android:icon="@drawable/ic_cog"
    app:showAsAction="never"
    android:title="Settings"/>
<item
    android:id="@+id/help"
    android:orderInCategory="500"
    android:title="Help"
    android:icon="@drawable/ic_help"
    app:showAsAction="always" />
<item
    android:id="@+id/logout"
    android:orderInCategory="400"
    android:title="Logout"
    android:icon="@drawable/ic_logout"
    app:showAsAction="ifRoom" />
<item
    android:id="@+id/tip"
    android:orderInCategory="300"
    android:title="Give Tip"
    android:icon="@drawable/ic_coffee"
    app:showAsAction="ifRoom" />
<item
    android:id="@+id/withdraw"
    android:orderInCategory="200"
    android:title="Withdraw"
    android:icon="@drawable/ic_bank"
    app:showAsAction="ifRoom" />
<item
    android:id="@+id/deposit"
    android:orderInCategory="100"
    android:title="Deposit"
    android:icon="@drawable/ic_cash_multiple"
    app:showAsAction="ifRoom" />

The icons are originally black but i was expecting it to appear as white on the toolbar if I use the

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Instead it shows black icons. black icons

My toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:layout_width="match_parent"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary"/>

How can I make the icons appear white?

Edit:

The icons shown on the toolbar are the only icons i want to change color.. Not all the icons, including the overflowed item's icon... overflow items

like image 321
Karyuu Ouji Avatar asked Jul 18 '16 05:07

Karyuu Ouji


People also ask

How do I change the color of my toolbar menu?

Open the colors. xml file by navigating to the app -> res -> values -> colors. xml. Create a color tag inside the resources tag with a name and set a color with its hex code.

Which attribute is used to set the color of the icon of the overflow menu?

The overflow background can be changed by defining a popupMenuStyle attribute in the theme. You should extend from Widget. Sherlock. PopupMenu in your own style where you can change the android:background attribute.


1 Answers

you can set manually like this

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);

        for(int i = 0; i < menu.size(); i++){
            Drawable drawable = menu.getItem(i).getIcon();
            if(drawable != null) {
                drawable.mutate();
                drawable.setColorFilter(getResources().getColor(R.color.whiteColor), PorterDuff.Mode.SRC_ATOP);
            }
        }

        return true;
    }

for particular icon:

MenuItem favoriteItem = menu.findItem(R.id.action_favorite);
Drawable newIcon = (Drawable)favoriteItem.getIcon();
newIcon.mutate().setColorFilter(Color.argb(255, 200, 200, 200), PorterDuff.Mode.SRC_IN);
favoriteItem.setIcon(newIcon);

if your orientation changing runtime then you can check orientation using condition and set menu color in this condition.

like this:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    // Checks the orientation of the screen
    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();

       // here you can set menu item color if it landScape

    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
        Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();        
    }
}

or if you dont want to rotate your screen, you can simply set in manifest file like this:

<activity android:name=".activities.MainActivity"
            android:screenOrientation="portrait">

or you can use itemIconTint for particular items:

<item
    android:id="@+id/quit"
    android:title="Quit"
    android:icon="@drawable/ic_power"
    android:orderInCategory="700"
    **app:itemIconTint="@color/black"**
    app:showAsAction="never"/>
<item
    android:id="@+id/app_settings"
    android:orderInCategory="600"
    android:icon="@drawable/ic_cog"
    app:showAsAction="never"
    **app:itemIconTint="@color/black"**
    android:title="Settings"/>
like image 88
Sagar Chavada Avatar answered Oct 18 '22 12:10

Sagar Chavada