Android : Image button or button Highlighted with Effect when Pressed

Question

Here when i pressed on these left and right arrow button at that time I want to see these type of effects on button. These same thing happens in Iphone/IOS by default.

Can i make this type of effect?

Here i mentioned the pic what exactly i want.

Here i used this xml files but didnt got success.

button_pressed.xml

<?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:angle="180" android:centerColor="#657377" android:endColor="#AFFFFFFF" android:startColor="#FFFFFFFF" android:type="linear"/>

            <corners android:radius="10dp" />
        </shape></item>

</selector>

EDIT

I used android:background="@drawable/button_pressed.xml" line but i did not got which i want Exactly.

Tried :

I used this xml file as per Piyush's Answer but i didnt get success and i am getting this effect.

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/transparent" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadiusRatio="4"
            android:shape="ring"
            android:thicknessRatio="9"
            android:useLevel="false" >
            <gradient
                android:endColor="#00000000"
                android:gradientRadius="250"
                android:startColor="#ffffffff"
                android:type="radial" />
        </shape>
    </item>

</layer-list>

I agreed top and bottom part cuts because i have limited space in layout for this button. that we will think later but why its not taking effect like shadow and alpha and all that same like which i mentioned?

OUTPUT :

Please help me If any body has idea about this.

Thanks in Advance.

Shana

Did you get any solution to this ? even i want to acheive the same effect – Peterman

@Peterman NO :( have you got? – Shana

then how are you managing, this kind of effect ? i am trying to acheive this effect as well – Peterman

Answer 1

The shape has to be radially drawn with fading from white to black outwards.

Try this:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ffffffff"
        android:endColor="#00000000"
        android:gradientRadius="100"
        android:type="radial"/>
</shape>

Also, you cannot directly set this as a background to your button. You will have to create a selector drawable file in which you specify different backgrounds based on the state of the button. In this case, you need this background to be set only when button is pressed. The selector will look something like this:

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

PS: It is not recommended to replicate iOS design when designing an Android app. For Android design guidelines, please refer: http://developer.android.com/design/building-blocks/buttons.html

Decrease

Thanks for your reply.. I used but i didn't get radius shape.. I get effect in rectangle mode.. – Shana

Please make sure your drawable for arrow that you set as source is transparent outside of the arrow. Also make sure that the button is large enough to accomodate this highlight background. Also, if you can post the effect that you are getting after using my solution, I would be able to comment on it better. – Decrease

Answer 2

can try this regarding for circular shape, can set your colors accordingly.

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

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>
<item>
    <shape

        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:endColor="#00000000"
            android:gradientRadius="200"
            android:startColor="#ffffffff"
            android:type="radial" />
    </shape>
</item>

Willi

thanks for answer.. so i have to use @ps2010's answer but just change only shape xml file with yours answers? – Shana

@Sam_k yes you can check the state press or focus its only for the shape. – Willi

Ya i used but i am getting oval shape and not radius shape..I think i have to set alpha also..because you can see in image from center to outside color is becoming white to black gradualy – Shana

@Sam_k you need to modify it according to your need as you can see i deleted the unwanted things like android:innerRadiusRatio="4" and android:thicknessRatio="9" – Willi

Its also gives the same result – Shana