How can I set the colour of icons (home and overflow menu icon) in a Toolbar
/AppBarLayout
programmatically?
I want to change the toolbar's colour scheme for a single fragment in an activity. Setting the AppBarLayout
's background to a light colour (e.g. light gray with appBarLayout.setBackgroundResource(..);
) results in white icons and a white title which are barely visible.
Its layout is as follows:
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ToolbarStyle"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
Solution found
Change overflow icon is easy with support 23. Here is a method from Lorne Laliberte answer
public static void setOverflowButtonColor(final Toolbar toolbar, final int color) {
Drawable drawable = toolbar.getOverflowIcon();
if(drawable != null) {
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), color);
toolbar.setOverflowIcon(drawable);
}
}
You can change your home as up passing your custom drawable..
getSupportActionBar().setHomeAsUpIndicator(R.drawable.your_drawable)
or changing its color
final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
EDIT: If you want to change more elements here is good post to change all toolbar icons colors.
Hope this helps!!
I've accepted the most helpful answer (and commented on it) explaining that I used a combination of its linked code snippets to form a single AppBarLayout
/Toolbar
colouring method. It covers background, title, subtitle, back/drawer icon and overflow icon colours, as well as any custom ImageButtons
added. Here's my result (forgive the English 'colour' spelling(!)..):
public static void colouriseToolbar(AppBarLayout appBarLayout, @ColorInt int background, @ColorInt int foreground) {
if (appBarLayout == null) return;
appBarLayout.setBackgroundColor(background);
final Toolbar toolbar = (Toolbar)appBarLayout.getChildAt(0);
if (toolbar == null) return;
toolbar.setTitleTextColor(foreground);
toolbar.setSubtitleTextColor(foreground);
final PorterDuffColorFilter colorFilter
= new PorterDuffColorFilter(foreground, PorterDuff.Mode.MULTIPLY);
for (int i = 0; i < toolbar.getChildCount(); i++) {
final View view = toolbar.getChildAt(i);
//todo: cal icon?
Log.d(Globals.TAG, "view: "+i+" "+view.getClass().toString());
//Back button or drawer open button
if (view instanceof ImageButton) {
((ImageButton)view).getDrawable().setColorFilter(colorFilter);
}
if (view instanceof ActionMenuView) {
for (int j = 0; j < ((ActionMenuView) view).getChildCount(); j++) {
final View innerView = ((ActionMenuView)view).getChildAt(j);
//Any ActionMenuViews - icons that are not back button, text or overflow menu
if (innerView instanceof ActionMenuItemView) {
Log.d(Globals.TAG, "view (actionmenuitemviwe): "+i);
final Drawable[] drawables = ((ActionMenuItemView)innerView).getCompoundDrawables();
for (int k = 0; k < drawables.length; k++) {
final Drawable drawable = drawables[k];
if (drawable != null) {
final int drawableIndex = k;
//Set the color filter in separate thread
//by adding it to the message queue - won't work otherwise
innerView.post(new Runnable() {
@Override
public void run() {
((ActionMenuItemView) innerView).getCompoundDrawables()[drawableIndex].setColorFilter(colorFilter);
}
});
}
}
}
}
}
}
//Overflow icon
Drawable overflowIcon = toolbar.getOverflowIcon();
if (overflowIcon != null) {
overflowIcon.setColorFilter(colorFilter);
toolbar.setOverflowIcon(overflowIcon);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With