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.
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 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.
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);You can make button display image and text using drawableTop, drawableBottom, drawableRight, and drawableLeft attributes below screen shot shows output of setting them.
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 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>
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
}
});
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.
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" />
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>
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>
You can set elevation and translationZ attributes to draw shadow of button.
<Button
. .
android:stateListAnimator="@null"
android:elevation="6dp"
android:translationZ="4dp" />
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>