3

I'm currently developing an android app where I use transparent png's as buttons for the user interface.

The buttons look kinda like this:

enter image description here

When the user presses the button I want to automatically tint the non-transparent pixels in the image to a darker color.

Currently I use an xml selector with different drawables for each state. This obviously doesn't scale well since I need to make several versions of each image in photoshop.

Any solutions? I heard that you can use the setColorFilter method on ImageView's to achieve this, but a full explanation would be great!

Thanks!

monoceres
  • 4,722
  • 4
  • 38
  • 63

1 Answers1

2

set this image as source to ImageButton and set ImageButton's state (backgriund) using xml state list, something like this

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape
            >

            <gradient
                android:startColor="@android:color/background_light"
                android:endColor="@android:color/darker_gray"
                android:angle="90"/>
             <stroke
                android:width="1dp"
                android:color="#999999" />
            <corners
                android:radius="9dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/transparent"
                android:angle="270"/>
            <stroke
                android:width="1dp"
                android:color="#989797" />
            <corners
                android:radius="9dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/transparent"
                android:angle="90"/>
             <stroke
                android:width="1dp"
                android:color="#999999" />
            <corners
                android:radius="9dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>
</selector>
ngesh
  • 13,398
  • 4
  • 44
  • 60
  • I gotta say, that looks pretty nice, however it's not what I'm looking for, this fills the background with grey, I want the non-transparent green pixels in the image to become darker. – monoceres Feb 21 '12 at 12:08
  • @monoceres.. now thats real tough... i think creating images in photoshop is one way to go.. Donno if there are other ways.. – ngesh Feb 21 '12 at 12:13
  • @monoceres.. hane a look at these two answers.. http://stackoverflow.com/questions/1309629/how-to-change-colors-of-a-drawable-in-android... and http://stackoverflow.com/questions/5702521/android-button-setcolorfilter-behaviour – ngesh Feb 21 '12 at 12:16