1. 技术文章
  2. Collapsing toolbar with floating action Menu

Collapsing toolbar with floating action Menu

由 帅比萌擦擦* 提交于 2019-12-10 15:21:35

问题


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 on the flab but when i attached the fab along with the toolbar,I couldn't collapse the toolbar along with the fab and hide the floating menu.

This is the link which i followed to create floating menu Sub menu items in fab

Can any one help me please....

My layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_card"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/app_bg_overlay"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:elevation="4dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <TextView
            android:id="@+id/textViewJob"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bg_card"
            android:maxLines="2"
            android:paddingBottom="8dp"
            android:paddingEnd="96dp"
            android:paddingStart="24dp"
            android:paddingTop="8dp"
            android:textColor="@color/white"
            android:textSize="16sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/black" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabBackground="@color/bg_card"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/hint_color" />


    </android.support.design.widget.AppBarLayout>

    <!--<com.github.clans.fab.FloatingActionMenu
        app:layout_anchor="@id/collapsing_toolbar"
        app:layout_anchorGravity="bottom|right|end">-->
    <!--

        <include layout="@layout/layout_fab" />-->


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/fraToolFloat"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end">

            <LinearLayout
                android:id="@+id/linFab1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="80dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Mentorship"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />
                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/mentorship"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="130dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Alumni Meet"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/alumni"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="180dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Lunch Meetup"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lunch"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="230dp"
                android:layout_marginEnd="24dp"
                android:layout_marginRight="8dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.v7.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:cardBackgroundColor="#FFF"
                    app:cardCornerRadius="4dp"
                    app:cardElevation="4dp"
                    app:cardUseCompatPadding="true">

                    <TextView
                        android:id="@+id/lblMenu4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="2dp"
                        android:paddingLeft="6dp"
                        android:paddingRight="6dp"
                        android:paddingTop="2dp"
                        android:text="Coffee Connect"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:textStyle="bold" />

                </android.support.v7.widget.CardView>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSub4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lunch"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="mini" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linFabSetting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="280dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fabSetting"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    android:layout_marginEnd="20dp"
                    android:src="@drawable/prof_plus"
                    app:backgroundTint="@color/colorPrimaryDark"
                    app:fabSize="normal" />

            </LinearLayout>

        </FrameLayout>
    </FrameLayout>


</android.support.design.widget.CoordinatorLayout>

My collapsing toolbar funtion

private void setupCollapsingToolbar() {

collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
headerImageView = (ImageView) findViewById(R.id.header_image);
headerImageView.setImageBitmap(sqLiteDBHelper.getUserImage(Prefs.getUserKey()));
collapsingToolbar.setTitleEnabled(true);
collapsingToolbar.setTitle(sqLiteDBHelper.getName(Prefs.getUserKey()));
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);

subtitleTextView = (TextView) findViewById(R.id.textViewJob);
appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //Initialize the size of the scroll
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }

        //Check if the view is collapsed
        if (scrollRange + verticalOffset == 0) {
            toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, R.color.colorPrimary));
            subtitleTextView.setVisibility(View.GONE);
            fraToolFloat.setVisibility(View.GONE);
        } else {
            toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, android.R.color.transparent));
            subtitleTextView.setText(sqLiteDBHelper.getCompanyName(Prefs.getUserKey()));
            subtitleTextView.setVisibility(View.VISIBLE);
            fraToolFloat.setVisibility(View.VISIBLE);
        }

    }
});

}

How to achieve this


回答1:


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

    <LinearLayout
    android: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.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true" >
        <TextView
            android: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.FloatingActionButton
        android: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>

<LinearLayout
    android: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.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true" >

        <TextView
            android: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.FloatingActionButton
        android: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.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".temp">

<android.support.design.widget.AppBarLayout
    android: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.CollapsingToolbarLayout
        android: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">


        <ImageView
            android: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.Toolbar
            android: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>

<LinearLayout
    android: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">

    <TextView
        android: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.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/layout_fab_submenu" />


    </LinearLayout>


</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android: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.
private boolean fabExpanded = false;
private FloatingActionButton fabSettings;

//Linear layout holding the Save submenu
private LinearLayout layoutFabSave;

//Linear layout holding the Edit submenu
private 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);

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

//Opens FAB submenus
private void openSubMenusFab(){
    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 query github link

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (fabExpanded == true){
                closeSubMenusFab();
            } else {
                openSubMenusFab();
            }
        }
    });


来源：https://stackoverflow.com/questions/45099469/collapsing-toolbar-with-floating-action-menu

标签
android
android-layout
android-toolbar
android-collapsingtoolbarlayout
floating-action-button
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!