Android : MapView in a CollapsingToolbarLayout

Question

I'm currently trying to put a Map View (or a fragment containing the map)inside a CollapsingToolbarLayout. I would want to have the parallax effect on it when the RecyclerView scrolls. Unfortunately, it isn't showing up at all! Not even the grey grid! The collapsing animation is working though. I've search everywhere, but all I was able to find is about ImageView and no other component. So here are my questions :

Is it even possible to put anything else than an ImageView in a CollapsingToolbarLayout ? (The documentation is talking about child views so I thought it was possible)
If so, is a fragment allowed as well?
Then what am I doing wrong??

Here is my xml :

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:map="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/main_activity_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:background="?attr/colorPrimary"
                android:layout_alignParentTop="true"
                app:layout_collapseMode="pin"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            </android.support.v7.widget.Toolbar>

            <com.google.android.gms.maps.MapView
                android:id="@+id/main_activity_mapview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:apiKey="AIzaSyA-kEuKT39QK8eG7iYWriFgsvkrZZz6zNo"
                android:clickable="true"
                app:layout_collapseMode="parallax" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_rv_list_places"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

And the part where I get the map back. onMapReady is never triggered.

    if (mMap == null) {

        MapView mapView = (MapView) findViewById(R.id.mapview);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(GoogleMap googleMap) {
                mMap = googleMap;
                MapsInitializer.initialize(MainActivity.this);
                //...
                // other stuff here
            }
        });

    }

Are you correctly initializing the map (i.e., calling onCreate(), onResume(), onPause() at the same points in the activity)? — natario, Jun 25 '15 at 09:26
@m vai Ok... I feel stupid... I didn't call those functions and now that i do it's working great ! Thank you very much :) — Kazuya, Jun 25 '15 at 10:05
i am working with fragment instead of mapview...the map is scrolling but when i scroll black background remain...i dont knw why? can you help me? — H Raval, Nov 18 '15 at 09:05
Hi. I tried to use a fragment and never managed to make it work. Why don't you use a MapView ? It works fine and doesn't change much about how to use it. — Kazuya, Nov 19 '15 at 09:27

score 3 · Accepted Answer · answered Apr 11 '17 at 05:32

You can use MapView also to display google map.

Within Coordinator layout we can use collapsing toolbar with mapview . Its working fine.

Need to mention google map key correctly.

activity_main.xml:

<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">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_lay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false"
            app:statusBarScrim="@null"
            android:fitsSystemWindows="true">
                <com.google.android.gms.maps.MapView
                    android:id="@+id/map_view"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_below="@+id/main_lay"
                    android:apiKey="@string/google_maps_key"
                    android:clickable="true"
                    android:enabled="true"
                    android:focusable="true"
                    app:layout_collapseMode="parallax"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/post_rcycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:visibility="visible"
        android:clipToPadding="false"
        android:fitsSystemWindows="true"
        app:layout_collapseMode="parallax"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

MainActivity.Java:

public class MainActivity extends AppCompatActivity implements View.OnClickListener, OnMapReadyCallback, GoogleApiClient.ConnectionCallbacks,
        GoogleApiClient.OnConnectionFailedListener, com.google.android.gms.location.LocationListener, GoogleMap.OnMapLoadedCallback  {
    private MapView mapView;
    private GoogleMap mGoogleMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mapView = (MapView) findViewById(R.id.map_view);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(this);

}
@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;
    mapView.getMapAsync(this);
}
}

`mapView.getMapAsync(this)` line inside will call `onMapReady` so your code will be an endless loop. — Farid, May 31 '19 at 16:59

score 1 · Answer 2 · edited May 23 '17 at 12:02

This works fine for me

Use a Fragment instead of MapView

 <fragment xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:map="http://schemas.android.com/apk/res-auto"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:id="@+id/map"
                  android:name="com.google.android.gms.maps.SupportMapFragment"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  tools:context="com.example.axel.googlemapsdemo.MapsActivity"/>

Activity

    public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

        private GoogleMap mMap;
        RecyclerView mRecyclerView;
        TestAdapter adapter;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_maps);
            // Obtain the SupportMapFragment and get notified when the map is ready to be used.
            SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                    .findFragmentById(R.id.map);
            mapFragment.getMapAsync(this);
            setUpRecyclerView();
        }


        @Override
        public void onMapReady(GoogleMap googleMap) {
            mMap = googleMap;
   `        // Do stuff
        }
}

API Key is in google_maps_api.xml.

My Parent Layout is CoordinatorLayout (I assume is yours as well but it doesn't appear on the question)

Notice that with this approach CollapsingToolbarLayout scroll overcast Map scroll

Solution:

AppBarLayout mAppBarLayout = (AppBarLayout)findViewById(R.id.appBarLayout);
        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
        AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
        behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
            @Override
            public boolean canDrag(AppBarLayout appBarLayout) {
                return false;
            }
        });
        params.setBehavior(behavior);

That problem is address here How to use map fragment correctly in Collapsingtoolbarlayout

NOTE: maybe a Bottom Sheet fits your needs best

some examples: http://www.truiton.com/2016/07/android-bottom-sheet-example/ https://github.com/miguelhincapie/CustomBottomSheetBehavior

Android : MapView in a CollapsingToolbarLayout

2 Answers2

Linked