Sheets

Sleek dialogs and bottom-sheets for quick use in your app. Choose one of the available sheets or build custom sheets on top of the existing functionality.

Get started

The library is available for compose as well. Check out Sheets-Compose-Dialogs.

A sheet can dynamically be displayed as either a dialog or as a bottom-sheet. Check out the sample.

You have to use the core module as it is the foundation of any sheet.

In your top-level build.gradle file:

repositories {
  ...
  mavenCentral()
}

In your app build.gradle file:

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:core:<latest-version>'
}

Use build to build a sheet and display it later.

val sheet = InfoSheet().build(context) {
  // build sheet
}

sheet.show() // Show sheet when ready

Use show if you want to build and then immediately display it.

InfoSheet().show(context) {
  // build sheet
} // Show sheet

Resources

📖 Get a better insight into the API
Sheets API Documentation

Info

The Info Sheet lets you display information or warning.

<details open> <summary>Showcase as Dialog</summary>

</details> <details> <summary>Showcase as BottomSheet</summary> <img src="docs/res/InfoSheet BottomSheet.png" width="80%" alt="Sheets InfoSheet"> <img src="docs/res/InfoSheet BottomSheet Cover TopStyle Top.png" width="80%" alt="Sheets InfoSheet BottomSheet"> <img src="docs/res/InfoSheet BottomSheet Cover TopStyle Bottom.png" width="80%" alt="Sheets InfoSheet BottomSheet"> <img src="docs/res/InfoSheet BottomSheet Cover TopStyle Mixed.png" width="80%" alt="Sheets InfoSheet BottomSheet"> </details>

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:info:<latest-version>'
}

Usage

For the default info sheet use it as following:

InfoSheet().show(context) {
  title("Do you want to install Awake?")
  content("Awake is a beautiful alarm app with morning challenges, advanced alarm management and more.")
  onNegative("No") {
    // Handle event
  }
  onPositive("Install") {
    // Handle event
  }
}

Option

The Option Sheet lets you display a grid or list of options.

<details open> <summary>Showcase as Dialog</summary> <img src="docs/res/OptionsSheet Dialog Grid Middle.png" width="80%" alt="Sheets OptionsSheet Dialog"> </details> <details> <summary>Showcase as BottomSheet</summary> <img src="docs/res/OptionsSheet BottomSheet Grid Middle.png" width="80%" alt="Sheets OptionsSheet BottomSheet"> </details> <details> <summary>Showcase some variants as Dialogs</summary>

</details> <details> <summary>Showcase some variants as BottomSheets</summary>

</details>

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:info:<latest-version>'
}

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:option:<latest-version>'
}

Usage

For the default options sheet use it as following:

OptionSheet().show(context) {
  title("Text message")
  with(
    Option(R.drawable.ic_copy, "Copy"),
    Option(R.drawable.ic_translate, "Translate"),
    Option(R.drawable.ic_paste, "Paste")
  )
  onPositive { index: Int, option: Option ->
    // Handle selected option
  }
}

Clock

The Clock Sheet lets you quickly pick a time.

<details> <summary>Showcase as Dialog</summary> <img src="docs/res/ClockTimeSheet Dialog.png" width="80%" alt="Sheets OptionsSheet Dialog"> </details> <details open> <summary>Showcase as BottomSheet</summary> <img src="docs/res/ClockTimeSheet BottomSheet.png" width="80%" alt="Sheets OptionsSheet BottomSheet"> </details>

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:clock:<latest-version>'
}

Usage

For the default clock time sheet, in 24-hours format, use it as following:

ClockSheet().show(context) {
  title("Wake-up time")
  onPositive { clockTimeInMillis: Long ->
    // Handle selected time
  }
}

Time

The Duration Sheet lets you pick a duration time in a specific format.

<details open> <summary>Showcase as Dialog</summary> <img src="docs/res/TimeSheet Dialog.png" width="80%" alt="Sheets TimeSheet Dialog"> </details> <details> <summary>Showcase as BottomSheet</summary> <img src="docs/res/TimeSheet BottomSheet.png" width="80%" alt="Sheets TimeSheet BottomSheet"> </details>

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:duration:<latest-version>'
}

Usage

For the default time sheet use it as following:

DurationSheet().show(context) {
  title("Snooze time")
  onPositive { durationTimeInMillis: Long ->
    // Handle selected time
  }
}

Input

The Input Sheet lets you display a form consisting of various inputs.

<details> <summary>Showcase as Dialog</summary> <img src="docs/res/InputSheet Dialog Short.png" width="80%" alt="Sheets InputSheet Dialog"> </

Sheets

Install / Use

README

Sheets

Get started

Resources

Info

Usage

Option

Usage

Clock

Usage

Time

Usage

Input