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

Question

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 1

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

Please refer my answer in the above link.

We can acheive it by adding only one file in the drawable folder and refer that as background for the button.

Hope this will help somebody. One can use my solution and reduce the objects count when there is a concern for performance issue.

Answer 2

Follow the below steps-

1. Define Button view in your main xml like this-

   <Button
   android:id="@+id/search_bt"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/button_selector_green"
   android:text="Search"
   android:textColor="@drawable/button_text_color_green"
   />
   

2. Create button_selector_green xml file in your drawable folder like this-

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/rounded_corner_transparent" android:state_pressed="true"/>
   <!-- pressed -->
   <item android:drawable="@drawable/rounded_corner_green"/>
   <!-- default -->
   </selector>
   

3. Create button_text_color_green xml file in your drawable folder like this-

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true"
      android:color="#48b28a" /> <!-- pressed -->
   <item android:state_focused="true"
      android:color="#FFFFFF" /> <!-- focused -->
   <item android:color="#FFFFFF" /> <!-- default -->
   </selector>
   

4. Create rounded_corner_transparent xml file in your drawable folder like this-

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
   
    <solid 
     android:color="@android:color/transparent" >
    </solid>
   
    <!-- view border color and width -->
    <stroke
      android:width="1dp"
      android:color="#2b8c68" ></stroke>
   
    <!-- If you want to add some padding -->
    <padding
      android:left="4dp"
      android:top="4dp"
      android:right="4dp"
      android:bottom="4dp"    >
    </padding>
   
    <!-- Here is the corner radius -->
    <corners android:radius="10dp"   >
    </corners>
    </shape>
   

5. Create rounded_corner_green xml file in your drawable folder like this-

   <?xml version="1.0" encoding="utf-8"?>
   <shape  xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
   
   <solid
   android:color="#48b28a" >
   </solid>
   
   <!-- view border color and width -->
   <stroke
   android:width="1dp"
   android:color="#2b8c68" >
   </stroke>
   
   <!-- If you want to add some padding -->
   <padding
   android:left="4dp"
   android:top="4dp"
   android:right="4dp"
   android:bottom="4dp"    >
   </padding>
   
   <!-- Here is the corner radius -->
   <corners
   android:radius="10dp"   >
   </corners>
   </shape>
   

   Hope this will work for you. Happy Coding :)

Answer 3

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

Answer 4

Make two different shape xml. one with green color and other using another color..

And use them in selector.xml

 <item android:drawable="@drawable/rounded_btn_green" android:state_selected="true"/>

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

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

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