The concept to be covered here is circular menus. Mostly libraries. Feel free to post some yourself.
Share
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Oclemy
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
This will generate for us a project with the following:
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 theMainActivity
with your activity name: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:
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.
I’ll add some imports we’ll need:
Then override our onCreate()
method:
Move over to the generated layout for PageOne.java activity and add a textview.
We then come and reference that textview:
We then set the value of the TextView:
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 itsgetExtras()
method and thengetString()
.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:
(c). PageThree Activity
This activity will be opened when another menu item is clicked. It has the same concept as the above activities.
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:
(a). First we specify the package for our mainactivity.
Java classes get organized using packages.
(b). Create the class
Create it if it hasn’t been generated.
(c). Add imports
These are packages we’ll need to use within this class.
(d). Make MainActivity derive from Activity/AppCompatActivity
(e). Override OnCreate()
OnCreate() method is a lifecycle method defined in the Activity class.
We have to call the super class’s version of this method.
Then set the layout for this activity:
FloatingActionButton
We instantiate an ImageView and set it an image using the
setImageResource()
method:We then create a FloatingActionButton using a Builder class. Then set it the icon:
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.
Then build several buttons and set them images.
FloatinActionMenu
All the above SubActionButtons need to be displayed inside a CircularFlaotingActionMenu. So we create the menu and add it the buttons:
Open PageOne Activity and Pass Data.
When the
addBtn
button is clicked:First we close the CircularFloatingActionMenu:
Then instantiate the Intent class:
Put data into our Intent object, and specify the key to identify this data:
Then start the Activity:
Open PageTwo Activity and Pass Data
Specify a separate key:
Open PageThree Activity and Pass data
Also specify a separate key.
LAYOUTS
Our layouts are pretty simple.
actiity_main.xml
This layout will get inflated to MainActivity.
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:
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.
activity_page_three.xml
This layout will be inflated to PageThree activity. It also has a textview.It also has a different backgroundcolor.
AndroidManifest.xml
Just make sure your androidmanifest has all the 4 activities registered in our app:
Oclemy
Android CircularFloatingActionMenu Introduction
Android CircularFloatingActionMenu is a custom menu that represents it’s menu items in a circular manner.
This menu was written by Oğuz Bilgener back in the year 2014 and is available in github.
A downloadable sample is included here.
First a floating action button is shown at the right bottom of the screen or seven other positions within the screen. Here are the positions this button can be shown:
If the user clicks this button circular menu items’ icons popup with nice animations.
The user can then click the menu items and navigate to a different page.
Advantages of CircularFloatingActionMenu
Definition of CircularFloatingActionMenu
This library comprises of two main parts:
It also have two classes that define the animations used:
1. FloatinActionButton
The FloatinActionButton is a class that resides in the package
com.oguzdev.circularfloatingactionmenu.library
:It derives from FrameLayout:
It defines public constants that determine it’s placement position within the screen viewport:
These constants will be changing the gravity of the FAB.
Creating FloatingActionButton
The FloatingActionButton provides a public constructor with the following parameters:
However, it provides a Java Builder class for easy creation using a fluent interface. The builder class will be returning a new instance of the FloatingActionButton on calling the
build(
method.Using FloatingActionButton
FloatingActionButtons are easy to use. The Builder class we mentioned makes this easy to use as we don’t have to instantiate the FloatingActionButton directly.
Common Methods
Let’s look at some public methods that can be used with FloatingActionButton for various purposes:
2. FloatingActionMenu
This will be shown in an animated popup when the FloatingActionButton is clicked.
This menu will contain menu items
Definition of FloatingActionMenu
FloatingActionMenu is a class and belongs to
com.oguzdev.circularfloatingactionmenu.library
package.This class doesn’t inherit from any class:
Creating FlaotingActionMenu
FloatingActionMenu has one public constructor with several parameters:
However, we don’t have to use this constructor directly instead this class defines us an inner static builder class to create our menu in a fluent manner.
Using FloatingActionMenu
It’s easy to create and use FloatingActionMenu using the builder pattern:
3. SubActionButton
This is basically small button implementation with the look and feel of FloatingActionButton.
Several of these buttons get used as the menu items displayed in the FloatinActionMenu popup.
Definition of SubActionButton
This class like the others is defined in the package
com.oguzdev.circularfloatingactionmenu.library
.Like the FloatingActionButton, it derives from the
android.widget.FrameLayout
:Creating SubActionButton
This class has one public constructor for its creation.
However, like the other previous two classes, we would typically want to use the fluent Builder pattern.
Usage of SubActionButtons
Here’s a usage example.
4. Installation of Android CircularFloatingActionMenu.
Requirements.
This library does require API levle 15 and above
You then fetch the Android Archive from Maven Central: