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.
View Comments (0)