Streamlining Android Development 2: HELU Bottom Button Sheet

This week, we’ll look at HELU Bottom Button Sheet, an extension library build on top of Google's Bottom Sheet Dialog Fragment.

The whole idea is to offer a builder class and methods to easily create BottomSheetDialogFragment with an appropriate material style. If you want a slightly different design than the material's default, do not worry. The builder class offers methods to change all sizes, margins, padding, colors, etc. Once you create your sheet, you can start adding stuff into it. There are three basic methods to do that.

The first one is the simple addButton() method, which allows you to add a classic button in a variant with or without an image. The second one is addDivider(), which will add a simple line divider. The last one is addCustomView(), which will allow you to insert any View you would like. This way you can easily put your custom layout in there.

Let’s start with some examples. First, you need to add the library into your gradle file:

implementation “cz.helu.android:helubottombuttonsheet:2.1.0”

We are now ready to create our sheet from the builder class. Let’s start with something simple. Let’s create HELU Bottom Button Sheet without any modifications:

val sheet = HeluBottomButtonSheet.Builder(this).build()

This way we create a new instance of HeluBottomButtonSheet. We can then add some buttons into it:

sheet.addButton("First button", View.OnClickListener { /* click */ })
sheet.addButton("Second button", View.OnClickListener { /* click */ })

Everything is now ready, and we can show HELU Bottom Button Sheet to a user. All we need to do is call the show() method, and pass SupportFragmentManager to it like this:

sheet.show(supportFragmentManager)

Result:

Pretty easy! Let’s try to make it a little bit nicer now and add a title and buttons with images:

val sheet = HeluBottomButtonSheet.Builder(this)
	.withTitle("Complex sheet")
	.withItemHeightRes(R.dimen.global_size_36)
	.withTitleTextSizeRes(R.dimen.global_text_20)
	.build()

sheet.addButton(R.drawable.ic_edit, "Edit", View.OnClickListener { /* click */ })
sheet.addButton(R.drawable.ic_delete, "Delete", View.OnClickListener { /* click */ })

sheet.show(supportFragmentManager)

Result:

Let’s try something more complex now and change the style of the sheet a little bit. We can also add EditText using the addCustomView() method:

val sheet = HeluBottomButtonSheet.Builder(this)
	.withTitle("Simple sheet")
	.build()

sheet.addButton(R.drawable.ic_edit, "Edit", View.OnClickListener { /* click */ })
sheet.addButton(R.drawable.ic_delete, "Delete", View.OnClickListener { /* click */ })
sheet.addDivider()
sheet.addCustomView(EditText(this).apply { hint = "Custom EditText view" })

sheet.show(supportFragmentManager)

Result:

That's all for today. Now you should know how to use HELU Bottom Button Sheet to create a Material-like BottomSheetDialogFragment, and how to use it with custom style. I hope you like it. If you have any suggestions or issues with this library, please let me know. You can see all methods and examples here or go to STRV.io, STRV's new open source library hub.

We're hiring