Android Bottom Sheet Understanding With Examples

by

Introduction

User interface elements like Bottom Sheets have transformed the way users interact with Android apps. The Bottom Sheet is a flexible and modern UI component that slides up from the bottom of the screen, offering a convenient way to display additional content without leaving the current screen.

In this blog, we will explore the types of Bottom Sheets, their importance in app design, and how to implement them with easy-to-follow examples.

What is an Android Bottom Sheet?

An Android Bottom Sheet is a panel that slides up from the bottom of the screen. It shows menus, lists, or other content without hiding the main screen. Bottom Sheets improve user experience by offering quick access to actions or details without switching to a new screen.

Types of Bottom Sheets

1. Modal Bottom Sheet:

    • Covers part of the screen, dimming the background.
    • Often used for displaying menus, filters, or forms.

    2. Persistent Bottom Sheet:

      • Stays anchored at the bottom of the screen.
      • Ideal for showing supplementary options like media controls.

      3. Expandable Bottom Sheet:

        • Can expand to full screen and collapse back to the bottom.
        • Used for displaying detailed content like maps or lists.

        Why Use a Bottom Sheet?

        1. Improved Navigation: Provides quick and intuitive access to additional options or content.
        2. User experience: Shows extra information without taking the user to a new screen
        3. Space Efficiency: Maximizes screen space by showing content only when needed.

        How to Implement an Android Bottom Sheet

        Let’s dive into some examples to understand how to add Bottom Sheets to your app.

        1. Modal Bottom Sheet Example

        XML Layout (modal_bottom_sheet.xml):

        <LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:orientation="vertical"  
    android:padding="16dp">  

    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="This is a Modal Bottom Sheet"  
        android:textSize="18sp"  
        android:textStyle="bold" />  

    <Button  
        android:id="@+id/btnClose"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="Close" />  
</LinearLayout>

        Java Code:

        public class ModalBottomSheet extends BottomSheetDialogFragment {  
    @Nullable  
    @Override  
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,  
                             @Nullable Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.modal_bottom_sheet, container, false);  
    }  

    @Override  
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {  
        super.onViewCreated(view, savedInstanceState);  
        Button btnClose = view.findViewById(R.id.btnClose);  
        btnClose.setOnClickListener(v -> dismiss());  
    }  
}

        To Show the Bottom Sheet:

        new ModalBottomSheet().show(getSupportFragmentManager(), "ModalBottomSheet");
        2. Persistent Bottom Sheet Example

        XML Layout:

        <androidx.coordinatorlayout.widget.CoordinatorLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  

    <LinearLayout  
        android:id="@+id/persistent_bottom_sheet"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:orientation="vertical"  
        android:background="@color/white">  

        <TextView  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:text="This is a Persistent Bottom Sheet"  
            android:textSize="18sp" />  
    </LinearLayout>  

</androidx.coordinatorlayout.widget.CoordinatorLayout>

        Java Code:

        BottomSheetBehavior<View> bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.persistent_bottom_sheet));  
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

        Best Practices for Using Bottom Sheets

        1. Clarity: Ensure the Bottom Sheet content is relevant and actionable.
        2. Responsiveness: Test on multiple screen sizes for optimal usability.
        3. Performance: Avoid overloading the Bottom Sheet with too much content.

        Conclusion

        Bottom Sheets are an integral part of modern Android app design, offering a seamless way to present additional options or content. By implementing them effectively, you can enhance the user experience and create visually appealing apps.

        Related Resources

        Leave a Comment