How to set rounded buttons with background color and change color on pressed

Jcoder picture Jcoder · Jun 25, 2014 · Viewed 9.9k times · Source

In my android app there is a rounded rectangle button with green colored background. i did this using .xml file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >

<solid android:color="#B5D397" />

<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />


</shape>

and

 android:background="@drawable/rounded_btn"

in layout file

but when i press button is wasn't showing any effect(no change is color) so i used

@Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            Button view = (Button) v;
             view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);

and color of button changes to dark green after pressing it. Till here everything is working fine, but problem is after releasing button color remains dark green. i want it to be like as it was before pressing.I referred few examples which says to use selector in .xml file i.e

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="#c0c0c0"
        android:state_selected="true"/>
    <item
        android:color="#ffffff"
        android:state_pressed="true"/>
    <item
        android:color="#9A9A9A"
        android:state_focused="false"
        android:state_pressed="false"
        android:state_selected="false"/>
</selector>

Which also needs android:background="@drawable/btn_state" but i have already used android:background=@drawable/rounded_btn

So how to give both effect together

i also tried using OnTouchListener

button.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
 // show interest in events resulting from ACTION_DOWN
 if(event.getAction()==MotionEvent.ACTION_DOWN) return true;
 // don't handle event unless its ACTION_UP so "doSomething()" only runs once.
 if(event.getAction()!=MotionEvent.ACTION_UP) return false;
 doSomething();
  button.setPressed(true);                   
  return true;
}
});

but this disables my OnclickListener() method and i dont want to use OnTouchListener()

i know this is silly but i am new to android thanks a lot

Answer

Pragnesh Ghoda  シ picture Pragnesh Ghoda シ · Jun 25, 2014

You have to Create 3 xml files for that...

2 for Drawable Shapesand 1 for Drawable Selector

See Below Code..

button_normal.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#22151515" />
        </shape>
    </item>

    <item android:bottom="3dp" android:right="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="10dp" />
            <padding android:left="10dp"
                android:right="10dp"/>
            <stroke android:width="3px" 
                android:color="@color/border_pink" />
        </shape>
    </item>

</layer-list>

button_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#22151515" />
        </shape>
    </item>

    <item android:bottom="3dp" android:right="3dp">
        <shape android:shape="rectangle">
            <solid android:color="#55fff000"/>
            <corners android:radius="10dp" />
            <padding android:left="10dp"
                android:right="10dp"/>
            <stroke android:width="3px" 
                android:color="@color/border_pink" />
        </shape>
    </item>

</layer-list>

button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item 
        android:state_focused="true"
        android:drawable="@drawable/button_selected"/>

    <item
        android:state_pressed="true"
        android:drawable="@drawable/button_selected"/>

    <item android:drawable="@drawable/button_normal"/>

</selector>

and finally....

android:background="@drawable/button_bg"

change code for drawable shapes as your need..

this may help you