Barre d'outils de réduction avec menu d'action flottant - Android, barre d'outils Android, barre d'outils de réduction, fab, barre d'outils de collaboration Android

J'ai suivi ce lien pour créer une barre d'outils flottante avec fab ..

Barre d'outils réduite avec menu d'action flottant

J'ai essayé de changer le fab en menu flottant avecquelques options quand je clique sur le flab mais quand j'ai attaché le fab avec la barre d'outils, je ne pouvais pas réduire la barre d'outils avec le fab et cacher le menu flottant.

C'est le lien que j'ai suivi pour créer un menu flottant Éléments de sous-menu dans fab

Quelqu'un peut-il m'aider s'il-vous-plaît....

Ma mise en page

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

Ma fonction de barre d'outils de réduction

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

}
});

}

Comment y parvenir

Réponses:

2 pour la réponse № 1

j'ai une solution pour vous créer une nouvelle mise en page layout_fab_submenu comme ça

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

incluez maintenant cette disposition dans la disposition de votre barre d'outils de réduction comme ceci

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

maintenant dans votre fichier java ajoutez ce 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;

définir l'écouteur de clic sur le bouton fab

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

me demander en cas de question lien github

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

---