Photoshop Question posted in
The official user guide can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search