How to highlight a button when is pressed?

Question

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 se

Answer 1

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.

Hope this helps.

Answer 2

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"/>

Answer 3

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" />

Answer 4

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"

Answer 5

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>

Answer 6

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>