Android - ScrollView like foursquare with maps + list

Question

This is the Android equivalent of this iOS question.

Trying to create a view that contains a MapView at about 20% of the screen (under an ActionBar...) and the rest of the screen is a ScrollView that when scrolling down, overlaps on top of the MapView and hides it. In short like FourSquare's Android app. Any ideas?

Pb

https://mcmap.net/q/830030/-android-maps-markers-bounds-at-the-center-of-top-half-of-map-area – Potbelly

Answer 1

I've made an implementation based on AndroidSlidingUpPanel (many thanks to this project).

Details http://android.amberfog.com/?p=915 Source code with example: https://github.com/dlukashev/AndroidSlidingUpPanel-foursquare-map-demo

Exaggerative

Answer 2

LAST UPDATE

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<fragment
    android:id="@+id/map_fragment"
    android:name="com.myapp.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="fill_parent" />

<fragment
    android:id="@id/list_fragment"
    android:name="com.myapp.ListFragment"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" />

Then I add an invisible header to the list like so:

@Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    super.onCreateView(inflater, container, savedInstanceState);

    View view = inflater.inflate(R.layout.listview, container, false);
    SwipeListView listView = (SwipeListView) view.findViewById(R.id.venue_list);

    // An invisible view added as a header to the list and clicking it leads to the mapfragment
    TextView invisibleView = new TextView(inflater.getContext());
    invisibleView.setBackgroundColor(Color.TRANSPARENT);
    invisibleView.setHeight(300);
    invisibleView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            listener.moveToMapFragment();
                                                                        }
    });
    listView.addHeaderView(invisibleView);

This is hardly ideal, but it works. I hope it helps someone..

Pb

:if you got a better solution please let me know – Steiner

This is still the best solution I've found up to date. I've added a click handler on the invisible frame that opens up the map to fit the entire screen. – Pb

Could you please share the layout you created ? – Steiner

I am now trying to achieve the same effect...I'm going to give this a shot. – Easting

Answer 3

The easiest solution is to add a margin to your slider content (second parameter of the SlidingUpPanel) and then remove the fading background. All done from the XML.

Gulden

Answer 4

You can just declare in your xml file a ScrollView that embeds a LinearLayout, that embeds a MapView :

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:fillViewport="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

       <fragment
          android:id="@+id/map"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          class="com.google.android.gms.maps.MapFragment" />

         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

      ...... Your list and other stuff .......

        </LinearLayout>
    </LinearLayout>
</ScrollView>

Then you can set the size for each element by specifying the layout_weight attribute

EDIT IvanDanDo, following our discussion I found this link that may do what you want (not sure though, I didn't try it) : Android: Have an arbitrary View slide under another View like the software keyboard does

Evslin

Tried it, gave the MapFragment layout_weight=1 and the LinearLayout layout_weight=3 but all I see is a map on my entire screen and somewhere on the bottom, a hint of a list... and it doesn't scroll on top of my map either. – Pb

That's strange, I have pretty much the same code in my app. If you replace the map with an ImageView for example, does it scroll ? Also, can you try to specify the weightSum attribute in the first LinearLayout to 4 ? – Evslin

OK, so changed it to an ImageView and I realized that my list just wasn't big enough, so no scrolling was needed. (dumb). But now when I scroll, the ImageView / Map just rolls up, I want it to stick on to the top as the list will eventually scrolls over it like an overlap and hide it completely. How do I get that effect? – Pb

Hmmm not sure I understand, you wanted the map to scroll with the rest of your page, but now you want it to stay on top while the rest of the screen scrolls, am I right ? If yes, then you don't need a scrollView, your listView may do that automatically, no ? (sorry if I don't understand what you meant :)...) – Evslin

Take a look at Foursquare's app. The main page has an ActionBar on top, then a MapView which takes up 30% of the screen and then a ScrollView that takes up the 60% left (minus the ActionBar's 10%). When the user scrolls down, the MapView doesn't appear to move at all, but the `ScrollView' starts going up until it covers the entire map. It's a Scrolling trick that I'm trying to emulate but having a hard time, it's like there are two separate layers... That's as best as I can put it in words. – Pb

Ok I get it ! Honestly I don't know how to do it, I'll think about it. I would guess it has something to do with setOnLongClickListener but I am not sure at all – Evslin

If you find the solution, please share it, I would be interested :) – Evslin

I edited my answer with a link, let me know if it suits your needs ! – Evslin