Circle Menu in Android

A circle menu (also known as a radial menu, round menu, circular menu) is a creative menu design concept that arranges the sub-menu items around a circle or arc style menu toggle button.

Circle Menu in Android

What we are going to build in this article?

Here we will see how to implement a circular menu and when a user click on items of the menu then it displays a message to the user. A sample video of this application is shown below. Note that we are going to build this application using Java language.

Step by Step Implementation

Step 1. Create a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Add the JitPack repository to your build file

maven { url "https://jitpack.io" }

Step 3. Add the dependency to your gradle.build(module) file

 implementation 'com.github.Hitomis:CircleMenu:v1.1.0'

Step 4. Working with actvity_main.xml file

Navigate to app > res > layout > activity_main.xml file and use the following code in it-

XML

<?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:id="@+id/constraint_layout"
    android:background="@color/white">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-light"
        android:text="Circle"
        android:textSize="38sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias=".15"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias=".1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-condensed"
        android:text="Menu"
        android:textColor="@color/black"
        android:textSize="56sp"
        android:textStyle="bold"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <com.hitomi.cmlibrary.CircleMenu
        android:id="@+id/circle_menu"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintVertical_bias=".7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5. Working with MainActivity.java file

Go to the MainActivity.java file and use the following code in it-

Java

package com.example.circlemenu;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.Toast;

import com.hitomi.cmlibrary.CircleMenu;
import com.hitomi.cmlibrary.OnMenuSelectedListener;

public class MainActivity extends AppCompatActivity {

    CircleMenu circleMenu;
    ConstraintLayout constraintLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraintLayout=findViewById(R.id.constraint_layout);
        circleMenu=findViewById(R.id.circle_menu);

        circleMenu.setMainMenu(Color.parseColor("#CDCDCD"),R.mipmap.menu,R.mipmap.cancel)
                .addSubMenu(Color.parseColor("#88bef5"),R.mipmap.home)
                .addSubMenu(Color.parseColor("#83e85a"),R.mipmap.search)
                .addSubMenu(Color.parseColor("#FF4B32"),R.mipmap.notification)
                .addSubMenu(Color.parseColor("#ba53de"),R.mipmap.settings)
                .addSubMenu(Color.parseColor("#ff8a5c"),R.mipmap.gps)
                .setOnMenuSelectedListener(new OnMenuSelectedListener() {
                    @Override
                    public void onMenuSelected(int index) {
                        switch(index)
                        {
                            case 0:
                                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#ecfffb"));
                                break;
                            case 1:
                                Toast.makeText(MainActivity.this, "search", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#96f7d2"));
                                break;
                            case 2:
                                Toast.makeText(MainActivity.this, "notification", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#fac4a2"));
                                break;
                            case 3:
                                Toast.makeText(MainActivity.this, "settings", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("d3cde6"));
                                break;
                            case 4:
                                Toast.makeText(MainActivity.this, "gps", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("fff591"));
                                break;
                        }
                    }
                });
    }
}

Note: Add all the required icons in the mipmap folder according to your choice.

Our application is now complete and you can run it successfully but there are some more optional steps to make the UI of our application more beautiful.

Step 6. Removing Action Bar

Go to app > res > values > themes > themes.xml and then change “parent=”Theme.MaterialComponents.DayNight.DarkActionBar” to parent=”Theme.MaterialComponents.DayNight.NoActionBar” and hence action bar will be removed successfully.

Step 7. Changing the color of the status bar

Change the color of the status bar to black. If you don’t know how to change the color of the status bar in the android application then go through – How to Change the Color of Status Bar in an Android App?

Output: