Android - ScrollView like foursquare with maps + list - android-layout

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