[Tutorial] Flipboard BottomSheet on Android Studio
In this post, I’ll show you how to use Flipboard BottomSheet. This library allows you to create an dismissible view from the bottom of the screen.
I - About Android Tutorials
I’ll be creating a big number of Android tutorials, showing you how to use nice libraries, UI, tips, and more.
I’ll be using Android Studio and Gradle in all tutorials.
If you need some help with any Android lib or feature, feel free to comment here and if possible, I can write a new tutorial about it :)
|Get updates||Follow @aron-bordin|
II - Flipboard BottomSheet
From the official documentation, you can see Flipboard BottomSheet as:
BottomSheet is an Android component which presents a dismissible view from the bottom of the screen. BottomSheet can be a useful replacement for dialogs and menus but can hold any view so the use cases are endless. This repository includes the BottomSheet component itself but also includes a set of common view components presented in a bottom sheet. These are located in the commons module.
If you prefer, you can read the original documentation here: https://github.com/Flipboard/bottomsheet
III - Creating a new project
Now, let’s start to work with it. Start a new Android Studio project.
Create your app with a Blank Activity, called MainActivity.
Now you need to add BottomSheet as a Gradle dependency. Open the file
to your project’s dependencies.
This is my dependencies:
Now, just to make sure that your app is working, click in the run button ;)
First, update your
with the following code:
Notice that the root view is a
, and you can put any layout inside this one.
The layout inside the BottomSheetLayout is the default app view.
In the main screen we have four buttons. Each button is an independent part of this tutorial. Choose the usage that may help you and just read the next desired topic.
to the following:
The code above has the
listener and the
Here we’ll open a custom layout with the BottomSheet.
Start creating your custom view, this is mine:
callback to open the custom view:
Now you can run your app and see the result. Click on
button and your custom view will be visible. You can swipe up to expand the custom view.
Expanding BottomSheet programmatically
In the previous topic you were able to show the bottomsheet and then to expand it with a touch swipe.
Now you will see how to expand it programmatically.
It’s very simple, Flipboard BottomSheet provides the
you can close it with the command:
Working with Common components
In the next steps, you’ll see how to work with some common components.
First, add a new gradle dependency, the
This is my updated gradle:
This is the original sample running:
Use the following code:
First we just create the custom intent. I’m using ACTION_SEND, but you can try another intents.
Then it’s created the
object, that will start the custom intent activity.
Finally, just display it with
That’s it, thanks for reading!