Friday, April 12, 2019

How to programmatically change button background drawable on click

1st method

1) You can create an xml in the drawable folder. This xml (you choose the name...let's call it "bg_button.xml") could look just like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/button_02_rollover"   
  android:state_pressed="true" />                 <!-- pressed-->
  <item android:drawable="@drawable/button_02_rollover"     
 android:state_focused="true" />                   <!--focused--> 
 <item android:drawable="@drawable/button_02_normal" />  <!-- normal -->
</selector>



2) Then add button in "activity_main.xml" file in the layout folder, could look just like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   xmlns:app="http://schemas.android.com/apk/res-auto" 
   xmlns:tools="http://schemas.android.com/tools"   
 android:layout_width="match_parent"   
 android:background="#e8e8e8"   
 android:layout_height="match_parent">
<Button
  android:layout_width="wrap_content"    
  android:layout_height="wrap_content"  
  android:text="Click here"  
  android:background="@drawable/bg_button" />
</RelativeLayout>


Here is an image samples that you can put in your "drawable" folder (attention: not in "drawable-v24" folder, because andorid 6.0 and 4.4 doesn't work sometime with images in this folder! ).

button_02_normal.png



button_02_rollover.png





When you run the app it looks like this:



2nd method - you can set programmatically

1) Go to "MainActivity.java" file in your java folder.

public class MainActivity extends AppCompatActivity {

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

    final Button b = (Button) findViewById(R.id.button);
    b.setOnTouchListener(new View.OnTouchListener() {
    @Override 
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_DOWN:
                b.setBackgroundResource(R.drawable.button_02_rollover); 
               break;      
              case MotionEvent.ACTION_MOVE:
                b.setBackgroundResource(R.drawable.button_02_rollover);  
              break;           
            case MotionEvent.ACTION_UP:
                // Action up
                b.setBackgroundResource(R.drawable.button_02_normal);                         
                return true;         
          default:
                // Handle default case.          
      break;       
      }
        return false;  
  }
});

}
}

2) Then add this line android:id="@+id/button" inside the button in "activity_main.xml" file in the layout folder, could look just like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   xmlns:app="http://schemas.android.com/apk/res-auto" 
   xmlns:tools="http://schemas.android.com/tools"   
 android:layout_width="match_parent"   
 android:background="#e8e8e8"   
 android:layout_height="match_parent">
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"    
  android:layout_height="wrap_content"  
  android:text="Click here"  
  android:background="@drawable/bg_button" />
</RelativeLayout>


You will have the same result

1 comment: