Android Circular FloatingActionMenu – Open Activity onClick

Android CircularFloatingActionMenu is a modern looking customizable menu that renders menu items in a circular manner.

It’s a third party library written by Oğuz Bilgener.

In this example our aim is to open an activity when each menu item is clicked.

Project Structure

Here’s our project structure. We’ll have a total four activities/pages and four layouts.

1. Create Project

1. First create an empty project in android studio. Go to File –> New Project.
2. Type the application name and choose the company name.
   
3. Choose minimum SDK.
   
4. Choose Empty activity.
   
5. Click Finish.
   

This will generate for us a project with the following:

• 1 Activity – MainActivity.java
• 1 Layout – activity_main.xml.

The activity will automatically be registered in the android_manifest.xml. Android Activities are components and normally need to be registered as an application component.
If you’ve created yours manually then register it inside the <application>...<application> as following, replacing the MainActivity with your activity name:

        <activity android_name=".MainActivity">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />
                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

You can see that one action and category are specified as intent filters. The category makes our MainActivity as launcher activity. Launcher activities get executed first when th android app is run.

2. Add Dependencies

Let’s then move to our app level build.gradle and add the following:

    compile 'com.android.support:appcompat-v7:24.2.0'
    compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2'

Add the appcompat dependency only when you intend for your any of your activities to derive from AppCompatActivity as opposded to Activity.

The second dependency is the CircularFloatingActionMenu, which we fetch from maven central. This will require internet connectivity to download it into your project.

3. Create Activities/Pages

We are going to open three activities. These activities are our pages.

We open each of them depending on the clicked menu item.

Right-click your package and add three empty activities.

(a). PageOne Activity

This is our first activity.

Once you’ve created the activity you’ll have an empty activity like this.

 com.tutorials.hp.circlemenuopenactivity.mPages;

public class PageOne extends AppCompatActivity {
}

I’ll add some imports we’ll need:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

import com.tutorials.hp.circlemenuopenactivity.R;

Then override our onCreate()
method:

     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_page_one);

Move over to the generated layout for PageOne.java activity and add a textview.

We then come and reference that textview:

TextView valueTxt= (TextView) findViewById(R.id.oneTxt);

We then set the value of the TextView:

valueTxt.setText(getIntent().getExtras().getString("KEY_ADD"));

Well in the above line of code first we retrieve an Intent associated with our Activity via the getIntent() method.

This method getIntent() is defined in the Activity class.

The getIntent() method will return us an Intent instance. We then invoke its getExtras() method and then getString().

This whole process basically allows us receive data sent from the MainActivity. We pass string key as a parameter to our getString() method. We will specify that same key while sending data from our MainActivity.

(b). PageTwo Activity

Same as page one. We basically receive data sent from MainActivity when another menu item is clicked:

package com.tutorials.hp.circlemenuopenactivity.mPages;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

import com.tutorials.hp.circlemenuopenactivity.R;

public class PageTwo extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_page_two);

        TextView valueTxt= (TextView) findViewById(R.id.twoTxt);
        valueTxt.setText(getIntent().getExtras().getString("KEY_REMOVE"));
    }
}

(c). PageThree Activity

This activity will be opened when another menu item is clicked. It has the same concept as the above activities.

package com.tutorials.hp.circlemenuopenactivity.mPages;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

import com.tutorials.hp.circlemenuopenactivity.R;

public class PageThree extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_page_three);

        TextView valueTxt= (TextView) findViewById(R.id.threeTxt);
        valueTxt.setText(getIntent().getExtras().getString("KEY_DELETE"));

    }
}

4. MainActivity.java

This is our main activity. It’s the laucher activity.

It will get launched when we run the project unlike the other three activities.

This is because we have an IntentFilter that specifies so in our AndroidManifest.xml:

 <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>

(a). First we specify the package for our mainactivity.
Java classes get organized using packages.

package com.tutorials.hp.circlemenuopenactivity;

(b). Create the class
Create it if it hasn’t been generated.

public class MainActivity{}

(c). Add imports
These are packages we’ll need to use within this class.

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import com.oguzdev.circularfloatingactionmenu.library.FloatingActionButton;
import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu;
import com.oguzdev.circularfloatingactionmenu.library.SubActionButton;
import com.tutorials.hp.circlemenuopenactivity.mPages.PageOne;
import com.tutorials.hp.circlemenuopenactivity.mPages.PageThree;
import com.tutorials.hp.circlemenuopenactivity.mPages.PageTwo;

(d). Make MainActivity derive from Activity/AppCompatActivity

public class MainActivity extends AppCompatActivity {}

(e). Override OnCreate()
OnCreate() method is a lifecycle method defined in the Activity class.

@Override
    protected void onCreate(Bundle savedInstanceState) {}

We have to call the super class’s version of this method.

super.onCreate(savedInstanceState);

Then set the layout for this activity:

