Custom Button with Shadow Duolingo style Android Button

What's in this blog? Hide

Custom Button with Shadow
1. android_dvlprs

In this blog learn to create Duolingo Style Custom Button with Shadow in Android.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

Duolingo is a great app (available for both Android and iOS) for language learners across the world. With more than a million active users using the app daily, there is a lot we can learn from its simple yet elegant UI design.

To get started, here is a blog on how we can create Duolingo Style Button with Shadow.

Custom Button with Shadow

In your, Android Studio Project go to res > drawable.

Right-click and click on ‘New’ > ‘Drawable Resource File’

Name the file as ‘custom_button.xml’

Now, add the following lines of XML code:

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

    <!-- Bottom 15dp Shadow -->
    <item>
        <shape  android:shape="rectangle">

<!--            Button Shadow Color -->
            <solid android:color="#52772C" />
            <corners android:radius="7dp" />

        </shape>
    </item>

    <!-- White Top color -->
    <item android:bottom="15px">

        <shape  android:shape="rectangle">
            <padding android:bottom="10dp"
                android:top="10dp"
                android:left="20dp"
                android:right="20dp"/>

<!--            Button TOP Color -->
            <solid android:color="#7CB342" />
            <corners android:radius="7dp" />
        </shape>

    </item>


</layer-list>

Now go to Activity or fragment and create a button.

To this button add a background attribute as:

android:background="@drawable/custom_button"

Your complete code for the button should look as follows:

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Duolingo Style"
        android:layout_above="@+id/btn_2"
        android:layout_margin="20dp"
        android:textColor="@android:color/white"
        android:background="@drawable/custom_button"/>

We hope you liked this blog, explore more about creating a custom button in Android Studio here.