androidandroid-mapviewmapfragmentandroid-collapsingtoolbarlayout

Android : MapView in a CollapsingToolbarLayout


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 :

  1. 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)
  2. If so, is a fragment allowed as well?
  3. 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
            }
        });

    }

Solution

  • 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);
    }
    }