Android: Set alpha on button on click. Preferably xml only

Question

I want to introduce a 'down' style on some buttons. I've created a style, and a state list.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/inactive_button_background" android:state_enabled="false"/>
    <item android:drawable="@drawable/active_button_background" android:state_enabled="true"/>
    <item android:drawable="@drawable/pressed_button_background" android:state_pressed="true"></item>
</selector>

The problem is that I want to be able to change just the alpha of the background when the button gets clicked (I will have variable backgrounds, so setting a sold color with alpha channel is not a solution).

And I want to do this from the declarative xml only (don't want to polute my code with layout stuff).

Problem is I don't know how to apply this alpha blending to the button from a xml drawable. I am pretty sure there's a way though.

Solution 1

I am bit late to answer this question but i just did this by changing the alpha value using View.onTouchListner

You can do this by implementing onTouch in this way

 @Override
public boolean onTouch(View v, MotionEvent event) {

    switch (event.getAction())
    {
        case MotionEvent.ACTION_DOWN:
            v.setAlpha(0.5f);
            break;
        case MotionEvent.ACTION_UP:
            v.setAlpha(1f);
        default : 
         v.setAlpha(1f)
    }
    return false;
}

I guess you cant change alpha value from drawable so you will have to do this in this way only.

Solution 2

This works perfectly

---

yourView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                v.setAlpha(0.5f);
                break;
            }
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                v.setAlpha(1f);
                break;
            }
        }
        return false;
    }
});

Solution 3

Adding something to Michael answer, if you are looking for a "softer" click animation. I added this:

btn.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent motionEvent) {
            switch (motionEvent.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                    v.animate().alpha(0.3f).setDuration(200).start();
                    break;
                case MotionEvent.ACTION_UP:
                    v.animate().alpha(1f).setDuration(200).start();
                default :
                    v.setAlpha(1f);
            }
            return false;
        }
    });
}

with lies on the same idea but with a animation

Solution 4

I know thats pretty old question, however I can't see the right answer according to question which was about alpha change using xml.
To do that you need to create selector which is already shown in a question and it is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/inactive_button_background" android:state_enabled="false"/>
    <item android:drawable="@drawable/active_button_background" android:state_enabled="true"/>
    <item android:drawable="@drawable/pressed_button_background" android:state_pressed="true"></item>
</selector>

So if you have only normal state drawable (assume its btn_background.png) and you need it 50% alpha in pressed state all you have to do is to create corresponding xml-drawable named pressed_button_background.xml (in drawable folder, no-dpi!). So this should be like following:

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/btn_background"
    android:alpha=".5" />

The same applies to disabled state, the only difference, I guess, is the alpha level which for this state could be like 30% or whatever designer says/wants ). So the shorter version will look like following (for button with drawable ic_edit.png):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <bitmap
            android:src="@drawable/ic_edit"
            android:alpha=".5" />
    </item>
    <item
        android:state_enabled="false">
        <bitmap
            android:src="@drawable/ic_edit"
            android:alpha=".3" />
    </item>
    <item
        android:drawable="@drawable/ic_edit" />
</selector>

View more solutions

Comments

[George]

Not necessarily. I know I can set it programmatically. I can also set it XML only, if I am using a solid color background (via #AARRGGBB drawable) and it works. Much similiar stuff can be acomplished without writing a line of java code. Why is there no way to set alpha to a drawable from xml remains a mystery to me.

[darryn.ten]

I don't think thats possible... There is an attribute android:alpha, but it only applies to views, not drawables. Also, it's only been available since API level 11.

[Weblance]

To do this in XML, you'd need some kind of parameter like android:foreground that would allow you to specify a drawable that sits on top of the view. Unfortunately that doesn't exist right now, so AFAIK there is no way to only do this in XML.

[couceirof]

You should handle the reset of the alpha as the default case. If the ACTION is CANCEL, for example, the button would stay half opaque.

[Rushabh Bhatt]

Ya you are right.I also was facing the same issue. I changed it in my code.I have updated the answer