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!

Android Foursquare map with ListView

 

What we need to do:

  1. Add transparent header view to the ListView in expanded state
  2. Replace header view with transparent View (same height) in collapsed state – to keep ListView the same size
  3. Do not intercept touches with mDragHelper when scrolling down in expanded state
  4. 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