7

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?

Community
  • 1
  • 1
OferM
  • 902
  • 1
  • 8
  • 20
  • [http://stackoverflow.com/questions/25487861/android-maps-markers-bounds-at-the-center-of-top-half-of-map-area](http://stackoverflow.com/questions/25487861/android-maps-markers-bounds-at-the-center-of-top-half-of-map-area) – Ari G Sep 23 '16 at 23:14

4 Answers4

7

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

enter image description here

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

Dmitry L.
  • 1,572
  • 1
  • 12
  • 10
4

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

OferM
  • 902
  • 1
  • 8
  • 20
1

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.

7heViking
  • 7,137
  • 11
  • 50
  • 94
0

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

Community
  • 1
  • 1
jbihan
  • 3,053
  • 2
  • 24
  • 34
  • 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. – OferM Aug 28 '13 at 19:19
  • 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 ? – jbihan Aug 28 '13 at 19:21
  • 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? – OferM Aug 28 '13 at 19:40
  • 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 :)...) – jbihan Aug 28 '13 at 19:56
  • 1
    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. – OferM Aug 28 '13 at 21:02
  • 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 – jbihan Aug 28 '13 at 21:08
  • If you find the solution, please share it, I would be interested :) – jbihan Aug 28 '13 at 21:17
  • I edited my answer with a link, let me know if it suits your needs ! – jbihan Aug 29 '13 at 13:06