3

I want to achieve the following: GMaps slide in mockup

The Info view should slide in from the bottom when I click on a marker. The black circle is a Floating Action Button and should rise to the top with the info window and rest with its center at the upper border of the info window.

When I click anywhere but on the info window, it should slide back down and disappear.

Could you give me some starting points? I already read about object animators and the CoordinatorLayout, yet I don't know where to begin.

gnolle
  • 41
  • 1
  • 2
  • Again? Please... Google it: https://github.com/umano/AndroidSlidingUpPanel this has been answer many, many times: http://stackoverflow.com/questions/21849032/android-sliding-up-view and many others. – Mariano Zorrilla Nov 16 '15 at 13:32

2 Answers2

7

You can implement it yourself by adding a bottomsheet element to the parent layout of the MapFragment and then setting a custom OnMarkerClickListener.

For the bottom sheet to work, you should use the CoordinatorLayout for the parent of the MapFragment. To create a bottomsheet element, you should set app:layout_behavior="android.support.design.widget.BottomSheetBehaviorto a layout element, such as a NestedScrollView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context=".MainActivity">

<include layout="@layout/content_main" />

<android.support.v4.widget.NestedScrollView android:id="@+id/bottom_sheet"
    android:layout_width="match_parent" android:layout_height="550dp"
    android:background="@android:color/white" android:clipToPadding="true"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


    <TextView android:id="@+id/detail_name" android:layout_width="0dp"
        android:layout_height="wrap_content" android:layout_margin="25dp"
        android:layout_weight="3" android:gravity="center_vertical"
        android:textAppearance="?android:textAppearanceLarge" />

</android.support.v4.widget.NestedScrollView>

The map fragment:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/app_bar_main">

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

</RelativeLayout>

Then in your activity class, you can set up the bottom sheet initial behaviour in onCreate():

private BottomSheetBehavior bottomSheetBehavior;
private View bottomSheet;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    bottomSheet = findViewById(R.id.bottom_sheet);
    bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
    bottomSheetBehavior.setPeekHeight(200);
    bottomSheetBehavior.setHideable(true);
    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }

Then modify the map behaviour in onMapReady():

@Override
public void onMapReady(GoogleMap googleMap) {
    map = googleMap;
    map.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
        @Override
        public boolean onMarkerClick(Marker marker) {
            updateBottomSheetContent(marker);
            return true;
        }
    });
    map.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
        @Override
        public void onMapClick(LatLng latLng) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        }
    });
}

private void updateBottomSheetContent(Marker marker) {
    TextView name = (TextView) bottomSheet.findViewById(R.id.detail_name);
    name.setText(marker.getTitle());
  bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}

Of course, you can also use some data stored in the marker to query your database or ContentProvider for appropriate record and then use the returned data to set more text, images, etc. in the bottom sheet.

OlgaMaciaszek
  • 3,662
  • 1
  • 28
  • 32
2

The Flipboard bottom sheet will do it, but without the FAB. Flipboard/bottomsheet

Flávio Filho
  • 475
  • 4
  • 14
  • Thank you, this is what I was looking for. Although I find it weird that everyone is using a third party library for such a basic thing. Seems to be way more complicated than I thought. – gnolle Nov 16 '15 at 18:52
  • You may try to use this implementation, without third part libraries, although I haven't tested yet: [framelayout-your-best-ui-friend](http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/) – Flávio Filho Nov 16 '15 at 23:46