How to colorize a drawable without affecting the transparent areas of the image?

Question

In most graphic programs like Photoshop and Gimp there is a colorize function so you can easily color a gray scale image with a color of your choice. I want to do the same thing with an image in my Android application. I have been looking into the setColorFilter function. This is what I tried.

ImageView border = (ImageView) findViewById(R.id.imageView);
int color = Color.parseColor("#F57F17"); // the color to use
border.setColorFilter(color, PorterDuff.Mode.OVERLAY);

This does exactly what I need. The only problem is that it also colors the transparent areas in the image. I want the transparent areas to stay transparent.

Is there any way to achieve this?

Answer 1

You are looking for SRC_ATOP:

ImageView border = (ImageView) findViewById(R.id.imageView);
int color = Color.parseColor("#F57F17"); // the color to use
border.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);

Answer 2

Colorize the drawable then set it back. I do this with binding and an adapter to override image colors of drawables.

Example, I change the drawable color based on selected status below:

  @JvmStatic
@BindingAdapter("backgroundDrawableChange")
fun backgroundDrawableChange(view: RelativeLayout, isSelected: Boolean){
    var bgDrawable: LayerDrawable = view.background as LayerDrawable
    var shape: GradientDrawable =  bgDrawable.findDrawableByLayerId(R.id.shapeId) as GradientDrawable
    shape.setColor(Color.parseColor((if (isSelected) YACustomPreference.getInstance(view.context).getPrimaryColorHex() else YACustomPreference.getInstance(view.context).getWhite())))
}

Here is another example of overriding menu item colors when you need more dynamic control.

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    inflater.inflate(R.menu.menu_info_fragment, menu)
    try{
        //get drawable filter, change color, and reassign
        var filterDrawable = menu.findItem(R.id.action_filter).icon
        filterDrawable = DrawableCompat.wrap(filterDrawable)
        DrawableCompat.setTint(filterDrawable, Color.parseColor(YACustomPreference.getInstance(activity!!).getPrimaryTextColorHex()))
        menu.findItem(R.id.action_filter).icon = filterDrawable

        //get searchview drawable change color and setup listener
        mSearchView = menu.findItem(R.id.action_search)?.actionView as SearchView
        mSearchView?.setOnQueryTextListener(this)
        val searchDrawableImageView = mSearchView?.findViewById<View>(androidx.appcompat.R.id.search_button) as ImageView
        val searchDrawable = ResourcesCompat.getDrawable(resources, R.drawable.ic_search_action, null)
        DrawableCompat.setTint(searchDrawable!!, Color.parseColor(YACustomPreference.getInstance(activity!!).getPrimaryTextColorHex()))
        searchDrawableImageView.setImageDrawable(searchDrawable)
    }catch (ex: Exception){
        A35Log.e(TAG, "Error updating SearchView drawable icon")
    }

    super.onCreateOptionsMenu(menu, inflater)
}

That should hopefully help you get what you are doing across the finish line. Happy Coding.