ZOFTINO.COM android and web dev tutorials

Android Button

One of the important UI components in applications is Button. Button can be used to provide actions for user to perform and attach user events to back end behavior.

This post gives details about using and styling android button with examples.

Adding Button to Layout

Android user interface is defined in layout xml file. You can add Button element and set attributes to xml manually. Or using android studio layout design tool, you can add button component from palette to layout and set attributes.

<Button
    android:id="@+id/account_b"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:text="Add Account"/>

Button Attributes

Button is a subclass of TextView and inherits attributes from TextView and View classes. Below are some of the important button attributes which can be used to defined desired button look and behavior.

  • background : to set background to either color or a drwable.
  • onClick : to set method that needs to be run when a button is clicked.
  • minHeight : to define minimum height of button
  • minWidth : to define minimum width of button.
  • stateListAnimator : to define animation when button state changes.
  • focusable : to indicate whether keystroke should work
  • clickable : to indicate whether button is clickable or not
  • gravity : to set button text alignment.
  • textAppearance : to set text style.

Enabling and disabling Button

You can use enabled attribute to enable and disable button by setting it to true or false. A button can be enabled or disabled in program by calling setEnabled method as shown below.

((Button)findViewById(R.id.button)).setEnabled(false);

Button Drawable

You can make button display image and text using drawableTop, drawableBottom, drawableRight, and drawableLeft attributes below screen shot shows output of setting them.

android button drawable top, bottom, right, left

Android Image Button

Android provides ImageButton which can be used to make an image as button. To set an image, you can use src attribute of ImageButton. You can even use different images to be shown in different button states by defining xml drawable selector as shown below.

 <ImageButton
    android:id="@+id/img_b"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/img_state"
    android:onClick="doSomething" />

Xml drawable selector example

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/arrow_down" />
    <item android:state_focused="true"
        android:drawable="@drawable/arrow_up" />
    <item android:drawable="@drawable/arrow_up" />
</selector>

Handling Button Clicks

Button clicks can be handled in two ways. First one is by setting onClick attribute of Button in layout xml. Second one is by assigning on click listener to button in activity or fragment.

To set onClick attribute, first define a public void method with View as argument in activity or fragment and use the method name as value to set onClick attribute as shown below.

public void doSomething(View v){
    //do something
}
<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:onClick="doSomething"
    android:text="Do Something" />
 

Below code shows handling button clicks using on click listener.

Button  doSomethingButton = (Button)findViewById(R.id.do_something_b);

doSomethingButton.setOnClickListener( new View.OnClickListener(){
    @Override
    public void onClick(View view) {
        //do something
    }
});
 

Android Button Design and Styles

You can apply styles and themes to change look and feel of buttons. Android platform provides pre-defined material styles. Read material styles and compatibility post to learn about android material styles. Below screen shot shows buttons styled with different material styles.

android button styles

Applying theme or style to button.

<Button
    android:id="@+id/button3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:text="Button3" />
 

Button Styles Customization

You can change the default colors of material styles applied to button by setting colorAccent attribute at application level and colorButtonNormal attribute at widget level to the desired colors. Attribute colorControlHighlight is used to set color for button when it is in pressed state.

Once you define custom style, you can apply it to buttons using theme attribute. Below is an example of custom theme.

<style name="PurpleButton" parent="@style/Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">#1a237e</item>
    <item name="colorControlHighlight">#673ab7</item>
</style>
 

Rounded Corner Button

You can define inset as shown below to create rounded corner button and save the drwable xml in res/drawable folder. You can increase or decrease corners element’s radius attribute to adjust button corner radius.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

Then define style setting the background attribute to the xml drawable and apply it to button using style attribute.

<style name="RoundedCornerButton" parent="@style/Widget.AppCompat.Button.Colored">
    <item name="background">@drawable/btn_rounded_corner</item>
    <item name="colorButtonNormal">#1a237e</item>
    <item name="colorControlHighlight">#673ab7</item>
</style>
android rounded corner button

Button Elevation and Shadow

You can set elevation and translationZ attributes to draw shadow of button.

<Button
    . . 
    android:stateListAnimator="@null"
    android:elevation="6dp"
    android:translationZ="4dp" />
android button shadow elevation translationZ

Button Shadow Animation Customization

You can define different shadow properties for different states of button and animate the transition by defining selector. You can apply the animator to button using stateListAnimator property.

Notice that stateListAnimator set to null in the above (elevation and translationZ) example. This was done to remove default animator applied using stateListAnimator attribute in material themes for button. In order for elevation and translationZ to work, stateListAnimator needs to be set to null.

To customize the animation, meaning animating shadow transition between button states, you need to define selector as shown below in res/animator folder and set stateListAnimator property of custom theme to the defined animator.

Below is an example of state animator.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="120"
                android:valueTo="8dp"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                android:duration="120"
                android:valueTo="4dp"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="120"
                android:valueTo="4dp"
                android:startDelay="80"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                android:duration="120"
                android:valueTo="2dp"
                android:valueType="floatType" />
        </set>
    </item>
</selector>
 

Apply the below custom theme, which is using state animator, to a button using style or theme attribute.

<style name="CustomAnimationButton" parent="@style/Widget.AppCompat.Button">
    <item name="colorButtonNormal">#1a237e</item>
    <item name="colorControlHighlight">#673ab7</item>
    <item name="android:stateListAnimator">@animator/button_elevation</item>
</style>