Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

    }
like image 866
Kazuya Avatar asked Jun 25 '15 09:06

Kazuya


People also ask

What is collapsingtoolbarlayout in Android?

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.

How to create collapsingtoolbarlayout and nestedscrollview using xamarinandroidsupportdesign?

In this article, you will learn how to create CollapsingToolbarLayout, NestedScrollView, CardView, using XamarinAndroidSupportDesign. Step 1: Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App Select blank app. Give Project Name and Project Location. Step 2: Go to Solution Explorer-> Project Name-> Components.

What is the use of appbarlayout in Android?

AppBarLayout should be used as a direct child of coordinatorLayout. Basically, it is a vertical Linear Layout , children of which can manage the behaviour when the content is scrolled. setScrollFlags (int) or app:layout_scrollFlags is used to provide their children their desired scrolling behavior.

How to treat a googlemap as an Android view?

It is possible to treat a GoogleMap as an Android view if we make use of the provided MapView class. Its usage is very similar to MapFragment. In your layout use MapView as follows:


1 Answers

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);
}
}
like image 185
Sathish Kumar VG Avatar answered Nov 15 '22 00:11

Sathish Kumar VG