Expanded Android Maps panel with design support library

I have a simple question. I have been playing around with the newer version of the android android library and what I am trying to do is similar to what happens in the google maps app when you select a marker or point on the map: a sliding bar appears from the bottom. As in these pictures

What I created is an Activity extending AppCompatActivity and a framework structured like this:

<android.support.v4.widget.DrawerLayout
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"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:animateLayoutChanges="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
                   <fragment
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/map"
                        android:name="com.google.android.gms.maps.SupportMapFragment"
                        tools:context=".MapActivity"

                        map:cameraZoom="15"
                        map:mapType="normal"
                        map:uiCompass="true"
                        map:uiRotateGestures="true"
                        map:uiScrollGestures="true"
                        map:uiZoomControls="false"
                        map:uiZoomGestures="true"

                        app:layout_collapseMode="parallax"

                        android:animateLayoutChanges="true">
                   </fragment>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"/>

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btnNWShowLocation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_nw_pos"
        android:layout_gravity="bottom|start"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        app:fabSize="normal"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btnGPSShowLocation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_gps_pos"
        app:layout_anchor="@+id/checkin_card"
        app:layout_anchorGravity="right"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        app:fabSize="normal"/>

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/navigation_drawer_header"
    android:backgroundTint="@color/my_divider"
    app:menu="@menu/menu_navigation_drawer" />

      

When I click on the btnGPSShowLocation FAB, I simply resize the height of the map to make enough space to show my layout. But it's not as smooth as the Google Maps app.

Perhaps this is the wrong way to achieve what I want. Can you help me?

+3


source to share





All Articles