Replicate Google Maps Bottom Panel Swipe Up

android, android-animation, animation

Solution

I´ve used this library for that purpouse before and worked pretty good.

https://github.com/umano/AndroidSlidingUpPanel

The documentation says this

This code is heavily based on the opened-sourced SlidingPaneLayout component from the r13 of the Android Support Library. Thanks Android team!

I´ve tried on Android 2.3.6 and it works perfectly. Don't know if you need it to be backwards compatible but if you do this will be helpful.

You´ve got the xml part

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="16sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:text="The Awesome Sliding Up Panel"
        android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

And the listeners on your class

SlidingUpPanelLayout layout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        layout.setShadowDrawable(getResources().getDrawable(R.drawable.above_shadow));
        layout.setAnchorPoint(0.3f);
        layout.setPanelSlideListener(new PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
                if (slideOffset < 0.2) {
                    if (getActionBar().isShowing()) {
                        getActionBar().hide();
                    }
                } else {
                    if (!getActionBar().isShowing()) {
                        getActionBar().show();
                    }
                }
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i(TAG, "onPanelExpanded");

            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i(TAG, "onPanelCollapsed");

            }

            @Override
            public void onPanelAnchored(View panel) {
                Log.i(TAG, "onPanelAnchored");

            }
        });

Also you can state with view will trigger the pane up event.

Hope it helps! :)

Problem

I'm trying to replicate Google Maps' bottom panel swipe up animation: - Tap on Maps marker shows small, portion of bottom panel (header) - Swipe up on the header panel reveals a full sized panel with more info. - Swipe down on full size panel restored view to header only - Tap off marker, and the bottom panel diasappears Using `TranslationAnimation`, I've been able to get a bottom panel to animate up when tapping on the marker. To problem I'm having, is that at the end of the animation, I must set its View to `VISIBLE` so that the panel shows, but then the full panel shows and not just the top header portion. I'm currently using a FrameLayout containing a LinearLayout as my bottom panel view: ``` <FrameLayout android:id="@+id/viewBottomPane" android:layout_width="match_parent" android:visibility="gone" android:background="#000000" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|bottom"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include android:id="@+id/paneHeader" layout="@layout/headerPanel" /> <TextView android:id="@+id/paneFooter" android:text="" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> </FrameLayout> ``` I'd like to just show `paneHeader` on Map marker tap, then swipe up to show full `viewBottomPane`, swipe down to show `paneHeader` and tap off marker to hide all.

Original source

Related problems