Adding a click-effect on a custom button with padded corners

Question

i am trying to add a click-effect on my xml-created button. So far i got the clickeffect running, but i cant manage to supply the click-effect the same rounded corners i have on the unclicked button; it looks horrible this way. In my gradient.xml I am supplying the same imagelayout with the rounded corners, but it seems to ignore this setting.

Can someone point me in the right direction?

enter image description here < --- >

my box with clickeffect.xml: (box_with_click_effect.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" 
    android:state_pressed="false" 
    android:drawable="@drawable/rounded_box" />
<item android:state_focused="true" 
    android:state_pressed="true" 
    android:drawable="@drawable/gradient" />
<item android:state_focused="false" 
    android:state_pressed="true" 
    android:drawable="@drawable/gradient" />
<item android:drawable="@drawable/rounded_box" />
</selector>

my button-drawable-xml: (rounded_box.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" >    
   <solid android:color="@color/my_orange"/>
   <corners android:radius="15px"/>
   <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> 
</shape>

my gradient.xml for the clicked-state: (gradient.xml)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
   <!--  THIS DOESN'T WORK: <bitmap android:src="@drawable/rounded_box"/> 
           SO I TRY THIS:   -->
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >   
        <solid android:color="@color/cocus_orange"/>
        <corners android:radius="15px"/>
        <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> 
    </shape>
</item>
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient android:angle="90" 
            android:startColor="#880f0f10" 
            android:centerColor="#880d0d0f" 
            android:endColor="#885d5d5e"/>
    </shape>
</item>
</layer-list>

why not use a nine patch drawable a background http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch. here's a blog http://www.dibbus.com/2011/03/9patch-images-in-android/ — Raghunandan, Oct 15 '13 at 09:44
because I am a rookie and I want to get used to styling via xmls. — bofredo, Oct 15 '13 at 09:48

Dyna · Accepted Answer · 2013-10-15T10:01:19.077

Change your code to this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
   <!--  THIS DOESN'T WORK: <bitmap android:src="@drawable/rounded_box"/> 
           SO I TRY THIS:   -->
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >   
        <solid android:color="@color/cocus_orange"/>
        <corners android:radius="15px"/>
        <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> 
    </shape>
</item>
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient android:angle="90" 
            android:startColor="#880f0f10" 
            android:centerColor="#880d0d0f" 
            android:endColor="#885d5d5e"/>

            <corners
                android:radius="15px" />
  </shape> 
</item>
</layer-list>

You can use this website to generate you buttons: android button maker

thx for the link, bookmarked it. now i will try your approach — bofredo, Oct 15 '13 at 09:51
i put the inside the -block and it is working fine. I totally didn't figure that the 2nd in gradient.xml is the look after the transition. Thank you, wilma... errr dyna! — bofredo, Oct 15 '13 at 09:56

score 0 · Answer 2 · answered Jan 02 '17 at 09:32

please try if needed:

By this we can avoid adding individual files for state pressed and normal. but serves perfectly.

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true" >
     <shape android:shape="rectangle"  >
         <corners android:radius="5dip" />
         <solid android:color="#a4c639"/>
         <stroke android:width="1px" android:color="#0dbcbf" />
     </shape>
 </item>
<item android:state_focused="true">
     <shape android:shape="rectangle"  >
         <corners android:radius="5dip" />
         <stroke android:width="1dip" android:color="#a4c639" />
         <solid android:color="#a4c639"/>       
     </shape>
 </item>  
<item >
    <shape android:shape="rectangle"  >
         <corners android:radius="5dip" />
<solid android:color="#0dbcbf"/>
</shape>
 </item>
</selector>

Adding a click-effect on a custom button with padded corners

2 Answers2

Linked