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 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:
