Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Sunday, 30 April 2017

FloatingActionMenu in android

Hello guys,
 Today we are learn about how to create FloatingActionMenu in android.


ActivityMain.java

package com.samset.floatingactionmenu;

import android.animation.Animator;
import android.annotation.SuppressLint;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fabmain, fabdelete, fabsettings, fabfavorite;
    private LinearLayout fabLayoutFavorite, fabLayoutSettings, fabLayoutDelete;
    private View fabBGLayout;
    boolean isFABOpen = false;

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        fabLayoutDelete = (LinearLayout) findViewById(R.id.fabLayoutLike);
        fabLayoutSettings = (LinearLayout) findViewById(R.id.fabLayoutSettings);
        fabLayoutFavorite = (LinearLayout) findViewById(R.id.fabLayoutdelete);
        fabmain = (FloatingActionButton) findViewById(R.id.fab);
        fabdelete = (FloatingActionButton) findViewById(R.id.fabDelete);
        fabsettings = (FloatingActionButton) findViewById(R.id.fabSettings);
        fabfavorite = (FloatingActionButton) findViewById(R.id.fabLike);
        fabBGLayout = findViewById(R.id.fabBGLayout);

        fabmain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!isFABOpen) {
                    showMenu();
                } else {
                    closeMenu();
                }
            }
        });

        fabBGLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                closeMenu();
            }
        });
    }

    private void showMenu() {
        isFABOpen = true;
        fabLayoutFavorite.setVisibility(View.VISIBLE);
        fabLayoutSettings.setVisibility(View.VISIBLE);
        fabLayoutDelete.setVisibility(View.VISIBLE);
        fabBGLayout.setVisibility(View.VISIBLE);

        fabmain.animate().rotationBy(45);
        fabLayoutFavorite.animate().translationY(-getResources().getDimension(R.dimen.margin_55));
        fabLayoutSettings.animate().translationY(-getResources().getDimension(R.dimen.margin_100));
        fabLayoutDelete.animate().translationY(-getResources().getDimension(R.dimen.margin_145));
    }

    private void closeMenu() {
        isFABOpen = false;
        fabBGLayout.setVisibility(View.GONE);
        fabmain.animate().rotationBy(-45);
        fabLayoutFavorite.animate().translationY(0);
        fabLayoutSettings.animate().translationY(0);
        fabLayoutDelete.animate().translationY(0).setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                if (!isFABOpen) {
                    fabLayoutFavorite.setVisibility(View.GONE);
                    fabLayoutSettings.setVisibility(View.GONE);
                    fabLayoutDelete.setVisibility(View.GONE);
                }

            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
    }

    @Override
    public void onBackPressed() {
        if (isFABOpen) {
            closeMenu();
        } else {
            super.onBackPressed();
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.samset.floatingactionmenu.MainActivity"
    tools:ignore="VectorDrawableCompat">

    <View
        android:id="@+id/fabBGLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/viewBackground"
        android:visibility="gone" />


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:id="@+id/fabLayoutdelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabDelete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_delete" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/fabLayoutSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">

            <TextView
                android:textColor="#FFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabSettings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_settings" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/fabLayoutLike"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">
            <TextView
                android:textColor="#FFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Like" />
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabLike"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:tint="@android:color/white"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_favorite" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12">


            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical"
                app:fabSize="normal"
                app:srcCompat="@drawable/ic_add" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>


color.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="viewBackground">#CC000000</color>


</resources>

dimens.xml


<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
   
<dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>


    <dimen name="_50sdp">55dp</dimen>
    <dimen name="standard_12">12dp</dimen>
    <dimen name="margin_25">25dp</dimen>
    <dimen name="margin_55">55dp</dimen>
    <dimen name="margin_100">100dp</dimen>
    <dimen name="margin_145">145dp</dimen>
    <dimen name="fab_margin">16dp</dimen>

</resources>

Live Sample    





Thank you
 See FullSorceCode download hereFloatingActionMenu-master