Change android button colour on click without changing border colour?

Question

I am new to Android and i was setting up my xml file. Is there a way to change the colour of the button with a feel of "click" when the button is clicked and then return to it's original colour WITHOUT changing the colour of the border? I am using eclipse. Thank you

Answer 1

First you need to make some xml files in the Drawable folder:

btn_clicked.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="20dp" />
   <solid android:color="#ff0000" />
   <stroke
       android:width="1dp"
       android:color="#fff" />
</shape>

btn_normal.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
   <corners android:radius="20dp" />
   <solid android:color="#00ff00" />
   <stroke
      android:width="1dp"
      android:color="#fff" />
</shape>

name_btn.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/btn_clicked" android:state_pressed="true"/>
   <item android:drawable="@drawable/btn_normal"/>
</selector>

and then use it like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="match_parent">
        <Button android:layout_width="140dp" android:layout_height="40dp"
            android:background="@drawable/cancel_btn" />
</RelativeLayout>

Answer 2

AndroidGeek,

You can specify the effects inside an .XML file under the drawable folder and then linking the file to the Button under the layout folder.

Example:

Inside your activity_main.xml Your Button tag will look like as :

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Styled Button"
        android:id="@+id/styledButton"
        android:background="@drawable/button"/>

Create an XML file [Example: button.xml] under the res/drawable folder to specify the changes that will take place when the button is pressed.

Below is the contents of the button.xml

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


    <!-- Changes that the button has to show when it is pressed -->

    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />

            <!-- Keep the stroke values same if you want the same border effect, irrespective you press / un-press the button
            In case ih you want to change the border thickness, while the button is being clicked,
             then increase the "android:width" value -->
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="6dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>



    <!-- Default appearance when the button is displayed  -->
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="6dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Hope this helps. This should work irrespective of the IDE. Eclipse and Android Studio.