Open an activity or fragment with Bottom Sheet Deep Linking

Question

I want to open a Bottom Sheet (Deep Linking way) but inside of it instead of share options or just a layout, I want to have an activity with its layout or a fragment with its layout.

Known libraries that open Bottom Sheet Like Flipboard/BottomSheet can open layout, not whole activity.

Is there any possibility to achieve that with a Coordinator Layout?

I found a Google's Photo on Bottom Sheet Component Page that shows what exactly I have in mind. Google's description says:

The app on the right displays a bottom sheet containing content from the app on the left. This allows the user to view content from another app without leaving their current app.

Answer 1

I am not an expert, but after some research, I've found a simple way to do this. In your activity_main.xml first, make sure that your root layout is the android.support.design.widget.CoordinatorLayout.

Just inside that CoodrdinatorLayout add an include to your Bottom Sheet Layout:

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

Then, and this is probably the most important step, you need to specify the behavior of the Bottom Sheet layout, so here is a sample code:

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/bottomSheet" android:layout_width="match_parent" android:layout_height="300dp" android:orientation="vertical" android:background="#FFFFFF" app:layout_behavior="@string/bottom_sheet_behavior" app:behavior_hideable="true" app:behavior_peekHeight="64dp" >     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textAppearance="@style/TextAppearance.AppCompat.Title"         android:padding="16dp"         android:text="BOTTOM SHEET" />      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textAppearance="@style/TextAppearance.AppCompat.Body1"         android:padding="16dp"         android:text="Here goes text" />  </LinearLayout> 

Okay, so that was all the XML code. Notice that we applied an app:layout_behavior so that it has the properties we want. Another important thing is to specify app:behavior_hideable="true" if we want to have the option of hiding the whole layout. The attribute app:behavior_peekHeight="64dp" means that the view will be 64dp high when it is collapsed (but not hidden). There are 3 main stages of this view:

• Expanded (STATE_EXPANDED): when the Bottom Sheet is completely open.

• Collapsed (STATE_COLLAPSED): when the user only sees a small part from the top of the view. The attribute app:behavior_peekHeight determines this height.

• Hidden(STATE_HIDDEN): When it is completely hidden (SURPRISE HAHA!).

We also have STATE_SETTLING and STATE_DRAGGING which are transitory, but they are not that important. Now, if you run your app (you don't have to write any JAVA code) you will see that if you swipe up the title that will appear at the bottom of your layout, the Sheet will expand, and the same in the other way.

But you may notice that if you click on the Bottom Sheet, nothing happens. You can play with some Java code to manage the state of the Bottom Sheet:

Declare the view: LinearLayout bottomSheet = (LinearLayout)findViewById(R.id.bottomSheet);

Declare the behavior "manager":

final BottomSheetBehavior bsb = BottomSheetBehavior.from(bottomSheet);

And then you can get state changes:

bsb.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) {      String strNewState = "";      switch(newState) {         case BottomSheetBehavior.STATE_COLLAPSED:             strNewState = "STATE_COLLAPSED";             break;         case BottomSheetBehavior.STATE_EXPANDED:             strNewState = "STATE_EXPANDED";             break;         case BottomSheetBehavior.STATE_HIDDEN:             strNewState = "STATE_HIDDEN";             break;         case BottomSheetBehavior.STATE_DRAGGING:             strNewState = "STATE_DRAGGING";             break;         case BottomSheetBehavior.STATE_SETTLING:             strNewState = "STATE_SETTLING";             break;     }      Log.i("BottomSheets", "New state: " + strNewState); }  @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) {     Log.i("BottomSheets", "Offset: " + slideOffset); }}); 

And there it is!

You can also use a Modal Bottom Sheet, which lets you create a Bottom Sheet as if it was a fragment.