Skip to main content

Material Design - Bottom Sheet

Bottom Sheet (Persistent)
Bottom sheets slides up from the bottom of the screen to reveal content. However, depending on the display of sheets they are categorized into two.
  1. Persistent Android Bottom Sheet
  2. Modal Android Bottom Sheet

Persistent Android Bottom Sheet

Persistent bottom sheet are mainly used to display in-app details. Suppose there is an additional content which is useful to the user, you need to show in it. Scenario, in which you are persistent to show content related to your app you will use this type of design. 

Persistent Bottom Sheet


Simple example of Persistent Bottom Sheet. 
For this you require to create a project in Android Studio. Add the following line under dependencies in build.gradle file of /app folder.


 implementation 'com.android.support:design:27.0.2'

The above line will enable you to have all the classes that are required for Bottom Sheet implementation
Now, in your main layout file define the layout container which will act as your Bottom Sheet. In my case I have resorted to RelativeLayout. The below code will help you understand the concept.


 <RelativeLayout  
     android:id="@+id/bottom_sheet"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:background="#901973a7"  
     app:behavior_hideable="false"  
     app:behavior_peekHeight="120dp"  
     app:elevation="4dp"  
     app:layout_behavior="@string/bottom_sheet_behavior">  
     <TextView  
       android:id="@+id/bottomsheet_text"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:gravity="center"  
       android:text="@string/details"  
       android:textColor="#FFFFFF"  
       android:textSize="14sp"  
       android:textStyle="bold" />  
   </RelativeLayout>

Persistent Bottom Sheet are drag-gable and hide able depending on the boolean value of "app:behaviour_hideable". The attribute "app:behaviour_peekHeight" is used to determine the height which will be visible at initial stage. The attribute which recognizes the layout as Bottom Sheet is "app:layout_behaviour=@string/bottom_sheet_behaviour".

The whole project can be downloaded from here.

Comments

Post a Comment

Popular posts from this blog

Bottom Sheet (Modal)

Bottom Sheet (Modal) Modal bottom sheet are more like a dialog in appearance.One must have seen a deeplink dialog which pops when you want to share stuff, something like that, except here he manipulate and populate the contents on that dialog.  The fact that they appear on top of our other UI components, in order to resume interaction to page we need to dismiss or close the bottom sheet. When the modal bottom sheet slides up, rest of the page appears dim giving focus to the bottom sheet. Modal Bottom Sheet requires BottomSheetDialogFragment, which is a thin layer on top of regular support library fragment that renders your fragment as Bottom Sheet. The development of this bottom sheet is different than persistent bottom sheet.  public class ModalSheetDialog extends BottomSheetDialogFragment { String mString; static ModalSheetDialog newInstance(String string) { ModalSheetDialog f = new ModalSheetDialog(); Bundle args =...
Post a Comment
Read more

Bottom Navigation (Android Material Design)

Android Material Design Material design is a design language developed by Google  in 2014. The idea was to have a unified front for all design aspects. Bottom Navigation Bottom navigation bars are situated as name suggests at the bottom of your view. It enables you to select or to say explore top-level views on single tap. The requirement should be clear in your head, if you have two main views to show, its better you don't use Bottom Navigation View, instead go for Tabs. There can be minimum three to maximum five top-levels destinations. In case, you add sixth element it will throw an exception at run-time. Bottom Navigation view A simple example to create Bottom Navigation View. Create a Project in Android Studio. Select type of Activity you want to create. Here we will select "Bottom Navigation Activity".    Select your Activity Customizing the view accordingly now, will require we add are own icons and text. To change the desig...
Post a Comment
Read more