Presenting BottomSheet

by Emil Sjölander ∙ June 04, 2015

We are happy to introduce BottomSheet a new Open Source Android UI Component!

At Flipboard, we love building visually stunning and highly interactive UIs. When building these UIs, we tend to build them as fairly stand alone components. This makes it very easy for our developers to implement a similar interaction model and aesthetic across the whole product while working in parallel. BottomSheet is a UI component we developed to facilitate a new interaction model for saving an article to one of your magazines (otherwise known as “The Flip UI”).

The result of our efforts is a design you can now see in the current version of Flipboard.

BottomSheet fits perfectly with Google’s Material Design aesthetic as well, matching their Bottom Sheet specification. We think this component is great for displaying many types of views, from a simple intent picker to something as complex as the example shown from Flipboard. In its simplest form, BottomSheet can be used to show any view in a sort of modal UI that’s presented from the bottom of the screen can be interactively dismissed. At Flipboard, we think it’s very important that things feel responsive, and having interactive animations is an important part of this.

Apart from providing a component for presenting views in a BottomSheet, we have also have a module for common views developers might like to present in a BottomSheet. The first such component we’re releasing is the 

1

IntentPickerSheetView
. This sheet view is initialized with an intent and will show a grid of activities that can handle the intent. It works very similarly to Android’s built in IntentChooser, and looks very similar to the picker used in Lollipop and above. There are a couple of ways in which our implementation improves upon the system intent chooser:

  • It can be interactively dismissed, making it feel much more responsive.
  • It adds an easy-to-use API for filtering and sorting the activities shown. Ever wanted to filter out the Bluetooth activity when adding sharing functionality to your app? With the 
    1

    IntentPickerSheetView
    , that’s simple!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

IntentPickerSheetView intentPickerSheet = new IntentPickerSheetView(MainActivity.this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
    @Override
    public void onIntentPicked(Intent intent) {
        bottomSheet.dismissSheet();
        startActivity(intent);
    }
});
// Filter out built in sharing options such as bluetooth and beam.
intentPickerSheet.setFilter(new IntentPickerSheetView.Filter() {
    @Override
    public boolean include(IntentPickerSheetView.ActvityInfo info) {
        return !info.componentName.getPackageName().startsWith("com.android");
    }
});
// Sort activities in reverse order for no good reason
intentPickerSheet.setSortMethod(new Comparator<IntentPickerSheetView.ActvityInfo>() {
    @Override
    public int compare(IntentPickerSheetView.ActvityInfo lhs, IntentPickerSheetView.ActvityInfo rhs) {
        return rhs.label.compareTo(lhs.label);
    }
});
bottomSheet.showWithSheetView(intentPickerSheet);

We would love for you to join us on GitHub to collaborate in adding many more of these common components!

And before I send you off to scour the interwebs for cat GIFs to display in your new BottomSheets, I want to take this opportunity to advertise that we are looking for talented Android engineers to join our team here in Palo Alto, California. Apply here

Add to Flipboard Magazine.