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.

Answer 1

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