Collapsing Toolbar With Floating Action Menu

I followed this link to create floating toolbar with fab .. Collapsing toolbar with floating action Menu I tried to change the fab to a floating menu with few options when i click

Solution 1:

i got solution for you create a new layout layout_fab_submenu like this

<LinearLayoutandroid:id="@+id/layoutFabSave"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_vertical"android:layout_gravity="bottom|end"android:layout_marginRight="8dp"android:layout_marginBottom="120dp"android:layout_marginEnd="8dp"android:orientation="horizontal"><android.support.v7.widget.CardViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:cardBackgroundColor="@color/cardview_light_background"app:cardCornerRadius="5dp"app:cardElevation="5dp"app:cardUseCompatPadding="true" ><TextViewandroid:id="@+id/cvtSave"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="132456"android:textAppearance="?android:attr/textAppearanceSmall"android:textStyle="bold"
             /></android.support.v7.widget.CardView><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fabSave"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_favorite_fill"app:backgroundTint="@android:color/holo_green_light"app:fabSize="mini" /></LinearLayout><LinearLayoutandroid:id="@+id/layoutFabEdit"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_vertical"android:layout_gravity="bottom|end"android:layout_marginRight="8dp"android:layout_marginEnd="8dp"android:layout_marginBottom="170dp"android:orientation="horizontal"><android.support.v7.widget.CardViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:cardBackgroundColor="@color/cardview_light_background"app:cardCornerRadius="5dp"app:cardElevation="5dp"app:cardUseCompatPadding="true" ><TextViewandroid:id="@+id/cvtEdit"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="12346"android:textAppearance="?android:attr/textAppearanceSmall"android:textStyle="bold"
            /></android.support.v7.widget.CardView><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fabEdit"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_favorite_fill"app:backgroundTint="@android:color/holo_green_dark"app:fabSize="mini" /></LinearLayout>

now include this layout in your collapsing toolbar layout like this

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns: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:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context=".temp"><android.support.design.widget.AppBarLayoutandroid:id="@+id/app_barbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"android:theme="@style/AppTheme.AppBarOverlay"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/toolbar_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:id="@+id/expandedImage"android:layout_width="match_parent"android:layout_height="200dp"android:scaleType="centerCrop"android:src="@drawable/disha2"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar_my"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/AppTheme.PopupOverlay" /></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_marginTop="-30dp"android:orientation="vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"><TextViewandroid:id="@+id/tv_home_welcome"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:paddingBottom="10dp"android:text="Welcome,"android:textColor="@color/colorWhite"android:textSize="18dp"app:layout_collapseMode="pin" /></LinearLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"android:fitsSystemWindows="true"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><includelayout="@layout/layout_fab_submenu" /></LinearLayout></android.support.v4.widget.NestedScrollView><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/fab_margin"app:layout_anchor="@id/app_barbar"app:layout_anchorGravity="bottom|end"app:srcCompat="@android:drawable/ic_dialog_info" /></android.support.design.widget.CoordinatorLayout>

now in your java file add this code

// declare variables //boolean flag to know if main FAB is in open or closed state.privatebooleanfabExpanded=false;
private FloatingActionButton fabSettings;

//Linear layout holding the Save submenuprivate LinearLayout layoutFabSave;

//Linear layout holding the Edit submenuprivate LinearLayout layoutFabEdit;
private LinearLayout layoutFabPhoto;

set fab button click listener

 layoutFabSave = (LinearLayout) this.findViewById(R.id.layoutFabSave);
    layoutFabEdit = (LinearLayout) this.findViewById(R.id.layoutFabEdit);
    layoutFabPhoto = (LinearLayout) this.findViewById(R.id.layoutFabPhoto);

  privatevoidcloseSubMenusFab(){
    layoutFabSave.setVisibility(View.INVISIBLE);
    layoutFabEdit.setVisibility(View.INVISIBLE);
    layoutFabPhoto.setVisibility(View.INVISIBLE);
    fabSettings.setImageResource(R.drawable.ic_favorite_fill);
    fabExpanded = false;
}

//Opens FAB submenusprivatevoidopenSubMenusFab(){
    layoutFabSave.setVisibility(View.VISIBLE);
    layoutFabEdit.setVisibility(View.VISIBLE);
    layoutFabPhoto.setVisibility(View.VISIBLE);
    //Change settings icon to 'X' icon
    fabSettings.setImageResource(R.drawable.ic_favorite_fill);
    fabExpanded = true;
}

ask me in case of any querygithub link

FloatingActionButtonfab= (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(newView.OnClickListener() {
        @OverridepublicvoidonClick(View view) {
            if (fabExpanded == true){
                closeSubMenusFab();
            } else {
                openSubMenusFab();
            }
        }
    });