Circle Menu in Android | Android Studio | Java

Circle Menu in Android | Android Studio | Java

In this tutorial, we’re going to see how to add a circle menu in android. The Circle menu is a simple, elegant UI menu with a circular layout and material design animations.

Before going to create it, let’s see what we’re going to create

Now, let’s create it

Step 1: Add the dependency

in the build.gradle App file adds the dependency for the circle menu.

dependencies {    implementation 'com.ramotion.circlemenu:circle-menu:0.3.2'
}

Step 2: Add the menu icons

in the value, resource file creates a new value resource file where we are going to add our menu icons.

buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- we need two arrays, one for the icons and one for the colors of the icons--> <!-- icons array-->
<array name="icons">
<item>@drawable/ic_home_white_24dp</item>
<item>@drawable/ic_search_white_24dp</item>
<item>@drawable/ic_notifications_white_24dp</item>
<item>@drawable/ic_settings_white_24dp</item>
<item>@drawable/ic_place_white_24dp</item>
</array>
<!-- icons colors-->
<array name="colors">
<item>@android:color/holo_blue_light</item>
<item>@android:color/holo_green_dark</item>
<item>@android:color/holo_red_light</item>
<item>@android:color/holo_purple</item>
<item>@android:color/holo_orange_light</item>
</array>
</resources>

Step 3: Add the circle menu in the main XML file

now in the main XML file add the circle menu widget and also import the icon and color array.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@android:color/black">
<com.ramotion.circlemenu.CircleMenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/circle_menu"
app:button_colors="@array/colors"
app:button_icons="@array/icons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Add the functionality

now in the main Java class add our circle menu and add the event click listener on it.

package com.codewithgolap.circlemenu;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import com.ramotion.circlemenu.CircleMenuView;public class MainActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final CircleMenuView menu = findViewById(R.id.circle_menu);
menu.setEventListener(new CircleMenuView.EventListener(){
@Override
public void onMenuOpenAnimationStart(@NonNull CircleMenuView view) {
Log.d("D","onMenuOpenAnimationStart");
}
@Override
public void onMenuOpenAnimationEnd(@NonNull CircleMenuView view) {
Log.d("D","onMenuOpenAnimationEnd");
} @Override
public void onMenuCloseAnimationStart(@NonNull CircleMenuView view) {
Log.d("D","onMenuCloseAnimationStart");
} @Override
public void onMenuCloseAnimationEnd(@NonNull CircleMenuView view) {
Log.d("D","onMenuCloseAnimationEnd");
} @Override
public void onButtonClickAnimationStart(@NonNull CircleMenuView view, int index) {
Log.d("D","onButtonClickAnimationStart|index: "+index);
}
@Override
public void onButtonClickAnimationEnd(@NonNull CircleMenuView view, int index) {
Log.d("D","onButtonClickAnimationEnd|index: "+index);
}
@Override
public boolean onButtonLongClick(@NonNull CircleMenuView view, int buttonIndex) {
Log.d("D","onButtonLongClick|index: "+buttonIndex);
return true;
}
@Override
public void onButtonLongClickAnimationStart(@NonNull CircleMenuView view, int buttonIndex) {
Log.d("D","onButtonLongClickAnimationStart|index: "+buttonIndex);
}
@Override
public void onButtonLongClickAnimationEnd(@NonNull CircleMenuView view, int buttonIndex) {
Log.d("D","onButtonLongClickAnimationEnd|index: "+buttonIndex);
}
});
}
}

Output:

You can follow me on YouTube:

Golap Barman

Also, visit my website for more content like this

www.gbandroidblogs.com

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs

--

--

--

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to create Sliding Up Panel in Android | Radio Streaming app UI | JAVA | Part 3

Media Store API with Pagination

How to use the expandable Floating Action Button

Working with the StackOverFlow API!

Android RecyclerView Part 2 — Creating RecyclerView with multiple view-types

Implement Play Billing Subscription without RTDN or Play Developer API on Android

Android Project Structure

Android Project Structure

Koin Framework — Qualifiers(Part-6) — Most Underrated Framework🤔

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Golap Gunjan Barman

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.

More from Medium

Android Tutorial: ListView

Android Adventure

View Binding in Android.

How to implement In-App-Review Structure on Android?