3

I have a png file that is transparent outside which is used as an icon image somewhere in my UI; I'd like for the user to be able to specify a different color for it at runtime (as in the image on the left below, assuming I have the android icon); or a different "background" image (Image on the right below, suppose the icon is a shape combining a circle and a triangle). I read this post which used ColorFilter to set all the white color pixels to another color in code; but it doesn't allow me to change the "background" of the icon. I guess I probably can do this with a ClipDrawable but I can't figure out how.

A: Suppose I have the android icon B: Suppose the icon is a shape combining a circle and a triangle)

Community
  • 1
  • 1
mobileTofu
  • 1,071
  • 2
  • 14
  • 25
  • Sorry maybe I don't understand. But why the solution is not just setting background color for layout, containing your icon image with transparent regions? – peter.bartos Sep 11 '11 at 13:11
  • @teepee, I think that's because I don't know how to do what you just stated. – mobileTofu Sep 11 '11 at 13:51

1 Answers1

1

If you use ImageView, you can set also the source of image (android:src) but also background for the image (android:background). So if your image has a transparent region, or region with alpha channel, the background color will be used for these pixels.

The background color then can be changed dynamically. Can you use this approach?

    imageView.setBackgroundColor(0x00FF0000); // red
peter.bartos
  • 11,855
  • 3
  • 51
  • 62
  • Thanks for the tip. Could you share part of the code as to how to set the .png with an alpha channel to the imageView? I guess either I set it the wrong ways or had produced the .png the wrong way but the background had never showed through. – mobileTofu Sep 11 '11 at 14:04
  • I define the png image simply in XML layout as: . Check your png image in photoshop or some other editor, if the transparent color is really transparent - you can compare it with android icon.png – peter.bartos Sep 11 '11 at 14:14
  • I think I did try what you just said as well, the resultant image was just a red box and not clipped by the png. And yes I checked and my png had a transparent background. – mobileTofu Sep 11 '11 at 14:18
  • Sorry the resultant image was one showing on top of a red box, instead of clipping the red box. – mobileTofu Sep 11 '11 at 14:27
  • oh, now I see, what you would like to achieve :) – peter.bartos Sep 11 '11 at 14:32
  • It would be great if all this could be achieved by providing some drawable resources in xml files for the imageview. – mobileTofu Sep 11 '11 at 14:36
  • Different idea is to use RelativeLayout or FrameLayout. Put your clip mask on top of your image, so clip mask with transparent middle and opaque borders will overlap the region of image you want. It will be not the best solution I think, but it should work :) – peter.bartos Sep 11 '11 at 14:37
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/3341/discussion-between-mobiletofu-and-teepee) – mobileTofu Sep 11 '11 at 14:48