Floating Action Menu In Android

I am going to explain about the Floating Action Menu in Android Material Design . FAM (Floating Action Menu) is the most interesting component in Material Design . See the bellow image , how the  FAM looks like in Android.

Lets start for create Floating Action Menu in Android . Follow the bellow steps .

Step 1: Create Project 

          a) Open Android Studio

          b) Go to File >New> New Project  > Project Name  > Next > Next > Next > Finish 

Step 2: Add Design Library

   Open build.gradle > add this line com.oguzdev:CircularFloatingActionMenu:1.0.2

    > Sync the gradle file . Like this 

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

     compile 'com.android.support:appcompat-v7:23.4.0'

     compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2'

}

If Gradle doesn’t automatically ask you to sync your project, open module 'app' from the Build menu or press F9. By doing so, the Android Studio build system will automatically fetch the necessary resources and you will be able to import any required classes.

Step 3 : Layout Design 

open activity_main.xml file and add the bellow code  

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="Floating action menu example"

        android:textSize="20dp"

        android:textColor="@color/colorAccent"/>

</RelativeLayout>

Step 4. Now go to your MainActivity.java and add the following code to it.

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

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;

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // Create an icon for FAB

        ImageView icon = new ImageView(this);

        icon.setImageResource(R.mipmap.ic_launcher);

        FloatingActionButton actionButton = new FloatingActionButton.Builder(this)

                .setContentView(icon)

                .build();

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

        // create menu icon

        ImageView itemIcon1 = new ImageView(this);

        itemIcon1.setImageResource(R.mipmap.ic_launcher);

        ImageView itemIcon2 = new ImageView(this);

        itemIcon2.setImageResource(R.mipmap.ic_launcher);

        ImageView itemIcon3 = new ImageView(this);

        itemIcon3.setImageResource(R.mipmap.ic_launcher);

        SubActionButton button1 = itemBuilder.setContentView(itemIcon1).build();

        SubActionButton button2 = itemBuilder.setContentView(itemIcon2).build();

        SubActionButton button3 = itemBuilder.setContentView(itemIcon3).build();

        //attach the sub menu buttons to the main button

        FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)

                .addSubActionView(button1)

                .addSubActionView(button2)

                .addSubActionView(button3)

                .attachTo(actionButton)

                .build();

        // fire action on first menu click

        button1.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Toast.makeText(getApplicationContext(),"Menu 1",Toast.LENGTH_LONG).show();

            }

        });

    }

}

 

Find Us : 
        Facebook : @apnaandroid
        Google+   : Apna Java
        Youtube : Android & Java Tutorial