Android ActionBar/Toolbar Color style dynamically

Yogendra singh

4 January 2021

Android Toolbar or AppBar color:

We can apply the app theme color dynamically. In this blog, we will learn to apply the Toolbar/ActionBar color style dynamically.

We can provide color configuration at the web end to control app theme color dynamically. In the dynamic color implementation, We have saved color in the app SharedPreferences and applied it at run time dynamically.

1. Toolbar navigation icon, overflow icon, and text color

    fun setToolbarThemeColor(toolbar: Toolbar) {
            //Get saved dynamic color from SharedPreferences
            val background = Color.parseColor(AppSharedPref.getAppThemeColor(toolbar.context))
            val foreground = Color.parseColor(AppSharedPref.getAppThemeTextColor(toolbar.context))

            //Background drawable
            toolbar.background = ColorDrawable(background)

            //Title text color
            toolbar.setTitleTextColor(foreground)
            toolbar.setSubtitleTextColor(foreground)

            val colorFilter = PorterDuffColorFilter(foreground, PorterDuff.Mode.MULTIPLY)

            // Overflow icon
            val overflowIcon: Drawable? = toolbar.overflowIcon
            if (overflowIcon != null) {
                overflowIcon.colorFilter = colorFilter
                toolbar.overflowIcon = overflowIcon
            }

            //Navigation/Back arrow icon
            val navigationIcon: Drawable? = toolbar.navigationIcon
            if (navigationIcon != null) {
                navigationIcon.colorFilter = colorFilter
                toolbar.navigationIcon = navigationIcon
            }
        }

fun setToolbarThemeColor(toolbar: Toolbar) {

//Get saved dynamic color from SharedPreferences

val background = Color.parseColor(AppSharedPref.getAppThemeColor(toolbar.context))

val foreground = Color.parseColor(AppSharedPref.getAppThemeTextColor(toolbar.context))

//Background drawable

toolbar.background = ColorDrawable(background)

//Title text color

toolbar.setTitleTextColor(foreground)

toolbar.setSubtitleTextColor(foreground)

val colorFilter = PorterDuffColorFilter(foreground, PorterDuff.Mode.MULTIPLY)

// Overflow icon

val overflowIcon: Drawable? = toolbar.overflowIcon

if (overflowIcon != null) {

overflowIcon.colorFilter = colorFilter

toolbar.overflowIcon = overflowIcon

}

//Navigation/Back arrow icon

val navigationIcon: Drawable? = toolbar.navigationIcon

if (navigationIcon != null) {

navigationIcon.colorFilter = colorFilter

toolbar.navigationIcon = navigationIcon

}

In the case of AppBar, we can apply dynamically color style as below mentioned

2. AppBar navigation icon, overflow icon, and text color

fun setActionBarThemeColor(actionBar: androidx.appcompat.app.ActionBar, context: Context){
            
            val backgroundColor= Color.parseColor(AppSharedPref.getAppThemeColor(context))
            
            val foregroundColor = Color.parseColor(AppSharedPref.getAppThemeTextColor(context))
            
            actionBar.apply {
                val text = SpannableString(title ?: "")
                text.setSpan(ForegroundColorSpan(foregroundColor),0,text.length, Spannable.SPAN_INCLUSIVE_INCLUSIVE)
                val upArrow =ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_material)
                upArrow?.colorFilter= PorterDuffColorFilter(foregroundColor, PorterDuff.Mode.SRC_ATOP)
                title = text
                setBackgroundDrawable(ColorDrawable(backgroundColor))
                setHomeAsUpIndicator(upArrow)
            }
        }

fun setActionBarThemeColor(actionBar: androidx.appcompat.app.ActionBar, context: Context){

val backgroundColor= Color.parseColor(AppSharedPref.getAppThemeColor(context))

val foregroundColor = Color.parseColor(AppSharedPref.getAppThemeTextColor(context))

actionBar.apply {

val text = SpannableString(title ?: "")

text.setSpan(ForegroundColorSpan(foregroundColor),0,text.length, Spannable.SPAN_INCLUSIVE_INCLUSIVE)

val upArrow =ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_material)

upArrow?.colorFilter= PorterDuffColorFilter(foregroundColor, PorterDuff.Mode.SRC_ATOP)

title = text

setBackgroundDrawable(ColorDrawable(backgroundColor))

setHomeAsUpIndicator(upArrow)

}

Now, We will change the Colors of the menu items dynamically

2.Toolbar Menu Color

  fun setMenuItemIconColor(menu: Menu, context: Context) {
            //Get saved dynamic color from SharedPreferences
            val foregroundColor = Color.parseColor(AppSharedPref.getAppThemeTextColor(context))
            
            val iconColorFilter = PorterDuffColorFilter(foregroundColor, PorterDuff.Mode.SRC_ATOP)
            
           //iterate menu to change all items color
            for (i in 0 until menu.size()) {
                val drawable = menu.getItem(i).icon
                drawable?.apply {
                    mutate()
                    drawable.colorFilter = iconColorFilter
                }
            }
        }

fun setMenuItemIconColor(menu: Menu, context: Context) {

//Get saved dynamic color from SharedPreferences

val foregroundColor = Color.parseColor(AppSharedPref.getAppThemeTextColor(context))

val iconColorFilter = PorterDuffColorFilter(foregroundColor, PorterDuff.Mode.SRC_ATOP)

//iterate menu to change all items color

for (i in 0 until menu.size()) {

val drawable = menu.getItem(i).icon

drawable?.apply {

mutate()

drawable.colorFilter = iconColorFilter

}

Hope it will help you apply dynamic Toolbar or AppBar color style dynamically.

Happy Learning 🙂