setContentView(R.layout.activity_main);

FloatingActionButton

We instantiate an ImageView and set it an image using the setImageResource() method:

ImageView icon=new ImageView(this);
        icon.setImageResource(R.drawable.add_green);

We then create a FloatingActionButton using a Builder class. Then set it the icon:

final FloatingActionButton fab=new FloatingActionButton.Builder(this).setContentView(icon).build();

The above button will be place at the bottom right by default, when clicked a popup menu with several menu items will come up.

MenuItems

These menu items are SubActionButton instances. They will get displayed when the FloatingActionButton is clicked.

SubActionButton.Builder builder=new SubActionButton.Builder(this);

Then build several buttons and set them images.

        ImageView deleteIcon=new ImageView(this);
        deleteIcon.setImageResource(R.drawable.delete_red);
        SubActionButton deleteBtn=builder.setContentView(deleteIcon).build();

        ImageView removeIcon=new ImageView(this);
        removeIcon.setImageResource(R.drawable.remove);
        SubActionButton removeBtn=builder.setContentView(removeIcon).build();

        ImageView addIcon=new ImageView(this);
        addIcon.setImageResource(R.drawable.save);
        SubActionButton addBtn=builder.setContentView(addIcon).build();

FloatinActionMenu

All the above SubActionButtons need to be displayed inside a CircularFlaotingActionMenu. So we create the menu and add it the buttons:

 final FloatingActionMenu fam=new FloatingActionMenu.Builder(this)
                .addSubActionView(addBtn)
                .addSubActionView(removeBtn)
                .addSubActionView(deleteBtn)
                .attachTo(fab)
                .build();

Open PageOne Activity and Pass Data.

When the addBtn button is clicked:

        addBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {...}

First we close the CircularFloatingActionMenu:

                Toast.makeText(MainActivity.this, "Add Clicked", Toast.LENGTH_SHORT).show();
                fam.close(true);

Then instantiate the Intent class:

Intent i=new Intent(MainActivity.this, PageOne.class);

Put data into our Intent object, and specify the key to identify this data:

i.putExtra("KEY_ADD","add");

Then start the Activity:

MainActivity.this.startActivity(i);

Open PageTwo Activity and Pass Data

Specify a separate key:

 removeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Remove Clicked", Toast.LENGTH_SHORT).show();
                fam.close(true);

                Intent i=new Intent(MainActivity.this, PageTwo.class);
                i.putExtra("KEY_REMOVE","remove");
                MainActivity.this.startActivity(i);
            }
        });

Open PageThree Activity and Pass data

Also specify a separate key.

deleteBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Delete Clicked", Toast.LENGTH_SHORT).show();
                fam.close(true);

                Intent i=new Intent(MainActivity.this, PageThree.class);
                i.putExtra("KEY_DELETE","delete");
                MainActivity.this.startActivity(i);
            }
        });

LAYOUTS

Our layouts are pretty simple.

actiity_main.xml

This layout will get inflated to MainActivity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    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"
    tools_context="com.tutorials.hp.circlemenuopenactivity.MainActivity">

</RelativeLayout>

activity_page_one.xml

The layout will get inflate to PageOne activity.
We have a basic TextView that will render our text received from MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    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"
    tools_context="com.tutorials.hp.circlemenuopenactivity.mPages.PageOne"
    android_background="#03a9f4">

    <TextView
        android_id="@+id/oneTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Hello World!"
        android_textStyle="bold"
        android_textSize="25dp" />

</RelativeLayout>

activity_page_two.xml

This layout will be inflated to PageTwo activity. It also has a textview. Let’s give it a different background color.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    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"
    tools_context="com.tutorials.hp.circlemenuopenactivity.mPages.PageTwo"
    android_background="#f38630">

    <TextView
        android_id="@+id/twoTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Hello World!" />

</RelativeLayout>

activity_page_three.xml

This layout will be inflated to PageThree activity. It also has a textview.It also has a different backgroundcolor.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    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="#009968"
    tools_context="com.tutorials.hp.circlemenuopenactivity.mPages.PageThree">

    <TextView
        android_id="@+id/threeTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Hello World!"
        android_textStyle="bold"
        android_textSize="25dp" />

</RelativeLayout>

AndroidManifest.xml

Just make sure your androidmanifest has all the 4 activities registered in our app:

<?xml version="1.0" encoding="utf-8"?>
<manifest 
    package="com.tutorials.hp.circlemenuopenactivity">

    <application
        android_allowBackup="true"
        android_icon="@mipmap/ic_launcher"
        android_label="@string/app_name"
        android_supportsRtl="true"
        android_theme="@style/AppTheme">
        <activity android_name=".MainActivity">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android_name=".mPages.PageOne" />
        <activity android_name=".mPages.PageTwo" />
        <activity android_name=".mPages.PageThree"></activity>
    </application>

</manifest>