2

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.

enter image description here

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 : enter image description here

Please help me If any body has idea about this.

Thanks in Advance.

sam_k
  • 5,983
  • 14
  • 76
  • 110

2 Answers2

2

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

ps2010
  • 861
  • 1
  • 7
  • 13
  • Thanks for your reply.. I used but i didn't get radius shape.. I get effect in rectangle mode.. – sam_k May 13 '13 at 07:23
  • 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. – ps2010 May 14 '13 at 04:58
0

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>

PiyushMishra
  • 5,743
  • 6
  • 37
  • 57
  • thanks for answer.. so i have to use @ps2010's answer but just change only shape xml file with yours answers? – sam_k May 13 '13 at 08:15
  • @Sam_k yes you can check the state press or focus its only for the shape. – PiyushMishra May 13 '13 at 08:22
  • 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 – sam_k May 13 '13 at 08:24
  • @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" – PiyushMishra May 13 '13 at 09:06
  • Its also gives the same result – sam_k May 13 '13 at 12:24