Custom Button with Shadow Duolingo style Android Button

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

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.