Android Bottom Sheet material design

In this blog, we are discussing the Android Bottom Sheet material design. So if you want to add the bottom sheet in your application, then this blog will help you to apply the material design on the bottom sheet.

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code.

Material streamlines collaboration between designers and developers and helps teams quickly build beautiful products.

As per Google documentation, Material design is a guide for visual, motion, and interaction design. The Android platform provides a new theme, new widgets, and new API for custom shadows and animations. Material design also provides improved API for animations and provides several default animations. Material Design is Google’s attempt to provide a more consistent experience for Android users.

The bottom sheet is a dismissible component in android, which animates from the bottom of the screen. The bottom sheet provides an easy and flexible way for displaying the components and menus in an easy way to the user with the best user experiences.

There are three types of bottom sheets depending on the requirement we can use them:

Standard bottom sheet: Standard bottom sheet display the components that complement the main primary contents. The bottom sheet remains visible while interacting with the primary components.

Modal bottom sheet: Modal bottom sheet display the components that overlay on the main primary contents. The bottom sheet dismiss while interacting with the primary components.

Expanding bottom sheet: Expanding bottom sheet provides a collapsed surface that can be expanded for accessing the bottom sheet components. As a result, It provides the persistence access of the standard bottom sheet and the focus of the modal sheet.

Implementation

1. Initial setup

Add below dependency in your app-level build.gradle file like.

dependencies { 
    implementation "com.google.android.material:material:$material_version"
}

dependencies {

implementation "com.google.android.material:material:$material_version"

}

2. Theming Bottom sheet

The bottom sheet support material theming. It can be customized in terms of color and shape.

Set the theme attribute bottomSheetDialogTheme on style.xml. As a result, the style will be applied to all the bottom sheets like below:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialogTheme</item>
    </style>

    <style name="CustomBottomSheetDialogTheme" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
    </style>

    <style name="CustomBottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet">
        <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
    </style>

    <style name="CustomShapeAppearanceBottomSheetDialog" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">6dp</item>
        <item name="cornerSizeTopRight">6dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialogTheme</item>

</style>

<item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>

</style>

<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>

</style>

<item name="cornerFamily">rounded</item>

</style>

bottomSheetDialogTheme is the style for all the bottom sheets in the application.

Conclusion:

In this blog, you have learned about the implementation of the Android Bottom Sheet material design.

For more information regarding the Android Bottom Sheet material design follow the link.

Thanks for reading this blog. You can also check other blogs from here.

Akshay Kumar 29 October 2021

. . .

Android Bottom Sheet material design

Implementation

1. Initial setup

2. Theming Bottom sheet

Conclusion:

Leave a Comment Cancel Reply

Message Sent!