CODEWITHSUNDEEP
android
Jo Ke
Jo Ke

Reputation: 155

How to highlight a button when is pressed?

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>

Upvotes: 13

Views: 37254

Answers (6)

DroidDev
DroidDev

Reputation: 1525

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.

Upvotes: 6

Keshav Gera
Keshav Gera

Reputation: 11244

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

Upvotes: 0

Damien Praca
Damien Praca

Reputation: 3136

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

Upvotes: 3

Asha Soman
Asha Soman

Reputation: 1856

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>

Upvotes: 7

canova
canova

Reputation: 3975

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>

Upvotes: 11

Raghunandan
Raghunandan

Reputation: 133560

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"

Upvotes: 16

Related Questions