CODEWITHSUNDEEP
androidandroid-layout
Andrea T
Andrea T

Reputation: 3107

Android's flat button that changes colour when clicked

How to make a flat button in Android that changes background colour when clicked? style should be borderlessButtonStyle, but I don't know how to change color with xml when clicked

<Button android:id="@+id/email_sign_in_button"
        style="?android:attr/borderlessButtonStyle"
        android:text="@string/action_sign_in" 
        android:background="@android:color/white" />

Upvotes: 0

Views: 666

Answers (3)

Andrea T
Andrea T

Reputation: 3107

I found the answer:

in drawable-mdpi map dhould be created a file for the normal state, ex: my_Button_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">
<gradient
    android:startColor="#8fbab4ba"
    android:endColor="#8fbab4ba"/>
</shape>

Then in the same map a file for the touched/clicked state, ex.: my_Button_clicked.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">
<gradient
    android:startColor="#fffe0202"
    android:endColor="#fffe0202"/>
</shape>

Then a file for the definition of your Button Style, ex. : my_Button.xml that assocates the previous state attribute files:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="false"
    android:drawable="@drawable/my_Button_normal" />

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

Finally in the xml of your view define te button with style -> flatbutton and background my_button:

<Button
       android:id="@+id/email_sign_in_button"
       style="?android:attr/borderlessButtonStyle"
       android:text="Ciao"
       android:background="@drawable/my_button"
       android:textColor="@android:color/white" />

Upvotes: 0

Gabe Sechan
Gabe Sechan

Reputation: 93678

Do you mean changes color when the button is being touched, or permanently change it after you click it? For the first, you would use a state list drawable instead of a color drawable. The individual states could be colors. See https://sermojohn.wordpress.com/2012/02/04/using-a-state-list-drawable-as-a-button-background-image/ for an example

Upvotes: 1

Andyccs
Andyccs

Reputation: 535

We usually won't do it with xml, unless you want to make your custom button widget by extending Button class. An easy way to do it is as follow:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/email_sign_in_button"
    style="?android:attr/borderlessButtonStyle"
    android:text="Sign in"
    android:background="@android:color/white"
    android:onClick="changeColor"/>

And then in your main activity:

public class MainActivity extends ActionBarActivity {

    int[] colors = {
            R.color.material_blue_grey_800,
            R.color.material_deep_teal_200,
            R.color.material_deep_teal_500,
            android.R.color.white,
    };

    int counter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void changeColor(View view) {
        view.setBackgroundColor(getResources().getColor(colors[counter]));
        counter = (counter + 1) %colors.length;
    }
}

Upvotes: 1

Related Questions