https://github.com/maxkeppeler/sheets
⭐ Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets.
https://github.com/maxkeppeler/sheets
android android-bottomsheet android-design android-library bottom bottom-sheets bottomsheet bottomsheet-android bottomsheet-dialog bottomsheetdialog bottomsheetdialogfragment bottomsheets calendar-sheet color-sheet design-patterns kotlin-library material material-design sheets
Last synced: 18 days ago
JSON representation
⭐ Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets.
- Host: GitHub
- URL: https://github.com/maxkeppeler/sheets
- Owner: maxkeppeler
- License: apache-2.0
- Created: 2020-11-24T20:12:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-27T18:49:13.000Z (almost 2 years ago)
- Last Synced: 2025-04-02T02:12:42.228Z (25 days ago)
- Topics: android, android-bottomsheet, android-design, android-library, bottom, bottom-sheets, bottomsheet, bottomsheet-android, bottomsheet-dialog, bottomsheetdialog, bottomsheetdialogfragment, bottomsheets, calendar-sheet, color-sheet, design-patterns, kotlin-library, material, material-design, sheets
- Language: Kotlin
- Homepage: https://maxkeppeler.github.io/sheets/
- Size: 142 MB
- Stars: 931
- Watchers: 15
- Forks: 77
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - maxkeppeler/sheets - ⭐ Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets. (Kotlin)
README
# 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](https://github.com/maxkeppeler/sheets-compose-dialogs).
A sheet can dynamically be displayed as either a dialog or as a bottom-sheet. Check out
the [sample](https://github.com/MaxKeppeler/sheets/blob/main/sample/sample.apk).
You have to use the `core` module as it is the foundation of any sheet.
In your top-level `build.gradle` file:
```gradle
repositories {
...
mavenCentral()
}
```
In your app `build.gradle` file:
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/core)
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:core:'
}
```
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](https://maxkeppeler.github.io/sheets/api/)
# Info
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/core)
The `Info` Sheet lets you display information or warning.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:info:'
}
```
### 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
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/option)
The `Option` Sheet lets you display a grid or list of options.
Showcase as Dialog
Showcase as BottomSheet
Showcase some variants as Dialogs
Showcase some variants as BottomSheets
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:info:'
}
```
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:option:'
}
```
### 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
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/clock)
The `Clock` Sheet lets you quickly pick a time.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:clock:'
}
```
### 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
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/time)
The `Duration` Sheet lets you pick a duration time in a specific format.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:duration:'
}
```
### Usage
For the default time sheet use it as following:
DurationSheet().show(context) {
title("Snooze time")
onPositive { durationTimeInMillis: Long ->
// Handle selected time
}
}
## Input
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/input)
The `Input` Sheet lets you display a form consisting of various inputs.
Showcase as Dialog
Showcase as BottomSheet
Showcase some variants as Dialogs
Showcase some variants as BottomSheets
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:input:'
}
```
### Usage
For the default input sheet use it as following:
InputSheet().show(context) {
title("Short survey")
with(InputEditText {
required()
label("Your favorite TV-Show")
hint("The Mandalorian, ...")
validationListener { value -> } // Add custom validation logic
changeListener { value -> } // Input value changed
resultListener { value -> } // Input value changed when form finished
})
with(InputCheckBox("binge_watching") { // Read value later by index or custom key from bundle
label("Binge Watching")
text("I'm regularly binge watching shows on Netflix.")
// ... more options
})
with(InputRadioButtons() {
required()
label("Streaming service of your choice")
options(mutableListOf("Netflix", "Amazon", "Other"))
})
// ... more input options
onNegative { showToast("InputSheet cancelled", "No result") }
onPositive { result ->
showToastLong("InputSheet result", result.toString())
val text = result.getString("0") // Read value of inputs by index
val check = result.getBoolean("binge_watching") // Read value by passed key
}
} |
## Calendar
[  ](https://search.maven.org/artifact/com.maxkeppeler.calendar/core)
The `Calendar` Sheet lets you pick a date or date range. This type was build using the
library [CalendarView](https://github.com/kizitonwose/CalendarView).
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:calendar:'
}
```
### Usage
For the default time sheet use it as following:
CalendarSheet().show(this) { // Build and show
title("What's your date of birth?") // Set the title of the sheet
onPositive { dateStart, dateEnd ->
// Handle date or range
} |
## Storage
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/storage)
The `Storage` Sheet lets you pick one or more files or folders.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:storage:'
}
```
### Usage
For the default storage sheet use it as following:
StorageSheet().show(this) {
fileDisplayMode(FileDisplayMode.HORIZONTAL)
selectionMode(StorageSelectionMode.FILE)
onPositive { files -> /* Handle files or folders */ }
}
## Color
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/color)
The `Color` Sheet lets you pick a color. Display the default material colors or specify which colors
can be choosen from. You can allow to chose a custom color as well.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:color:'
}
```
### Usage
For the default color sheet use it as following:
ColorSheet().show(context) {
title("Background color")
onPositive { color ->
// Use color
}
}
## Custom
With just the 'core' module you are able to create your own sheet based on this library. You can use
some components and styles within your own custom sheet automatically. By default the buttons and
toolbar view with logic is ready to be used by your own implementation.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:core:'
}
```
### Get started
You can find a custom sheet implementation in the sample module.
1. Step: Create a class and extend from the class `Sheet`.
class CustomSheet : Sheet() {
2. Step: Implement the method: `onCreateLayoutView` and pass your custom layout.
override fun onCreateLayoutView(): View { return LayoutInflater.from(activity).inflate(
R.layout.sheets_custom, null)
}
All of the base functionality can be used and on top of that you can extend the logic and behavior
as you wish.
### Components
You are free to use the components this library uses for it's sheet types.
- `SheetsTitle`
- `SheetsContent`
- `SheetsDigit`
- `SheetsNumericalInput`
- `SheetsDivider`
- `SheetsButton`
- `SheetsEdit`
- `SheetsRecyclerView`
- `SheetsValue`
## Lottie
[  ](https://search.maven.org/artifact/com.maxkeppeler.sheets/lottie)
The `Lottie` modules gives you the ability to use
a [Lottie animations](https://airbnb.design/lottie/) as cover view.
Showcase as Dialog
Showcase as BottomSheet
```gradle
dependencies {
...
implementation 'com.maxkeppeler.sheets:lottie:'
}
```
### Usage
You can use the Lottie animation as a cover for any type of sheet.
InfoSheet().show(this) {
title("Team Collaboration")
content("In the world of software projects, it is inevitable...")
...
withCoverLottieAnimation(LottieAnimation {
setAnimation(R.raw.anim_lottie_business_team)
... Setup Lottie animation
})
...
}
## Appearance
By default, the library switches to either day or night mode depending on the
attr `textColorPrimary`. By default it uses the activity's colorPrimary. The
default `highlightColor` is generated based on the color `sheetsPrimaryColor`, or if not
available `colorPrimary`.
### Base
You want a different sheet background shape? Then just override the corner family and radius.
12dp
cut
Just overwrite the base colors, if you want to achieve a different look of the sheets than your app.
@color/customPrimaryColor
@color/customHighlightColor
@color/customBackgroundColor
@color/customDividerColor
@color/customIconsColor
You can override the basic style of a sheet. Instead of displaying the toolbar, you can just hide it
and display the typical handle.
true
false
false
Change the appearance of the title.
@color/customTitleTextColor
@font/font
@dimen/dimen
value
Change the appearance of the content text.
@color/customContentTextColor
@color/customContentTextInverseColor
@font/font
@dimen/dimen
value
Change the appearance of the value texts. (e.g. the time in the TimeSheet & ClockSheet or the
selected date & period in the Calendarsheet.)
@color/customValueTextColor
@font/font
@dimen/dimen
value
Change the appearance of the digit keys on the numerical input.
@color/customDigitTextColor
@font/font
@dimen/dimen
value
### Buttons
Override the appearance of the button text.
@font/font
value
Override the general appearance of the buttons (negative and positive button).
@color/customButtonColor
@font/font
value
12dp
cut
match_content/wrap_content
Override the appearance of the negative button.
text_button/outlined_button/button
color
12dp
cut
Override the appearance of the positive button.
text_button/outlined_button/button
color
12dp
cut
Override the border appearance of the outlined button.
@color/borderColor
1dp
The corner family and radius is applied to the button shape or in the case of a outlined or text
button, to the ripple background shape.
**Fine control**
You can even define the corner family and radius of the negative and positive button for each
corner.
4dp
cut
...
8dp
rounded
### Handle
The size and the appearance of the handle can be changed like this:
8dp
rounded
?sheetPrimaryColor
?sheetPrimaryColor
1dp
42dp
4dp
### OptionSheet
Override appearance of selected options.
@color/customSelectedOptionImageColor
@color/customSelectedOptionTextColor
Override appearance of disabled options.
@color/customDisabledOptionImageColors
@color/customDisabledOptionImageColor
@color/customDisabledOptionBackgColor
### InputSheet
Override the appearance of the TextInputLayout (used for the InputEditText).
12dp
12dp
... and for all other corners
@color/customEndIconColor
@color/customHelperTextColor
@color/customBoxStrokeColor
@color/customHintTextColor
@color/customBoxStrokeErrorColor
@color/customErrorTextColor
# Misc
## Support this project
- Leave a star and tell others about it
- Watch for updates and improvements.
- [Open an issue](https://github.com/MaxKeppeler/sheets/issues/) if you see or got any error.
- Leave your
thanks [here](https://github.com/MaxKeppeler/sheets/discussions/categories/show-and-tell) and
showcase your implementation.
- Donate me a coffee.
## Contribute
1. Open an issue to discuss what you would like to change.
2. Fork the Project
3. Create your feature branch (feature-[some-name])
4. Commit your changes
5. Push to the branch (origin feature-[some-name])
6. Open a pull request
## Donate
Show your appreciation by donating me a coffee. Thank you very much!
## Showcase
Check out some apps which are using this library.
- [Aquafy](http://aquafy-mk.com) - Beautiful hydration tracker and reminder.
- [Awake](http://awake-mk.com) - Intelligent alarms and wake-up challenges and sleep tracking to
improve your daily sleep and day-time quality.
- [Sign for Spotify](https://play.google.com/store/apps/details?id=com.mk.sign.spotifyv2) - Playlist
and control widgets for Spotify content.
- [Buddha Quotes](https://play.google.com/store/apps/details?id=org.bandev.buddhaquotes) - Open
Source Buddha Quotes.
## License
Copyright 2020 Maximilian Keppeler https://maxkeppeler.com
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.