Android Button Selector Example

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

android button selector example new

This example use three files, they are:

  1. button_selector.xml : Define the selector drawable.
  2. activity_button_selector.xml : Define three buttons, and use button_selector as the OK button background.
  3. ButtonSelectorActivity.java : The java file that contain the logic code, such as button click listener.

1. button_selector.xml

This is the selector definition xml file. It is saved in app / res / drawable folder.

button selector drawable xml file

If you do not understand 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

This file is saved in 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

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;
            }
        });
    }
}
(Visited 3,943 times, 1 visits today)
READ :   Android Multi AutoComplete TextView Example

Leave a Reply

Your email address will not be published. Required fields are marked *

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