Android Circular Menu Tutorial Using ImangazalievM (Github) Library

CircleMenu is a simple, elegant menu with a circular layout. In this tutorial we will discuss how to create Circular menu In An Android Application This is required for any app to look better and making the flexible ui by adding some animation.

Firstly, you need to compile the dependency of the Circular Menu for this you first goto app based gradle file then in the dependencies block you have to write the statement which is given below :-

compile 'com.github.imangazalievm:circlemenu:1.1.1'

 After adding this dependency click on the sync now button from the top right corner to sync your  gradle file to app functionality of this library.

now after adding the circular menu library into your project then we design some vector button for the circular menu and implement animation into it for now we design three button one is for alert another one is for search and third one is for favourite.

so for design these three button we have to write some xml file for these three button and we create a layout resource xml files 

please notice that place these xml resource file in the drawable folder

1. ic_alert.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" 

android:width="24dp" 

android:height="24dp"

android:viewportWidth="24.0" 

android:viewportHeight="24.0">

<path

android:fillColor="#ffffff" 

android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
</vector>

2. ic_search.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" 

android:width="24dp" 

android:height="24dp"

android:viewportWidth="24.0" 

android:viewportHeight="24.0">

<path

android:fillColor="#ffffff" 

android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>
</vector>

3. ic_favourite.xml 

<vector xmlns:android="http://schemas.android.com/apk/res/android" 

android:width="24dp" 

android:height="24dp" 

android:viewportWidth="24.0" 

android:viewportHeight="24.0">

<path

android:fillColor="#ffffff"

android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

After code these three files then come to Activity_main.xml File and arrange these

three xml file in the circular menu

activity_main.xml 

 
<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout  

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:id="@+id/activity_main" 

 android:layout_width="match_parent"     

android:layout_height="match_parent"     

android:paddingBottom="@dimen/activity_vertical_margin" 

 android:paddingLeft="@dimen/activity_horizontal_margin"     

android:paddingRight="@dimen/activity_horizontal_margin"     

android:paddingTop="@dimen/activity_vertical_margin"     

android:background="#97073b"     

tools:context="android.example.com.circularmenu.MainActivity">

    <com.imangazaliev.circlemenu.CircleMenu 

 android:layout_width="wrap_content"         

android:layout_height="wrap_content"         

android:layout_centerInParent="true"         

android:id="@+id/circleMenu"        >

        <com.imangazaliev.circlemenu.CircleMenuButton 

 android:id="@+id/favorite"             

android:layout_width="wrap_content"             

android:layout_height="wrap_content"             

app:colorNormal="#2196F3"             

app:colorPressed="#1E88E5"             

app:icon="@drawable/ic_favorite" 

 />

        <com.imangazaliev.circlemenu.CircleMenuButton             

android:id="@+id/search"             

android:layout_width="wrap_content"             

android:layout_height="wrap_content" 

 app:colorNormal="#4CAF50" 

 app:colorPressed="#43A047"             

app:icon="@drawable/ic_search"/>

        <com.imangazaliev.circlemenu.CircleMenuButton             

android:id="@+id/alert"             

android:layout_width="wrap_content" 

 android:layout_height="wrap_content" 

 app:colorNormal="#F44336" 

 app:colorPressed="#E53935"             

app:icon="@drawable/ic_alert"/>

    </com.imangazaliev.circlemenu.CircleMenu>

</RelativeLayout>

now run the application and your see that you got an ui that contains 

the circular menu if you add java functionality on the item click and 

cirular menu expanded and collapsed the java function is given below 

acccording to their functionality.

Set OnItemClickListener for handling menu items clicks: 

CircleMenu circleMenu = (CircleMenu) findViewById(R.id.circleMenu);
circleMenu.setOnItemClickListener(new CircleMenu.OnItemClickListener() {
    @Override
    public void onItemClick(MenuButton menuButton) {

    }
}); 

Set OnStateUpdateListener for handling open/close actions

circleMenu.setStateUpdateListener(new CircleMenu.OnStateUpdateListener() {
    @Override
    public void onMenuExpanded() {
        
    }

    @Override
    public void onMenuCollapsed() {

    }
});