In this Android Studio article, we are going to learn about creating Magic Buttons. For this, we will use a third-party library called MagicButton. Magic Buttons are animated buttons that provides visually appealing way to interact with users.
Prerequisites
Before you begin, make sure you have:
- Android Studio installed on your computer
- Basic knowledge of Android development and XML
Step 1: Create a New Project
First, open Android Studio and create a new project. Choose “Empty Activity” as the template. Name your project and set the necessary configurations.
Step 2: Add the MagicButton Library
OK after creating your project in Android Studio, you need to open your build.gradle(Moduel:App) and add this library to your Module Gradle in the dependencies section. because for creating of the Magic Button in Android Studio we are using third party library.
|
1 |
implementation 'com.github.bloder:magic:1.1' |
Sync your project to download and integrate the library.
When you are going to add a new module in Android Studio, you need to sync your project.
Step 3: Add Icons to the Drawable Folder
You need to add two icons to your drawable folder. You can use any icons, but for this example, we will use Facebook and Twitter icons. Place your icons in the res/drawable directory.
Step 4: Design the Layout
So after adding the icons, you need to open your Layout Folder and choose main_activity.xml and in here we have added our two magic buttons and this is the complete design you can copy.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical" > <br.com.bloder.magic.view.MagicButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/mgbtn1" android:layout_marginLeft="100dp" android:layout_marginTop="100dp" app:button_icon="@drawable/facebook" app:button_icon_width="25dp" app:button_icon_height="25dp" app:hide_text="Facebook" app:icon_button_color="#365899" app:hide_text_color="@android:color/white" app:expandable_area_color="#203763" app:hide_text_size="15sp" app:magic_button_size="50dp" /> <br.com.bloder.magic.view.MagicButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/mgbtn2" android:layout_marginLeft="100dp" android:layout_marginTop="100dp" app:button_icon="@drawable/twitter" app:button_icon_width="25dp" app:button_icon_height="25dp" app:hide_text="Twitter" app:icon_button_color="#ced0d4" app:hide_text_color="@android:color/white" app:expandable_area_color="#2f83de" app:hide_text_size="15sp" app:magic_button_size="50dp" /> </LinearLayout> |
At the top of the design these are the two magic button for Twitter and Facebook.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<br.com.bloder.magic.view.MagicButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/mgbtn1" android:layout_marginLeft="100dp" android:layout_marginTop="100dp" app:button_icon="@drawable/facebook" app:button_icon_width="25dp" app:button_icon_height="25dp" app:hide_text="Facebook" app:icon_button_color="#365899" app:hide_text_color="@android:color/white" app:expandable_area_color="#203763" app:hide_text_size="15sp" app:magic_button_size="50dp" /> <br.com.bloder.magic.view.MagicButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/mgbtn2" android:layout_marginLeft="100dp" android:layout_marginTop="100dp" app:button_icon="@drawable/twitter" app:button_icon_width="25dp" app:button_icon_height="25dp" app:hide_text="Twitter" app:icon_button_color="#ced0d4" app:hide_text_color="@android:color/white" app:expandable_area_color="#2f83de" app:hide_text_size="15sp" app:magic_button_size="50dp" /> |
Step 6: Run Your Project
Run your project in Android Studio. You should see two Magic Buttons for Facebook and Twitter with animations.
Final Thoughts
In this article, we learned how to create Magic Buttons in Android Studio using MagicButton library. These buttons enhance the user interface with appealing animations and are easy to implement.
Further Reading
Check out more Android development articles on our blog:
By following these steps, you can create interactive and visually Magic Buttons in your Android applications.
Subscribe and Get Free Video Courses & Articles in your Email