Implement Backdrop with Kotlin

Mattia Ferigutti
Nov 6 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Alright, enough talk. Let’s see the code.

Image for post
Image for post

First of all, let’s create our layout.

activity_main.xml

app:behavior_skipCollapsed=”true” 

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.

app:behavior_peekHeight="70dp"

Defines the height when the bottom sheet is collapsed.

app:layout_behavior=".GestureLockedBottomSheetBehavior"

Sets a custom class to block any gesture on the bottom sheet.

fragment_window

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:

GestureLockedBottomSheetBehavior.kt

This code will block any gesture from the bottom sheet.

Let’s define an interface to communicate between fragment and activity, onBottomSheetCallbacks.kt:

MainActivity.kt

With

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.

WindowFragment.kt

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.

Image for post
Image for post

You can find my GitHub Repository here.

Resource

To write this article, I used these sources: source1, source2, source3.

Greetings

I hope this article was useful to you. 😊

The Startup

Medium's largest active publication, followed by +731K people. Follow to join our community.

Mattia Ferigutti

Written by

Android Engineering @PilloHealth. In my spare time, I love writing songs, playing my guitar, and keeping in shape.

The Startup

Medium's largest active publication, followed by +731K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store