[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 app/build.gradle and add 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 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 <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 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 onClick listener and the 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 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 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 expandSheet() method.
Update your 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 '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:
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 IntentPickerSheetView object, that will start the custom intent activity.
Finally, just display it with showWithSheetView.
That’s it, thanks for reading!
Aron Bordin
