Android Button Selector Example

This example will show you how to use an android selector drawable resource to make a button to show different background colors in different button states(disable, pressed, unpressed).

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/eJjzhBzA-NM

  1. This example uses three files, they are:
  2. button_selector.xml: Define the selector drawable.
  3. activity_button_selector.xml: Define three buttons, and use button_selector as the OK button background.
  4. ButtonSelectorActivity.java: The java file that contains the logic code, such as the button click listener.

1. button_selector.xml

  1. This is the selector definition XML file. It is saved in the app/res/drawable folder.
  2. If you do not understand the below XML meaning, please read Android Shape, Selector Examples.
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- disable state. -->
        <item android:state_enabled="false">
            <shape android:shape="rectangle">
                <corners android:radius="16dp"/>
                <solid android:color="@color/colorCyan"/>
                <stroke android:color="@color/colorPrimaryDark" android:width="2dp"/>
            </shape>
        </item>
    
        <!--released state. -->
        <item android:state_pressed="false">
            <shape android:shape="rectangle">
                <corners android:radius="16dp"/>
                <solid android:color="@color/colorBlue"/>
                <stroke android:color="@color/colorGreen" android:width="2dp"/>
            </shape>
        </item>
    
        <!--pressed state. -->
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <corners android:radius="16dp"/>
                <solid android:color="@color/colorRed"/>
                <stroke android:color="@color/colorBlue" android:width="2dp"/>
            </shape>
        </item>
        
    </selector>

2. activity_button_selector.xml

  1. This file is saved in the app/res/layout folder.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_horizontal">
            <Button
                android:id="@+id/enableOkButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Enable OK Button" />
    
            <Button
                android:id="@+id/disableOkButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Disable OK Button" />
        </LinearLayout>
    
        <!-- Use button_selector as background. -->
        <Button
            android:id="@+id/okButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="OK Button"
            android:background="@drawable/button_selector"/>
    
        <!-- Show button state info. -->
        <TextView
            android:id="@+id/okButtonState"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20dp"/>
    </LinearLayout>

3. ButtonSelectorActivity.java

  1. ButtonSelectorActivity.java
    package com.dev2qa.example;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.Button;
    import android.widget.TextView;
    
    public class ButtonSelectorActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_button_selector);
    
            setTitle("dev2qa.com - Button Selector Example");
    
            final Button okButton = (Button)findViewById(R.id.okButton);
    
            // Show ok button state info.
            final TextView okButtonState = (TextView)findViewById(R.id.okButtonState);
    
            // Enable OK Button
            Button enableOkButton = (Button)findViewById(R.id.enableOkButton);
            enableOkButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    okButton.setEnabled(true);
                    okButtonState.setText("Ok Button is enabled.");
                }
            });
    
            // Disable OK Button
            Button disableOkButton = (Button)findViewById(R.id.disableOkButton);
            disableOkButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    okButton.setEnabled(false);
                    okButtonState.setText("Ok Button is disabled.");
                }
            });
    
            // Listen to touch event.
            okButton.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                    // Get touch action.
                    int action = motionEvent.getAction();
    
                    if(action == MotionEvent.ACTION_DOWN) {
                        // If pressed.
                        okButtonState.setText("Ok Button is pressed.");
                    }else if(action == MotionEvent.ACTION_UP) {
                        // If released.
                        okButtonState.setText("Ok Button is released.");
                    }
                    return false;
                }
            });
        }
    }
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x