As time goes by, Material Design is more and more appreciated by people. That’s because the graphic is captivating and really simple to use. On the other hand, sometimes, Google doesn’t help us to implement the Material Design due to the lack of documentation. On the Material Design site, we can find many components, and one of them is the Backdrop. Unfortunately, this component is under development for several years, and there isn’t a release date. The scope of this article is to implement it.
As the site says:
A backdrop is composed of two surfaces: a back layer and a front layer. The back layer displays actions and context, and these control and inform the front layer’s content.
This means the front and the back layer must communicate with each other.
We can use the backdrop element to do different things like creating a filter, showing a hidden menu or keeping track of some steps.
To implement the behaviour of the Backdrop, we will use a Bottom Sheet component, but we have to remove the touch from it since, as the documentation tells, we cannot use the swipe gestures.
Don’t use the swipe gesture on the front layer to reveal the back layer.
In this article, we’re creating an app to filter a list of elements.
Alright, enough talk. Let’s see the code.
First of all, let’s create our layout.
If you ever used the bottom sheet component you probably know it stops in the middle when we’re dragging it down. Well, this line of code is used for removing this middle step. Of course, we shouldn’t use this parameter since the swipe gestures should be disabled, but in case you’d like to enable them this attribute will be handy.
Defines the height when the bottom sheet is collapsed.
Sets a custom class to block any gesture on the bottom sheet.
Here we have a classic layout with corners radius on the top that I set through this shape.xml:
Let’s now see our Kotlin code:
This code will block any gesture from the bottom sheet.
Let’s define an interface to communicate between fragment and activity, onBottomSheetCallbacks.kt:
supportActionBar?.elevation = 0f
We set the elevation equal to zero to remove any shadows between the action bar (same thing for the toolbar) and the layout.
Inside configureBackdrop() we get an instance of BottomSheetBehavior to call the interface to notify a state change and set the bottom sheet expanded by default.
We can now implement our OnBottomSheetCallbacks inside the fragment class and get notified of every state change. Since our fragment class is attached to our activity class, we can have access to the method openBottomSheet() and closeBottomSheet() we have defined before.
Let’s take a look at our final app.
You can find my GitHub Repository here.
I hope this article was useful to you. 😊