How Create Bottom Sheet Like Google Map?

5.4k views Asked by At

I use Google Maps on my project , I have in mind to display the location information use of bottom sheet like Google map.

I need that like Google Maps Button sheet in three stages show.

STAGE1:

enter image description here

STAGE 2:

enter image description here

STAGE 3:

enter image description here

For this purpose I've used the following components: This and This;

But I did not succeed :(

This is My Codes:

FRAGMENT Layout:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/bottomSheet_main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/smooth_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="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|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
               <ViewFlipper
                   android:layout_below="@+id/bottomSheet_toolbar"
                   android:layout_width="match_parent"
                   android:layout_height="300dp"
                   android:id="@+id/bottom_sheet_viewflipper"
                   android:scaleType="centerCrop"
                   android:fitsSystemWindows="true"
                   app:layout_collapseMode="parallax"/>
                <android.support.v7.widget.Toolbar
                    android:id="@+id/bottomSheet_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@drawable/gradiant_background"
                    app:popupTheme="@style/AppTheme.PopupOverlay"
                    app:layout_collapseMode="pin">
                    <ImageView
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        app:srcCompat="@drawable/vector_drawable_arrow_left_"/>
                    </android.support.v7.widget.Toolbar>

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

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="fitXY"
            android:id="@+id/bottomSheet_background_image"
            android:layout_below="@+id/smooth_app_bar_layout"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/smooth_app_bar_layout" />


</android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_marginLeft="20dp"
        app:srcCompat="@drawable/vector_drawable_sports_car"
        app:layout_anchor="@+id/smooth_app_bar_layout"
        app:layout_anchorGravity="bottom|left|start"
        android:id="@+id/bottomSheet_fab"/>

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

And Actvivty Layout:

<com.flipboard.bottomsheet.BottomSheetLayout android:id="@+id/bottomsheet"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:ripple="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:animateLayoutChanges="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.AppBarOverlay"
            android:id="@+id/main_AppBar"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">
            <android.support.v7.widget.Toolbar
                android:id="@+id/main_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView

                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/main_menu_category"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentTop="true"
                        android:layout_alignParentBottom="true"
                        android:gravity="center"
                        android:textSize="30sp"
                        android:textColor="@android:color/white"
                        android:layout_marginRight="16dp"
                        android:layout_marginLeft="16dp"/>

                    <ImageView

                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/main_toolbar_text_barcode_"
                        android:layout_alignParentTop="true"
                        android:layout_toLeftOf="@+id/layer_toolbar_text_tik"
                        android:layout_toStartOf="@+id/layer_toolbar_text_tik"
                        android:layout_marginRight="0.5dp"
                        android:gravity="center"
                        android:layout_alignParentBottom="true" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

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


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <fragment
                    android:id="@+id/map"
                    android:name="com.google.android.gms.maps.SupportMapFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:context="sharmap.ir.shahrmap.activities.MapsActivity"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true" />
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginLeft="20dp"
                    android:background="@drawable/layout_corner">



                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/fa_clone"
                        android:textColor="@color/light_black"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true"
                        android:id="@+id/main_layers"
                        android:textSize="@dimen/text_font"
                        android:layout_marginRight="16dp"
                        android:layout_marginLeft="16dp"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="3"
                        android:textColor="@color/light_black"
                        android:layout_marginLeft="16dp"
                        android:layout_marginStart="16dp"
                        android:id="@+id/main_Search"
                        android:gravity="center_vertical|center_horizontal"
                        android:textSize="@dimen/text_font"
                        android:layout_alignBaseline="@+id/main_layers"
                        android:layout_alignBottom="@+id/main_layers"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true" />

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:id="@+id/main_bottombar"
                    android:background="@color/transparet_white"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true">

                    <ImageView
                        android:padding="8dp"
                        android:gravity="center"
                        android:layout_centerVertical="true"
                        android:layout_centerHorizontal="true"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:id="@+id/main_bottombar_voiceSerch"
                        app:srcCompat="@drawable/vector_drawable_voice"/>


                    <ImageView
                        android:padding="8dp"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:id="@+id/main_bottombar_map"
                        app:srcCompat="@drawable/vector_drawable_placeholder2"
                        android:gravity="center"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true"
                        android:layout_marginRight="40dp"
                        android:layout_alignParentTop="true"/>


                    <com.github.ybq.android.spinkit.SpinKitView
                        android:id="@+id/main_bottom_spin_kit"
                        style="@style/SpinKitView.Large.Circle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        ripple:SpinKit_Color="@color/voiceSearch"
                        android:layout_alignParentTop="true"
                        android:layout_centerHorizontal="true"
                        android:visibility="gone"/>

                    <ImageView
                        android:padding="8dp"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:id="@+id/main_bottombar_profile"
                        app:srcCompat="@drawable/vector_drawable_user"
                        android:layout_marginLeft="40dp"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"/>

                </RelativeLayout>
            </RelativeLayout>
        </LinearLayout>

</com.flipboard.bottomsheet.BottomSheetLayout>

And Activity Class when click on marker:

    mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                                     new MyFragment(bMap).show(getSupportFragmentManager(),                         R.id.bottomsheet);

                return true;
            }
        });

Please Help Me To Handle It!:).Thank you for any help.>

0

There are 0 answers