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?

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

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..

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.

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