[Tutorial] Flipboard BottomSheet on Android Studio

Welcome!

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 :)

Source Codes:

Get updates Follow @aron-bordin
Star it: Star
Contribute: Fork
Download: Download

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 

1

app/build.gradle
and add 
1

compile 'com.flipboard:bottomsheet-core:1.4.3'
 to your project’s dependencies.

This is my dependencies:

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile 'com.android.support:appcompat-v7:23.0.1'
  compile 'com.flipboard:bottomsheet-core:1.4.3'
}

Now, just to make sure that your app is working, click in the run button ;)

Layouts

First, update your 

1

activity_main.xml
with the following code:

<com.flipboard.bottomsheet.BottomSheetLayout
    android:id="@+id/bottomsheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_custom_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Custom View"
            android:onClick="onClick" />

        <Button
            android:id="@+id/btn_intent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open Intent"
            android:onClick="onClick" />

    </LinearLayout>

</com.flipboard.bottomsheet.BottomSheetLayout>

Notice that the root view is a 

1

<com.flipboard.bottomsheet.BottomSheetLayout />
, 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.

Update your 

1

MainActivity.java
to the following:

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;

import com.flipboard.bottomsheet.BottomSheetLayout;


public class MainActivity extends ActionBarActivity implements View.OnClickListener{

  BottomSheetLayout bottomSheetLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
  }

  @Override
  public void onClick(View view) {
      switch (view.getId()){
          case R.id.btn_custom_view:
              break;
          case R.id.btn_expand_me:
              break;
          case R.id.btn_intent:
              break;
      }
  }
}

The code above has the 

1

onClick
listener and the 
1

bottomSheetLayout
 object.

Custom View

Here we’ll open a custom layout with the BottomSheet.

Start creating your custom view, this is mine:

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="50dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingBottom="50dp"
    android:background="@color/background_material_dark">

    <Button
        android:id="@+id/btn_expand_me"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="Expand this view"/>

    <TextView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        android:layout_gravity="center_horizontal|bottom"
        android:textColor="@android:color/white"/>

</FrameLayout>

Update your 

1

onClick
callback to open the custom view:

case R.id.btn_custom_view:
    bottomSheetLayout.showWithSheetView(getLayoutInflater().inflate(R.layout.custom_view, bottomSheetLayout, false));
    break;

Now you can run your app and see the result. Click on 

1

CUSTOM VIEW
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 

1

expandSheet()
method.

Update your 

1

onClick
callback:

case R.id.btn_expand_me:
  bottomSheetLayout.expandSheet();
  break;

you can close it with the command:

  bottomSheetLayout.peekSheet();

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 

1

'com.flipboard:bottomsheet-commons:1.4.3'

This is my updated gradle:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.flipboard:bottomsheet-core:1.4.3'
    compile 'com.flipboard:bottomsheet-commons:1.4.3'
}

Share Intent

This is the original sample running:

Share Intent with Flipboard BottomSheet

Use the following code:

case R.id.btn_intent:
  final Intent shareIntent = new Intent(Intent.ACTION_SEND);
  shareIntent.putExtra(Intent.EXTRA_TEXT, "Rhesoft tutorial");
  shareIntent.setType("text/plain");

  IntentPickerSheetView intentPickerSheetView = new IntentPickerSheetView(MainActivity.this, shareIntent, "Share", new IntentPickerSheetView.OnIntentPickedListener() {
      @Override
      public void onIntentPicked(IntentPickerSheetView.ActivityInfo activityInfo) {
          bottomSheetLayout.dismissSheet();
          startActivity(activityInfo.getConcreteIntent(shareIntent));
      }
  });

  bottomSheetLayout.showWithSheetView(intentPickerSheetView);
  break;

First we just create the custom intent. I’m using ACTION_SEND, but you can try another intents.

Then it’s created the 

1

IntentPickerSheetView
object, that will start the custom intent activity.

Finally, just display it with 

1

showWithSheetView
.

That’s it, thanks for reading!

Aron Bordin

About the Author

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)
Follow @aron-bordin
Read More

[Tutorial] Android Material Icon Library

### Welcome!In this post, I'll show you how to use [Material Icon Library](https://github.com/code-mc/material-icon-lib).This is a really...… Continue reading

[Tutorial] Android Process Button - Animated Buttons on Android Studio

Published on December 29, 2015

[Tutorial] Node.js Webkit Desktop app with AngularJS - A Todo List

Published on November 18, 2015