ModalBottomSheetDialog

Prerequisites

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

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

Dependency

Add this to your module's build.gradle file (make sure the version matches the JitPack badge above):

dependencies {
    ...
    implementation 'com.github.invissvenska:ModalBottomSheetDialog:VERSION'
}

Configuration

Implement the ModalBottomSheetDialog Listener interface on your Activity or Fragment:

Implements listener in Activity

public class MainActivity extends AppCompatActivity implements ModalBottomSheetDialog.Listener {
    // some code
}

Implements listener in Fragment

public class Fragment implements ModalBottomSheetDialog.Listener {
    // some code
}

Override onItemSelected method

@Override
public void onItemSelected(String tag, Item item) {
    Toast.makeText(getApplicationContext(), "Tag: " + tag + ", clicked on: " + item.getTitle(), 
        Toast.LENGTH_SHORT).show();
}

Create the dialog

new ModalBottomSheetDialog.Builder()
    .setHeader(String title) // optional
    .setHeaderLayout(@LayoutRes int layoutResource) // optional (TextView must have id 'header' in layout)
    .add(@MenuRes int menuResource) // can be used more then once
    .setItemLayout(@LayoutRes int layoutResource) // optional (TextView with id 'title' or ImageView with id 'icon' must be defined in layout)
    .setColumns(int columns) // optional (default is 1)
    .setRoundedModal(boolean roundedModal) // optional (default is false)
    .show(FragmentManager fragmentManager, String tag);

Extend you theme with on of the DayNight variants to support a dark styled ModalBottomSheetDialog. For example styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- other style declarations -->

</resources>

Usage

Fragment

When you use the ModalBottomSheetDialog in a Fragment and want to show the bottom dialog:

dialog.show(getChildFragmentManager(), "WithHeader");

Activity

When you use the ModalBottomSheetDialog in an Activity and want to show the bottom dialog:

dialog.show(getSupportFragmentManager(), "WithHeader");

Options

To create a ModalBottomSheetDialog and display it later in code:

ModalBottomSheetDialog dialog = new ModalBottomSheetDialog.Builder()
    .setHeader("Title of modal")
    .add(R.menu.options)
    .build();
// some other code in between
dialog.show(FragmentManager fragmentManager, "WithHeader");

To display a ModalBottomSheetDialog directly:

new ModalBottomSheetDialog.Builder()
    .setHeader("Title of modal")
    .add(R.menu.options)
    .show(FragmentManager fragmentManager, "WithHeader");

To display a ModalBottomSheetDialog with items from multiple menu resources:

new ModalBottomSheetDialog.Builder()
    .add(R.menu.options)
    .add(R.menu.options)
    .show(FragmentManager fragmentManager, "WithoutHeader");

To display a ModalBottomSheetDialog in a grid layout:

new ModalBottomSheetDialog.Builder()
    .setHeader("Grid bottom layout")
    .add(R.menu.lot_of_options)
    .setColumns(3)
    .show(FragmentManager fragmentManager, "Grid Layout");

To display a ModalBottomSheetDialog with custom layout:

new ModalBottomSheetDialog.Builder()
    .setHeader("Custom title and item layouts")
    .setHeaderLayout(R.layout.alternate_bottom_sheet_fragment_header)
    .add(R.menu.lot_of_options)
    .setItemLayout(R.layout.alternate_bottom_sheet_fragment_item)
    .setColumns(3)
    .show(FragmentManager fragmentManager, "Custom Layout");

To display a ModalBottomSheetDialog with rounded corners:

new ModalBottomSheetDialog.Builder()
    .setHeader("Rounded bottom layout")
    .add(R.menu.lot_of_options)
    .setRoundedModal(true)
    .show(FragmentManager fragmentManager, "Rounded Layout");

If you want to close a ModalBottomSheetDialog:

dialog.dismiss();

Screenshots

Please click the image below to enlarge.

invissvenska/ModalBottomSheetDialog