ModalBottomSheetDialog

Additional

Language
Java
Version
1.0.5 (Mar 25, 2021)
Created
Jun 7, 2020
Updated
Dec 15, 2021
Owner
Sven van den Tweel (invissvenska)
Contributors
Sven van den Tweel (invissvenska)
MYW (tcw123)
2
Activity
Badge
Generate
Download
Source code
APK file

Blurb

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.