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.