commit451/modalbottomsheetdialogfragment

Modal bottom sheet dialog based on the Material Guidelines

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.

modalbottomsheetdialogfragment's Issues

How can i get the selected menu item index or position?

Hi, I want the selected index or position in Option Object. How can I get this?

Kind Regards,
Hassan

Trying to show BottomSheet inside fragment

I'm trying to show a bottom sheet inside a custom fragment. In this fragment I implement the Listener:

class MyFragment : Fragment(), ModalBottomSheetDialogFragment.Listener {
}

Then the method:

override fun onModalOptionSelected(tag: String?, option: Option) {
    Snackbar.make(root, "Selected option ${option.title} from fragment with tag $tag", Snackbar.LENGTH_SHORT)
            .show()
}

Then, when I want to show the bottom sheet dialog, I just call this:

ModalBottomSheetDialogFragment.Builder()
    .add(R.menu.menu_options)
    .show(activity!!.supportFragmentManager, "my_bottom_sheet")

But just after the execution I get this error:

java.lang.IllegalStateException: ModalBottomSheetDialogFragment must be attached to a parent (activity or fragment) that implements the ModalBottomSheetDialogFragment.Listener
at com.commit451.modalbottomsheetdialogfragment.ModalBottomSheetDialogFragment.bindHost(ModalBottomSheetDialogFragment.kt:136)
at com.commit451.modalbottomsheetdialogfragment.ModalBottomSheetDialogFragment.onViewCreated(ModalBottomSheetDialogFragment.kt:115)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1439)

It is possible to show the bottom sheet dialog inside a fragment?

Position issue onClick when using headers

Thanks again for helping me on the last issue. This is how I'm setting up the modal:

implementation 'com.github.Commit451:ModalBottomSheetDialogFragment:1.0.0'

my_modal_menu,xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_view"
        android:icon="@drawable/ic_view"
        android:title="View" />

    <item
        android:id="@+id/action_delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete" />
</menu>

Then, I add a header to my modal and add the menu:

ModalBottomSheetDialogFragment.Builder()
    .add(R.menu.my_modal_menu)
    .header("Pick an option")
    .show(childFragmentManager, "my_modal")

The bottom modal shows up, but is throwing an throwIndexOutOfBoundsException

java.lang.IndexOutOfBoundsException: Invalid index 2, size is 2
        at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
        at java.util.ArrayList.get(ArrayList.java:308)
        at com.commit451.modalbottomsheetdialogfragment.ModalBottomSheetDialogFragment$Adapter$onCreateViewHolder$1.onClick(ModalBottomSheetDialogFragment.kt:212)

So I went and debugged and we got this:

When I'm pressing the second option on the bottom sheet modal, you get the adapterPosition which you can see below is 2.

But the problem is I only have two options, position 0 and 1:

Then the error is thrown. Maybe it has something to do to the fact I'm using a header so the adapterPosition is 2 because the header is 0?

Thanks!

Dialog Background change

how we can change background of base Dialog ???