custom button with shadow

Custom Button with Shadow Duolingo style Android Button

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

custom button with shadow

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>
custom button with shadow
Duolingo style button with shadow

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.