Replicate Google Maps Bottom Panel Swipe Up

Question

I'm trying to replicate Google Maps' bottom panel swipe up animation:

1. Tap on Maps marker shows small, portion of bottom panel (header)
2. Swipe up on the header panel reveals a full sized panel with more info.
3. Swipe down on full size panel restored view to header only
4. 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.

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! :)

Comments

[mraviator]

Looks like this will be usable for my needs, thanks.

[Android Developer]

How can i set the height of minimized SlidingUpPanel?I want my panel should display four images of gridview even when in minimized state.User can slide it to top to see complete gridview.How can i increase the height of minimized sludinguppanel so that it can show more content?

[AutonomousApps]

@BhuvneshVarma, from the GitHub page for that project: You can change the panel height by using the setPanelHeight method or umanoPanelHeight XML attribute.

[gandharv09]

Any idea how can i have 2 separate panels at bottom occupying left half and right half respectively and which ever is clicked opens its respective full screen view?

[Android Developer]

My main content consists of Google map and sliding panel consist of ListView.I have set an anchor point at 0.4.I want to implement such functionality that when user moves sliding panel from collapsed to anchor state then map also resizes such that bottom of map is always at top of sliding panel.please check ou this.. stackoverflow.com/questions/36985119/…

[Sudhansu]

can you please tell me how to give margin to the bottom panel so that it when I scroll the bottom panel it will show in the middle, please help me