DEV Community

Mostafa Gazar
Mostafa Gazar

Posted on • Edited on

3

Beautiful Android rounded buttons

Let us say the designer in your team handed you this beautifully custom button to implement.

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


First you create a StateListDrawable , easy!

<?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>
Enter fullscreen mode Exit fullscreen mode

You run the app and you get this

Did you notice the ugly shadows?


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.

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.

<style name="Button.Event" parent="Widget.AppCompat.Button">
    <item name="android:stateListAnimator">@animator/button_event_animator</item>
</style>
Enter fullscreen mode Exit fullscreen mode

button_event_animator.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>
Enter fullscreen mode Exit fullscreen mode

The end result would look

This look like something intractable.


Thanks for reading! Stay updated.

💡💡💡 One last tip before you go

Tired of spending so much on your side projects? 😒

Just one of many great perks of being part of the network ❤️

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay