Skip to content

Commit451/ModalBottomSheetDialogFragment

Repository files navigation

ModalBottomSheetDialogFragment

Modal bottom sheet dialog based on the Material Guidelines

Dependency

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

Then, add the library to your project build.gradle

dependencies {
    implementation("com.github.Commit451:ModalBottomSheetDialogFragment:latest.version.here")
}

Usage

ModalBottomSheetDialogFragments are typically inflated via a menu item resource. The menu item resource defines the title, icon, and ID is of each Option. The menu item resource might looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="Favorite" />

    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ic_share_black_24dp"
        android:title="Share" />

    <item
        android:id="@+id/action_edit"
        android:icon="@drawable/ic_edit_black_24dp"
        android:title="Edit" />

</menu>

Use the builder to create and show the bottom sheet dialog:

ModalBottomSheetDialogFragment.Builder()
    .add(R.menu.options)
    .show(supportFragmentManager, "options")

Make sure that your Activity or Fragment implements ModalBottomSheetDialogFragment.Listener. For example:

override fun onModalOptionSelected(tag: String?, option: Option) {
    when (option.id) {
        R.id.action_edit -> {
            // edit something
        }
        R.id.action_delete -> {
            // delete something
        }
    }
    Snackbar.make(root, "Selected option ${option.title} from fragment with tag $tag", Snackbar.LENGTH_SHORT)
            .show()
}

You can also customize things to your liking:

ModalBottomSheetDialogFragment.Builder()
    .add(R.menu.option_lots)
    //custom option, without needing menu XML
    .add(OptionRequest(123, "Custom", R.drawable.ic_bluetooth_black_24dp))
    .layout(R.layout.item_custom)
    .theme(R.style.CustomTheme)
    .header("Neat")
    .columns(3)
    .show(supportFragmentManager, "custom")

See the sample app for more.

License

Copyright 2022 Commit 451

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.