フローティングアクションメニューのある折りたたみツールバー-android、android-toolbar、collapsingtoolbarlayout、fab、android-collapsingtoolbar

このリンクをたどって、fabでフローティングツールバーを作成しました。

フローティングアクションメニューを備えた折りたたみツールバー

ファブをフローティングメニューに変更しようとしましたフラブをクリックするといくつかのオプションがありますが、ツールバーと一緒にファブをアタッチすると、ファブと一緒にツールバーを折りたたんでフローティングメニューを非表示にすることができませんでした。

これは私がフローティングメニューを作成するためにたどったリンクです ファブのサブメニュー項目

誰か助けてくれませんか…。

私のレイアウト

<?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>

折りたたみツールバー機能

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);
}

}
});

}

これを達成する方法

回答：

回答№1は2

私はあなたが新しいレイアウトを作成するための解決策を得ました layout_fab_submenu このような

    <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>

このレイアウトを、次のように折りたたみツールバーレイアウトに含めます。

<?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>

今あなたのJavaファイルにこのコードを追加してください

// 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;

ファブボタンクリックリスナーを設定

 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;
}

ご不明な点がございましたらお問い合わせください ギブスリンク

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

---