Android : Image button or button Highlighted with Effect when Pressed

14,350

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

Share:
14,350
sam_k
Author by

sam_k

Updated on June 04, 2022

Comments

  • sam_k
    sam_k almost 2 years

    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.