I am having a hard time with v7 Toolbar. What was once a simple task for ActionBar
, now seems overly complex. No matter what style I set, I cannot change either navigation icon (which opens a Drawer) or overflow menu icon (which opens a menu).
So I have a Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/ghex"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Light"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
I code it looks like this
//before in the code I do
mToolbar = (Toolbar) findViewById(R.id.toolbar);
private void initToolbar() {
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
}
Now, I need to change the Drawable
for those two icons.
How do I do this for compat v7 Toolbar
? I guess I would need to change the arrow visible when the drawer is open (Android 5.0).
To change the navigation icon you can use:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.my_icon);
To change the overflow icon you can use the method:
toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_my_menu);
If you would like to change the color of the icons you can use:
with a Material Components Theme (with a MaterialToolbar
for example):
<com.google.android.material.appbar.MaterialToolbar
android:theme="@style/MyThemeOverlay_Toolbar"
...>
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">@color/myColor</item>
</style>
With an AppCompat Theme :
<android.support.v7.widget.Toolbar
app:theme="@style/ThemeToolbar" />
<style name="ThemeToolbar" parent="Theme.AppCompat.Light">
<!-- navigation icon color -->
<item name="colorControlNormal">@color/my_color</item>
<!-- color of the menu overflow icon -->
<item name="android:textColorSecondary">@color/my_color</item>
</style>
You can also change the overflow icon overriding in the app theme the actionOverflowButtonStyle
attribute:
With a Material Components Theme:
<style name="AppTheme.Base" parent="Theme.MaterialComponents.DayNight">
<item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>
<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/my_overflow_menu</item>
</style>
With an AppCompat theme:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>
<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/my_overflow_menu</item>
</style>
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));
For right menu you can do it:
public static Drawable setTintDrawable(Drawable drawable, @ColorInt int color) {
drawable.clearColorFilter();
drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
drawable.invalidateSelf();
Drawable wrapDrawable = DrawableCompat.wrap(drawable).mutate();
DrawableCompat.setTint(wrapDrawable, color);
return wrapDrawable;
}
And in your activity
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_profile, menu);
Drawable send = menu.findItem(R.id.send);
Drawable msg = menu.findItem(R.id.message);
DrawableUtils.setTintDrawable(send.getIcon(), Color.WHITE);
DrawableUtils.setTintDrawable(msg.getIcon(), Color.WHITE);
return true;
}
This is the result:
There is a simple, easy and better approach, if we need to change only the color of hamburger/back icon.
It is better as it changes color only of desired icon, whereas colorControlNormal
and android:textColorSecondary
might affect other childviews of toolbar as well.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
if you want to change your icons to a Vector , create a new one. and then in your Activity.java
:
Toolbar toolbar = findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.your_icon);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.your_icon2));
To change Vector icon Color, go to your Vector XML file .. in this case it will be your_icon.xml
, it will look like this :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="@color/Your_Color"
android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>
Note that we used these attributes to set the Vector's color :
android:fillColor="@color/Your_Color"
Edit : You can't use a color from your colors.XML or somewhere else , the color must be decalred directly in the Vector's XML file.. so it will look like this :
android:fillColor="#FFF"
if you want to change menu item icons, arrow icon (back/up), and 3 dots icon you can use android:tint
<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:tint">@color/your_color</item>
</style>
All the above solutions worked for me in API 21 or greater, but did not in API 19 (KitKat). Making a small change did the trick for me in the earlier versions. Notice Widget.Holo
instead of Widget.AppCompat
<style name="OverFlowStyle" parent="@android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/ic_overflow</item>
</style>
在这一行添加您的默认主题;
<item name="colorControlNormal">@color/my_color</item>
which theme you have used in activity add below one line code
for white
<style name="AppTheme.NoActionBar">
<item name="android:tint">#ffffff</item>
</style>
or
<style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#ffffff</item>
</style>
for black
<style name="AppTheme.NoActionBar">
<item name="android:tint">#000000</item>
</style>
or
<style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tint">#000000</item>
</style>
You Can Use This Code
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.toolbar_Like:
item.setIcon(R.drawable.is_like);
break;
}
return true;
}
To change color for options menu items you can
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.your_menu, menu)
menu?.forEach {
it.icon.setTint(Color.your_color)
}
return true
}
In order to show the icon, use getSupportActionBar().setIcon(R.xxx.xxx)
In my case the code is:-
getSupportActionBar().setIcon (R.mipmap.ic_launcher);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.