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