Android: button or backlit image button with click effect

Question

Here, when I clicked on these left and right arrow button , at this time I want to see these effects on the button. The same thing happens in Iphone/IOS by default.

Can i make this effect?

Here I mentioned what exactly I want.

Here I used these xml files, but did not get 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 the android:background="@drawable/button_pressed.xml" string android:background="@drawable/button_pressed.xml" , but I didn’t get what I need.

I tried:

I used this xml file according to Piyush's answer, but I did not get success, and I get 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 to the top and bottom because I have limited space in the layout for this button. what will we think later, but why doesn’t it act like shadow and alpha, and all the same that I mentioned?

OUTPUT:

Please help me. If anyone has an idea about this.

Thanks at Advance.

Answer 1

The shape should be radially extended with fading from white to black out.

Try the following:

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

In addition, you cannot directly set this as the background for your button. You will need to create a file to select the selector, in which you specify different backgrounds depending on the state of the button. In this case, you need this background to be set only when the 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 the design of iOS when developing an application for Android. For an Android design guide, see: http://developer.android.com/design/building-blocks/buttons.html

Answer 2

can try this relatively circular shape, can adjust 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>