If you are wondering how to achieve map and listview behaviour like in Foursquare – this post is for you.
Here’s a short video what I’m talking about:
I’ve took a look into Foursquare code. They are using slightly modified AndroidSlidingUpPanel library. I’ve made a fork with changes (AndroidSlidingUpPanel-fork). Here’s the actual code difference.
So, show me the magic!
What we need to do:
- Add transparent header view to the ListView in expanded state
- Replace header view with transparent View (same height) in collapsed state – to keep ListView the same size
- Do not intercept touches with mDragHelper when scrolling down in expanded state
- Do not intercept touches with mDragHelper when scrolling up in expanded state and ListView is not scrolled to top position
I added new method to the SlidingUpPanelLayout to pass ListView or ScrollView and the height of Map in expanded state
mSlidingUpPanelLayout.setScrollableView(mListView, mapHeight);
Also there is a simple check for 3 and 4 placed to onInterceptTouchEvent
boolean isCanScrollUp = mSlideOffset == 0 && (y < mInitialMotionY || (mScrollableView != null && mScrollableView.getChildAt(0) != null && mScrollableView.getChildAt(0).getTop() != 0));
In collapsed state you need to ignore invisible View, so replace return false;
with return isDragViewUnder((int) x, (int) y);
for MotionEvent.ACTION_DOWN
in onTouchEvent
.
For 1 and 2 set PanelSlideListener
private void collapseMap() { mSpaceView.setVisibility(View.VISIBLE); mTransparentView.setVisibility(View.GONE); } private void expandMap() { mSpaceView.setVisibility(View.GONE); mTransparentView.setVisibility(View.INVISIBLE); } @Override public void onPanelSlide(View view, float v) { } @Override public void onPanelCollapsed(View view) { expandMap(); mMap.animateCamera(CameraUpdateFactory.zoomTo(14f), 1000, null); } @Override public void onPanelExpanded(View view) { collapseMap(); mMap.animateCamera(CameraUpdateFactory.zoomTo(11f), 1000, null); }
Here is the full source code https://github.com/dlukashev/AndroidSlidingUpPanel-foursquare-map-demo
enjoy
// DL