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

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

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>