XML drawable composed of png and overlay

Question

I have a png button, which is enabled, non-pressed. When user click the button, I want only to darken the png. I need something like this:

  <selector xmlns:android="http://schemas.android.com/apk/res/android" >
  //normal button with background my_button.png
        <item 
            android:state_enabled="true" 
            android:drawable="@drawable/my_button"   //my_button.png
            />
  //pressed button with background my_button.png overlayed by 50% black
        <item 
            android:state_pressed="true"
            android:state_enabled="true"    
            >
            <RelativeLayout 
               android:layout_width="wrap_content"
               android:layout_height="wrap_content">

              <bitmap  android:src="@drawable/my_button"/>
              <color android:color="#00000088"/>
            </RelativeLayout>
        </item>      
    </selector>

Is there some way how to do that? Or do I must have another png file?

Answer 1

In my_button_bg.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_normal"/>
</selector>

button_normal is a png

button_pressed is an xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/button_normal"/>
    <item android:drawable="@color/btn_bg_pressed_mask"/>
</layer-list>

where btn_bg_pressed_mask is a color:

<color name="btn_bg_pressed_mask">#19000000</color>

Answer 2

This should work

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_enabled="true"
        android:drawable="@drawable/my_button" />
    <item>
        <selector>
            <item
                android:state_pressed="true"
                android:state_enabled="true">
                <color android:color="#00000088" />
            </item>
        </selector>
    </item>

</layer-list>