Attach Floating Action Button + Additional listeners

[taltstidl]

The changes made in this fork allow attaching a Floating Action Button in such a manner that this button gets automatically positioned and gets animated along with the panel when dragged. The work needed on the programming part for implementing this is minimal (see updated Readme which you probably want to change).
Additional listeners have been implemented to easily allow for Material Design related changes to the Sliding Up Panel (e.g. change the color when departing or arriving at the bottom).

[nurzhannogerbek]

@TR4Android Hello! Thanks for this awesome code! I have some questions cause I have problem. In my case layout_height of SLIDING LAYOUT not match_parent and its value is a specific number: 350dp. So when I open sliding panel up position of Floating Action Button is incorrect and when I down panel position of Floating Action Button crashed. Is there any way to change(control) position of button when layout_height is a specific number? Another my question is how to change here color of titlebar gradually? What can you advice to me? Thanks and have a nice day! =)

[taltstidl]

@NogerbekNurzhan Thanks for noting this. I'll look into this issue tomorrow. I haven't tested for specific height values yet, but will definitely try to support those. Could you please post the layout xml here so I can better assess the problem?
As to the title bar color change: How exactly do you want it to be animated? Do you want to animate a short color change when the user slides the panel from the bottom (like in the new Google Maps) or do you want the color to change depending on how far the user has slided the panel?

[nurzhannogerbek]

