Beautiful Android rounded buttons
Tags: android, uiweekly, kotlin, beginners
Published: 2020-01-15 21:57:04

Let us say the designer in your team handed you this beautifully custom button to implement.
![](https://www.dropbox.com/s/djd8nof24q9l2in/1.png?raw=1)

It looks nice, it flat, not much to it really. Should be easy to implement.

---

First you create a [`StateListDrawable` ](https://developer.android.com/reference/android/graphics/drawable/StateListDrawable.html), easy!

```xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/color_dhuhr_background_pressed" />

            <corners
                android:topRightRadius="@dimen/default_event_end_corner"
                android:bottomRightRadius="@dimen/default_event_end_corner"
                android:topLeftRadius="@dimen/default_event_start_corner"
                android:bottomLeftRadius="@dimen/default_event_start_corner"/>

        </shape>
    </item>

    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/color_dhuhr_background" />

                    <corners
                        android:bottomLeftRadius="@dimen/default_event_start_corner"
                        android:bottomRightRadius="@dimen/default_event_end_corner"
                        android:topLeftRadius="@dimen/default_event_start_corner"
                        android:topRightRadius="@dimen/default_event_end_corner" />

                </shape>
            </item>

            <item android:gravity="left">
                <shape android:shape="rectangle">
                    <solid android:color="@color/color_dhuhr_background_pressed" />

                    <size android:width="4dp" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>
``` 

You run the app and you get this
![](https://www.dropbox.com/s/vyyjp2w9733s0ue/2.png?raw=1)

Did you notice the ugly shadows?
![](https://www.dropbox.com/s/ww81m0wdf6jxjj8/3.png?raw=1)

---

This must be happening because of elevation or z index. 

---

An easy solution would be to use borderless button style, `Widget.AppCompat.Button.Borderless`. This would mean though that that button will not raise when the user taps it.

![](https://www.dropbox.com/s/mjx4ykj6vqmm1a3/4.gif?raw=1)

I do not think that looks great.

---

There is another solution, which is to use `Widget.AppCompat.Button` and override `stateListAnimator` with our own animation.

```xml
<style name="Button.Event" parent="Widget.AppCompat.Button">
    <item name="android:stateListAnimator">@animator/button_event_animator</item>
</style>
```

button_event_animator.xml
```xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_event_pressed_animation_duration"
                            android:valueTo="@dimen/button_event_pressed_z"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_event_pressed_elevation"
                            android:valueType="floatType"/>
        </set>
    </item>

    <item>
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="0"
                            android:valueTo="0"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="0"
                            android:valueType="floatType"/>
        </set>
    </item>

</selector>
```

The end result would look
![](https://www.dropbox.com/s/nfzuj01lamrt5av/5.gif?raw=1)

This look like something intractable.

---

Thanks for reading! [Stay updated](http://twitter.com/mgazar_).