Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android How to implement Bottom Sheet from Material Design docs

How do you implement the bottom sheet specficiation? http://www.google.com/design/spec/components/bottom-sheets.html

The new update to Google Drive shows this with the Floating Action Button press ->

enter image description here

Granted the specs never say anything about rounded corners, regardless it is possible to do, just unsure of how to go about it. Currently using the AppCompat library and target set to 21.

Thanks

like image 285
John Shelley Avatar asked Nov 03 '14 19:11

John Shelley


People also ask

How do you implement a bottom sheet?

Approach: Add the support Library in build. gradle file and add dependency in the dependencies section. With the help of this library we can inherit the BottomSheetDialogFragment which helps us to implement Bottom Sheet component.

What is the difference between bottom sheet and modal bottom sheet?

Modal BottomSheet This kind of BottomSheet has an appearance similar to an alert-dialog or dialog fragment. The name has been given because of its behavior and appearance that are similar to Modals. Unlike Persistent BottomSheet, it appears from the bottom of the screen when a user requests certain actions.

How do you use a modal bottom sheet?

Modal bottom sheet Modal bottom sheets render a shadow on the content below them to indicate that they are modal. If the content outside of the dialog is tapped then the bottom sheet is dismissed. Modal bottom sheets can be dragged vertically and dismissed by completely sliding them down.

What is the use of bottom sheet?

The Bottom Sheet is a component that slides up from the bottom of the screen to showcase additional content in your application.


2 Answers

Edit

The BottomSheet is now part of the android-support-library. See John Shelleys' answer.


Unfortunately there's currently no "official" way on how to do this (at least none that I'm aware of).
Luckily there's a library called "BottomSheet" (click) which mimics the look and feel of the BottomSheet and supports Android 2.1 and up.

In case of the Drive app, here's how the code would look like with this library:

    new BottomSheet.Builder(this, R.style.BottomSheet_Dialog)             .title("New")             .grid() // <-- important part             .sheet(R.menu.menu_bottom_sheet)             .listener(new DialogInterface.OnClickListener() {         @Override         public void onClick(DialogInterface dialog, int which) {             // TODO         }     }).show(); 

menu_bottom_sheet (basically a standard /res/menu/*.xml resource)

<menu xmlns:android="http://schemas.android.com/apk/res/android">     <item         android:id="@+id/folder"         android:title="Folder"         android:icon="@drawable/ic_action_folder" />     <item         android:id="@+id/upload"         android:title="Upload"         android:icon="@drawable/ic_action_file_upload" />     <item         android:id="@+id/scan"         android:title="Scan"         android:icon="@drawable/ic_action_camera_alt" /> </menu> 

Output looks like this:

picture of the bottom sheet

Which, I think, comes pretty close to the original. If you're not happy with the colors you can customize it - see this (click).

like image 185
reVerse Avatar answered Oct 28 '22 23:10

reVerse


Answering my own question so developers know that the new support library provides this finally! All hail the all powerful Google!

An example from the Android Developer's Blog:

// The View with the BottomSheetBehavior View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);   BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);   behavior.setBottomSheetCallback(new BottomSheetCallback() {      @Override      public void onStateChanged(@NonNull View bottomSheet, int newState) {        // React to state change      }      @Override     public void onSlide(@NonNull View bottomSheet, float slideOffset) {        // React to dragging events     }   }); 

@reVerse's answer above is still a valid option but its nice to know that there is a standard that Google supports too.

like image 40
John Shelley Avatar answered Oct 28 '22 22:10

John Shelley