@TR4Android Hello! You are right. As a matter of fact I haven`t got big differences in code. I am trying to make effect as in second varient but have no result yet. Color changes depend on how far the user has slided the panel. By the way how to slide the panel from the bottom (when user press button and start slide up or down)? Cause here as I noticed sliding will be only in that element which has id="dragView".

[taltstidl]

@NogerbekNurzhan Have you set the height of the FloatingActionButtonLayout to a specific value or the SlidingUpPanelLayout?
For the color change try the Panel Slide Listener. It has a method called onPanelSlide that gets called whenever the panel is slided and returns the fraction. In this method you could then set the background color of the view you are using to ArgbEvaluator.evaluate(slideoffset, startcolor, endcolor). Note: I haven't tried that yet, just an idea!

[nurzhannogerbek]

@TR4Android I used specific value for SLIDING LAYOUT of SlidingUpPanelLayout. As I understand its height of panel. I need to read docs about ArgbEvaluator. Inform me please if you will have some news. =)

[taltstidl]

@Siegbaert Have you tried the hide() and show() methods of the FloatingActionButton? As far as I know they should provide just what you want.

[Siegbaert]

@TR4Android Yes I tried it.

mSlidingPanel.setFloatingActionButtonVisibility(View.VISIBLE);
floatingActionButton.show();

The button shows but not with the animation.

[taltstidl]

@Siegbaert Ok, I'll check it out in a minute.

[Siegbaert]

@TR4Android Ok thank you very much.
Would be nice if one could specify the animation.
Because if I want to hide the button using an animation I can not call mSlidingPanel.setFloatingActionButtonVisibility(View.GONE); and afterwards the hide() method of the FAB since the button would already be gone.

EDIT:
I tried some different approaches now.

1. ViewAnimation
2. PropertyAnimator

Both ways seemed to work the first time the animation gets called. Afterwards the FAB is completely out of place. The animations still get triggered but not at the correct position.

e.g:

@Override
public void onPanelCollapsed(View panel) {
    mSlidingPanel.setFloatingActionButtonVisibility(View.VISIBLE);
    ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(floatingActionButton, "scaleX", 0.0f, 1f);
    ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(floatingActionButton, "scaleY", 0.0f, 1f);
    scaleDownY.setDuration(250);
    AnimatorSet scaleDown = new AnimatorSet();
    scaleDown.play(scaleDownX).with(scaleDownY);
    scaleDown.start();
}

[taltstidl]

@Siegbaert The animation seems to be working for me. Try doing it without the setFloatingActionButtonVisibility() as this only ensures that the FloatingActionButton stays hidden when the panel is expanded and that probably won't be needed in your situation.

[Siegbaert]

@TR4Android
If I don't use setFloatingActionButtonVisibility() the button won't be visible at all.
Here is my current code:

mSlidingPanel = (SlidingUpPanelLayout) parentView.findViewById(R.id.sliding_panel_parent);
mSlidingPanel.setFloatingActionButtonAttached(true);
final FloatingActionButton floatingActionButton = (FloatingActionButton) parentView.findViewById(R.id.fab_start_routing);
mSlidingPanel.setPanelSlideListener(
    new SlidingUpPanelLayout.PanelSlideListener() {

        @Override
        public void onPanelCollapsed(View panel) {
            Logger.log(LOG_TAG, "onPanelCollapsed()", Logger.LogType.DEBUG);
            floatingActionButton.show();
        }

        @Override
        public void onPanelHidden(View panel) {
            Logger.log(LOG_TAG, "onPanelHidden()", Logger.LogType.DEBUG);
            floatingActionButton.hide();
        }

                ...
                ...
                ...
    }
);

XML:

<com.sothree.slidinguppanel.FloatingActionButtonLayout 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"
    app:umanoFabMode="circular_reveal"
    tools:context=".MainActivity">

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        <!-- SLIDING PANEL -->
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab_start_routing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@drawable/ic_car_white_24"
        android:visibility="gone"
        app:fab_colorNormal="@color/color_primary"
        app:fab_colorPressed="@color/color_primary_dark"
        app:fab_colorRipple="@color/color_white"
        app:fab_type="normal" />
</com.sothree.slidinguppanel.FloatingActionButtonLayout>

I really appreciate your help!

[taltstidl]

@Siegbaert Try switching to the official FloatingActionButton, this one works for sure, I just tested on my device. It also has the proper animation (circular reveal instead of translation). Also, you might want to switch to onPanelHiddenExecuted() and onPanelShownExecuted() for your animations. I'll update the sample in a minute.

[Siegbaert]

@TR4Android
Thank you very much!
I used the official FloatingActionButton in the beginning but since I was using setFloatingActionButtonVisibility() I couldn't get it to work.
Now it works perfectly.

[taltstidl]

@Siegbaert Sure, no problem 😃!

[mathieudebrito]

Hi guys, When will this merge be done ?
It would be very very useful...
It's actually almost mandatory !

[ripern]

I'm also wondering. What is preventing this from being accepted? (except for merge conflicts)

[flyingtoaster0]

@tokudu This pull request was never merged and has been open for over a year. I feel that given the number of people who have commented on this pull request, that this is a very popular feature that people really want included in the library. What is preventing this from being merged?

[tokudu]

The reason I haven't merged it is because is a very specific feature that shouldn't be considered as part of the library. Instead, if there is a reason why the library doesn't allow including such buttons, we should fix that in a general way over adding a very specialized Material Design button. I hope that makes sense.

I'll see if I can add a sample on how to use Fav buttons without modifying the library in the next release.

[flyingtoaster0]

Fair that keeping the library general and not locking the library into a particular design pattern is a priority, although I will still say that given that this library is the easiest ( 😺 ) way to achieve a sliding panel, people will continue to be drawn here when looking to have a sliding panel with a floating action button. It can get messy pretty quickly if people are required to copypaste from github or add submodules.

That being said, if it is possible to add an example of how to achieve a similar result without modifying the library, then that would really be appreated

[mathieudebrito]

I can't really agree with the FAB not being considered as a primary feature since it's material design compliant. But I definitely agree with the idea that the library should let the user add one.

Considering fixing this would -I presume- be very appreciated.

[hackaprende]

Hi, this is a great feature!, thanks in advance. I am getting an error, I just edited the XML, nothing in Java jet, but I am getting this error:

"NullPointerException: Attempt to invoke virtual method 'int com.sothree.slidinguppanel.SlidingUpPanelLayout$PanelState.ordinal()' on a null object reference"

What does that mean, I have a XML similar to the Readme´s one

[voltan]

Hello
this feature is ready ? any document or example available ?

[taltstidl]

@voltan You can find basic information in the forked readme. If you need more info let me know. A small word of caution though: I've had little time lately to support this fork, so it might be a bit out of date. It should still work though, so feel free to use it 😃.
Depending on what you are trying to achieve you might be better served using a combination of the official bottom sheet and the floating action button (see here for an example).

[voltan]

@TR4Android thank you very much , I will check it :D