13

I'm making an Andorid quiz and I want to highlight a button when it's clicked but when the user lets go of the button that it turns in it original colour. You see I've set the background of the button so the buttons can be rounded. I've set that in drawable.

<Button
    android:id="@+id/btn1"
    android:background="@drawable/roundedbutton"
    android:textColor="#ffffff"
    android:textStyle="italic"
    android:layout_width="225sp"
    android:layout_marginTop="23sp"
    android:layout_height="38sp"
    android:layout_alignLeft="@+id/btn2"
    android:layout_below="@+id/textView1"
    android:text="Button" />

roundedbutton.xml

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" android:padding="10dp">   
<solid android:color="#848482"/> <!-- this one is ths color of the Rounded Button -->

<corners
android:bottomRightRadius="6.5dp"
android:bottomLeftRadius="6.5dp"
android:topLeftRadius="6.5dp"
android:topRightRadius="6.5dp"/>
</shape>
1
  • A simple solution using a color filter similar to the one of Vishwas and with a more complete onTouchListener solution description as the one of Raghunandan: stackoverflow.com/a/14278790/891479 It creates an OnTouchListener modifying the color filter on touch.
    – L. G.
    Oct 25, 2013 at 8:16

6 Answers 6

16

You can use OnTouchListener or you can use a selector.

button.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
            // change color
    }
    else if (event.getAction() == MotionEvent.ACTION_UP) {
            // set to normal color
    }

    return true;
}
});

You can use a selector also. Borders and rounded rectangle. Customize the same.

bkg.xml in drawable folder

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

normal.xml in drawable folder

<?xml version="1.0" encoding="UTF-8"?> 
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> 
  <solid android:color="#0AECBF"/>    
  <stroke android:width="3dp"
        android:color="#0FECFF" /> 
  <padding android:left="5dp"
         android:top="5dp"
         android:right="5dp"
         android:bottom="5dp"/> 
  <corners android:bottomRightRadius="7dp"
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp"
         android:topRightRadius="7dp"/> 
  </shape>  

pressed.xml in drawable folder

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
   <solid android:color="#ff33ffff" />
 <padding android:left="5dp"
             android:top="5dp"
             android:right="5dp"
             android:bottom="5dp"/> 
    <corners android:bottomRightRadius="7dp"
             android:bottomLeftRadius="7dp" 
             android:topLeftRadius="7dp"
             android:topRightRadius="7dp"/> 
</shape>

Now set the background fro your button in xml

     android:background="@drawable/bkg"
2
  • Why not a toggle button? or is this essentially the same thing
    – A P
    Jan 31, 2017 at 8:27
  • @AviParshan depends on the requirement. Toggle is generally used for like on/off conditions Jan 31, 2017 at 8:28
11

use a selector like this and set your buttons background to the drawable.

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

Modify roundedbutton.xml

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

    <item android:state_pressed="true"><shape android:padding="10dp" android:shape="rectangle">
            <solid android:color="#ff0000" />
            <!-- this one is ths color of the Rounded Button -->

            <corners android:bottomLeftRadius="6.5dp" android:bottomRightRadius="6.5dp" android:topLeftRadius="6.5dp" android:topRightRadius="6.5dp" />
        </shape></item>
    <item><shape android:padding="10dp" android:shape="rectangle">
            <solid android:color="#848482" />
            <!-- this one is ths color of the Rounded Button -->

            <corners android:bottomLeftRadius="6.5dp" android:bottomRightRadius="6.5dp" android:topLeftRadius="6.5dp" android:topRightRadius="6.5dp" />
        </shape></item>

</selector>
6

If you want to do it programmatically then you can also try one of following two methods:

btn1.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

or this way:

btn1.getBackground().setColorFilter(0xFFAA4400,PorterDuff.Mode.MULTIPLY);

just put this code in your onCreate method of activity and it will do. You can change the color codes according to your choice.

3

If you don't want to create 2 drawables with a selector xml, or 2 shapes or even don't want to bother doing it programmatically with a color filter, you can use the Android built-in highlight by ussing the selectableItemBackground attibute :

<!-- Background drawable for bordered standalone items that need focus/pressed states. -->
<attr name="selectableItemBackground" format="reference" />

in your xml. For instance :

<ImageButton
   android:id="@+id/btn_help"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_help"
   android:background="?android:selectableItemBackground"/>
0

Source Code

https://drive.google.com/open?id=0BzBKpZ4nzNzUQ3RKZjE0eG15Rlk

selector.xml

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

normalpressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorPrimary"/>
    <stroke android:width="3dp"
        android:color="@color/colorPrimaryDark" />
    <padding android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
    <corners android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>

pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!--<solid android:color="#ff33ffff" />-->
    <solid android:color="@color/colorHighLight" />
    <padding android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
    <corners android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>


**button** 

       <Button
        android:id="@+id/btn_sign_in"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@drawable/selector"
        android:drawableLeft="@android:drawable/btn_star_big_on"
        android:drawablePadding="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="90dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="30dp"
        android:text="Sign In"
        android:textColor="#ffffff"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="8dp" />

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.