Android Button button click background and text change operation

  • 2021-12-05 07:23:41
  • OfStack

The native button clicking status of Android has changed, but if you add a picture in png format as the background color, the button clicking will not have any effect. In order to achieve the effect of clicking the button with 1 flash, we need to prepare two pictures to switch, and the text should also change color. The old rule is not to talk nonsense and directly put the code:

Button background picture placed in drawable/background_button. xml


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

 <item android:drawable="@drawable/bg_press" android:state_pressed="true"/>
 <item android:drawable="@drawable/bg_normal" android:state_enabled="true"/>
 <item android:drawable="@drawable/bg_normal"/>
</selector>

Prepare two pictures, one is bg_press. png and the other is bg_normal. png.

Set in the buttons that need to be changed:


   <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="50dp"
    android:focusable="false"
    android:gravity="center"
    android:textSize="24px"
    android:text="@string/str_tethering_modify"
    android:background="@drawable/background_button" />

This has the background color change to solve, below to the button on the text, now click on the button button on the text is no change, in order to achieve the button text color change we create a new xml file.

Button color change drawable/button_color. xml


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

 <item android:state_pressed="true" android:color="#975508"/>
 <item android:state_focused="false" android:state_pressed="false" android:color="#E5960E"/>
 <item android:state_focused="true" android:color="#975508"/>
 <item android:state_focused="false" android:color="#E5960E"/>

</selector>

Add to our button textColor


   <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="50dp"
    android:focusable="false"
    android:gravity="center"
    android:textSize="24px"
    android:textColor="@drawable/button_color"
    android:text="@string/str_tethering_modify"
    android:background="@drawable/background_button" />

In this way, the direct use of background and text will have a click effect. However, if there is such a requirement, it is necessary to set the color of button text button.setTextColor (color) under certain conditions. After this setting, it is found that the text click on our button has not changed. I tried to directly button.setTextColor (R.drawable.button_color); I found it useless. This need to use ColorStateList to solve, as its name implies, is to define the status list of colors, by listening to different buttons to set different colors,

As usual, don't talk too much, just post the code:


 /**
  *  Click the button to change the color 
  */
 private ColorStateList colorStateList;
 colorStateList = (ColorStateList)getResources().getColorStateList(R.drawable.button_color);
 if(xxx){
  button.setTextColor(Color.White);
 }else{
  button.setTextColor(colorStateList);
 }

In this way, the change of button click state is perfectly solved.

Additional knowledge: android studio sets the button and background into one body, that is, the button removes shadows


<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage"
style="?android:attr/borderlessButtonStyle" />

Related articles: