CODEWITHSUNDEEP
androidandroid-fragmentsmapsfloating-action-buttonbottom-sheet
David Rocha
David Rocha

Reputation: 549

Floating Buttons and Bottom Sheet Fragment

I'm struggling with having a floating button that moves up and down based in the Bottom Sheet Fragment position. I want something like Google Maps do, whether the bottom sheet is moved the floating button also is moved together.

FloatingButton is moving fine

At this moment this is how my activity is

The FloatingButton is not moving at all

I have an activity that load the map inside a fragment, like this

<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"
    tools:context="br.com.vix.v1motorista.MotoristaActivity">

<!-- here the map is loaded -->
<FrameLayout
    android:id="@+id/conteudo"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<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:layout_margin="@dimen/fab_margin"
    android:layout_marginBottom="16dp"
    android:visibility="visible"
    app:layout_anchor="@+id/conteudo"
    app:layout_anchorGravity="right|bottom"
    app:srcCompat="@drawable/ic_info_white_36dp" />

<!-- Adding bottom sheet after main content -->
<include android:id="@+id/pickUpFragment" layout="@layout/fragment_pax_pick_up_2" />

I already tried to move the FloatingButton to the Bottom Sheet Fragment xml file, it almost worked but the Floating button will be gone together with the bottom sheet fragment if I dismiss the fragment, and also the floating button was not showing completely when the bottom sheet was "hidden".

Upvotes: 2

Views: 4740

Answers (3)

Antonio L&#243;pez
Antonio L&#243;pez

Reputation: 341

You should add two more properties to the "android:id="@+id/conteudo"" FrameLayout:

  • app:layout_insetEdge="bottom"
  • app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

And app:layout_dodgeInsetEdges="bottom" in the FAB:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:focusable="true"
    app:backgroundTint="@color/white"
    app:fabSize="normal"
    app:layout_dodgeInsetEdges="bottom"
    app:srcCompat="@drawable/icon"
    />

<View
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_insetEdge="bottom"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    />

Upvotes: 4

Milind Mevada
Milind Mevada

Reputation: 3285

This is not exact as you want. But by taking this as base you can create custom behavior as per your need. So both components will work on provided behavior.

Create Custom Move up Behavior of Coordinator Layout like this:

public class CustomMoveUpBehavior extends CoordinatorLayout.Behavior {

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout; //here you can use bottom Sheet fragment in your case
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

}

Change you Floating button to some Custom View and add this behavior as Default behavior Like this:

//it may extend floating Action button in your case
@CoordinatorLayout.DefaultBehavior(CustomMoveUpBehavior.class)
public class CustomButton extends AppCompatButton {
    public CustomButton(Context context) {
        super(context);
    }

    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

Upvotes: 0

Sanjay Kumar
Sanjay Kumar

Reputation: 1185

You can do as -
In xml of fragment
Linear layout (having tranparent bg ,clickable false, orientation verticale)
  |-Floating button (Bottom margin 8dp)
  |-Your main LinearLayout/RelativeLayout/FrameLayout
    |- child layouts

Now calculate height of Floating button
Set peekHeight of bottom sheet = height of floating button + 8dp

now on collapse your main layout will be hidden but your floating button will be remain visible. Always collapse your bottom sheet don't hide.

If you want of show some part of your main layout than on collapse
Set peekHeight of bottom sheet = height of floating button+ height of that part + 8dp

Upvotes: 0

Related Questions