title: How Create Bottom Sheet Like Google Map?
body: <p>I use Google Maps on my project , I have in mind to display the location information use of bottom sheet like Google map.</p>
  
  <p>I need that like Google Maps Button sheet in three stages show.</p>
  
  <p>STAGE1:</p>
  
  <p><a href="https://i.stack.imgur.com/DFDfj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DFDfj.png" alt="enter image description here"></a></p>
  
  <p>STAGE 2:</p>
  
  <p><a href="https://i.stack.imgur.com/xk4QS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xk4QS.png" alt="enter image description here"></a></p>
  
  <p>STAGE 3:</p>
  
  <p><a href="https://i.stack.imgur.com/NGwZn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NGwZn.png" alt="enter image description here"></a></p>
  
  <p>For this purpose I've used the following components: <a href="https://libraries.io/github/TR4Android/AndroidSlidingUpPanel" rel="noreferrer">This</a> and <a href="http://blog.grafixartist.com/bottom-sheet-android-design-support-library/" rel="noreferrer">This</a>;</p>
  
  <p>But I did not succeed :(</p>
  
  <p>This is My Codes:</p>
  
  <p>FRAGMENT Layout:</p>
  
  <pre><code>&lt;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"&gt;
  
  &lt;android.support.design.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"&gt;
  
      &lt;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"&gt;
  
          &lt;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"&gt;
                 &lt;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"/&gt;
                  &lt;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"&gt;
                      &lt;ImageView
                          android:layout_width="24dp"
                          android:layout_height="24dp"
                          app:srcCompat="@drawable/vector_drawable_arrow_left_"/&gt;
                      &lt;/android.support.v7.widget.Toolbar&gt;
  
          &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
          &lt;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"/&gt;
          &lt;FrameLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_below="@+id/smooth_app_bar_layout" /&gt;
  
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
      &lt;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"/&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>And Actvivty Layout:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"&gt;
          &lt;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"&gt;
              &lt;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"&gt;
  
                  &lt;RelativeLayout
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"&gt;
  
                      &lt;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"/&gt;
  
                      &lt;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" /&gt;
  
                  &lt;/RelativeLayout&gt;
  
              &lt;/android.support.v7.widget.Toolbar&gt;
  
          &lt;/android.support.design.widget.AppBarLayout&gt;
  
  
              &lt;RelativeLayout
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"&gt;
                  &lt;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" /&gt;
                  &lt;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"&gt;
  
  
  
                      &lt;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"/&gt;
  
                      &lt;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" /&gt;
  
                  &lt;/RelativeLayout&gt;
  
                  &lt;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"&gt;
  
                      &lt;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"/&gt;
  
  
                      &lt;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"/&gt;
  
  
                      &lt;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"/&gt;
  
                      &lt;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"/&gt;
  
                  &lt;/RelativeLayout&gt;
              &lt;/RelativeLayout&gt;
          &lt;/LinearLayout&gt;
  
  &lt;/com.flipboard.bottomsheet.BottomSheetLayout&gt;
  </code></pre>
  
  <p>And Activity Class when click on marker:</p>
  
  <pre><code>    mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
              @Override
              public boolean onMarkerClick(Marker marker) {
                                       new MyFragment(bMap).show(getSupportFragmentManager(),                         R.id.bottomsheet);
  
                  return true;
              }
          });
  </code></pre>
  
  <p>Please Help Me To Handle It!:).Thank you for any help.></p>