Sleek dialogs and bottom-sheets for quick use in your app

Last update: Dec 25, 2022

Overview

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.

Read in Deutsch or 简体中文.

Get started
Misc

Get started

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:
   
    '
   
}

Base functions
Following functions can be called from any type of sheet.

Function	Action
style()	Display as dialog or bottom-sheet.
title()	Set the title text.
titleColor()	Set the title text color.
titleColorRes()	Set the title text color by a resource.
withCoverImage()	Add a cover image.
topStyle()	Specify the style of the cover image and top bar.
positiveButtonStyle()	Define the style of the positive button (Text, Filled, Outlined).
negativeButtonStyle()	Define the style of the negative button (Text, Filled, Outlined).
withIconButton()	Add up to 3 icon buttons to the top bar.
closeIconButton()	Set a custom close icon button.
displayHandle()	Display the handle.
displayCloseButton()	Display close icon button.
displayToolbar()	Display toolbar. (Close icon button, title, divider and icon buttons)
peekHeight()	Set the peek height. (Only bottom-sheet)
cornerRadius()	Set corner radius.
cornerFamily()	Set corner family. (Cut or rounded)
borderWidth()	Set the border width.
borderColor()	Set the border color.
cancelableOutside()	Make sheet cancelable outside of the dialog view.
onNegative()	Set the negative button text and listener.
onPositive()	Set the positive button text and listener.
onDismiss()	Set a listener that is invoked when the sheet is dismissed.
onCancel()	Set a listener that is invoked when the sheet is cancelled (only if cancelable).
onClose()	Set a listener that is invoked when the sheet is closed.
show()	show the sheet.

Each sheet has an extension function called build and show.

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

Info

The Info Sheet lets you display information or warning.

Showcase as Dialog

Showcase as BottomSheet

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
  }
}

Function	Action
content()	Set content text.
drawable()	Set drawable.
drawableColor()	Set drawable color.
customView()	Use a custom view.

Options

The Options 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

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:info:
   
    '
   
}

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:options:
   
    '
   
}

Usage

For the default options sheet use it as following:

// Handle selected option } } ">

OptionsSheet().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
  }
}

Function	Action
multipleChoices()	Allow multiple choices content.
displayMultipleChoicesInfo()	Display info of the multiple choices.
maxChoicesStrictLimit()	Specify that the max choices is strict and more choices can't be selected temporarily.
minChoices()	Set the minimum amount of choices.
maxChoices()	Set the maximum amount of choices.
onPositiveMultiple()	Set listener for multiple choices.
displayButtons()	Display buttons and require a positive button click for selection.
displayMode()	Display options in a list or a vertical/ horizontal growing scrollable grid.
preventIconTint()	(Global) Prevents the lib to use a tint for the icons. Keeps the default colors of a drawable.

Option

Function	Action
selected()	Preselect an option.
disable()	Disable an option.
preventIconTint()	(Local) Prevents the lib to use a tint for the icons. Keeps the default colors of a drawable.

Note: Preselected options automatically increase the current selection while disabled options decrease the maximum amount of choices.

Clock Time

The Clock Time Sheet lets you quickly pick a time.

Showcase as Dialog

Showcase as BottomSheet

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:time-clock:
   
    '
   
}

Usage

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

// Handle selected time } } ">

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

Function	Action
format24Hours()	Use 24-hours or 12-hours format.
currentTime()	Set the current time in milliseconds.

Time

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

Showcase as Dialog

Showcase as BottomSheet

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:time:
   
    '
   
}

Usage

For the default time sheet use it as following:

// Handle selected time } } ">

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

Function	Action
format()	Select the time format. (hh:mm:ss, mm:ss, ...)
currentTime()	Set the current time in seconds.
minTime()	Set the minimum time.
maxTime()`	Set the maximum time.

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

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:input:
   
    '
   
}

Usage

For the default input sheet use it as following:

} // 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 } } ">

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
  }
}

Function	Action
with()	Add an input. (see input options)
displayInput()	Set visibility of a specific input.

Input options:

InputEditText
InputCheckBox
InputSwitch
InputRadioButtons
InputSpinner
InputSeparator

Input

Function	Action
label()	Set the label text.
content()	Set content text. (e. g. to explain a survey)
drawable()	Set the drawable.
required()	Mark input as required.
visible()	Set initial visibility.
changeListener()	Set listener to observe changes.
resultListener()	Set listener for final value.

InputEditText

Function	Action
hint()	Set the hint text.
defaultValue()	Set default text.
inputType()	Set the `android.text.InputType`'s.
inputFilter()	Set the `android.text.inputFilter`
maxLines()	Set the max amount of lines.
endIconMode()	Set TextInputLayout.EndIconMode.
endIconActivated()	Set the EndIcon activated.
passwordVisible()	Make the password initially visible or invisible.
validationListener()	Validate the text input with your own logic.

InputCheckBox

Function	Action
text()	Set the text.
defaultValue()	Set default value.

InputSwitch

Function	Action
text()	Set the text.
defaultValue()	Set default value.

InputRadioButtons

Function	Action
options()	Set a list of RadioButton options.
selected()	Set a selected index.

InputSpinner

Function	Action
noSelectionText()	Set the text that is displayed, when nothing is selected.
options(MutableList of String)	Set a list of options.
options(MutableList of SpinnerOption)	Set a list of options with optional icon for each option.
selected()	Set a selected index.

Calendar

The Calendar Sheet lets you pick a date or date range. This type was build using the library CalendarView.

Showcase as Dialog

Showcase as BottomSheet

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:calendar:
   
    '
   
}

Usage

For the default time sheet use it as following:

// Handle date or range } ">

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
  }

Function	Action
selectionMode()	Choose the selection mode (date or range).
calendarMode()	Choose the calendar mode (week with various rows or month-view).
disableTimeline()	Disable either past or future dates.
rangeYears()	Set the range of years into past and future.
disable()	Pass a `Calendar` object to disable various dates for selection.
displayButtons()	Show or hide the buttons view.

Storage

The Storage Sheet lets you pick one or more files or folders.

Showcase as Dialog

Showcase as BottomSheet

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 */ }
}

Function	Action
fileDisplayMode()	Display a file either horizontal or vertical.
fileColumns()	Specify the amount of colums in which the files are displayed.
selectionMode()	Select either files or folders.
selected()	Define files that are by default selected.
homeLocation()	Define the home location. User can not navigate higher than the home location.
currentLocation()	Define the current location when the sheet is opened.
filter()	A `FileFilter` to ignore certain files.
multipleChoices()	Allow multiple choices for files or folders.
displayMultipleChoicesInfo()	Display info of the multiple choices.
minChoices()	Set the minimum amount of choices.
maxChoices()	Set the maximum amount of choices.
onCreateFolder()	Pass a listener that is invokes when the user is allowed and intends to create a folder. Return a fitting name through the callback variable.

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

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:color:
   
    '
   
}

Usage

For the default color sheet use it as following:

// Use color } } ">

ColorSheet().show(context) {
  title("Background color")
  onPositive { color ->
    // Use color
  }
}

Function	Action
defaultView()	Select the default color view (Colors from templates or custom).
disableSwitchColorView()	Disable to switch between color views.
defaultColor()	Set default selected color.
colors()	Pass all colors to be displayed in the color templates view.
disableAlpha()	Disable alpha colors for custom colors.

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

dependencies {
  ...
  implementation 'com.maxkeppeler.sheets:core:
   
    '
   
}

Get started

You can find a custom sheet implementation in the sample module.

Step: Create a class and extend from the class Sheet.

class CustomSheet : Sheet() {
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

The Lottie modules gives you the ability to use a Lottie animations as cover view.

Showcase as Dialog

Showcase as BottomSheet

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
  })
  ...
}

Function	Action
playCoverAnimation()	Play the animation.
resumeCoverAnimation()	Resume the animation.
pauseCoverAnimation()	Pause the animation.
cancelCoverAnimation()	Cancel the 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 ">


   
    @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 ">


   
    true
   

   
    false
   

   
    false

Change the appearance of the title.

@color/customTitleTextColor @font/font @dimen/dimen value ">


   
    @color/customTitleTextColor
   

   
    @font/font
   

   
    @dimen/dimen
   

   
    value

Change the appearance of the content text.

@color/customContentTextColor @color/customContentTextInverseColor @font/font @dimen/dimen value ">


   
    @color/customContentTextColor
   

   
    @color/customContentTextInverseColor
   

   
    @font/font
   

   
    @dimen/dimen
   

   
    value

Change the appearance of the value texts. (e.g. the time in the TimeSheet & ClockTimeSheet or the selected date & period in the Calendarsheet.)

@color/customValueTextColor @font/font @dimen/dimen value ">


   
    @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 ">


   
    @color/customDigitTextColor
   

   
    @font/font
   

   
    @dimen/dimen
   

   
    value

Buttons

Override the appearance of the button text.

@font/font value ">


   
    @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 ">


              
               @color/customButtonColor
               

                
                 @font/font
                 

                  
                   value
                    
                    
                     12dp
                      
                      
                       cut
                        
                        
                         match_content/wrap_content

Override the appearance of the negative button.

text_button/outlined_button/button 12dp cut ">


        
         text_button/outlined_button/button
         

          
           12dp
           

            
             cut

Override the appearance of the positive button.

text_button/outlined_button/button 12dp cut ">


        
         text_button/outlined_button/button
         

          
           12dp
           

            
             cut

Override the border appearance of the outlined button.

@color/borderColor 1dp ">


      
       @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 ">


   
    8dp
   

   
    rounded
   

   
    ?sheetPrimaryColor
   

   
    ?sheetPrimaryColor
   

   
    1dp
   

   
    42dp
   

   
    4dp

OptionsSheet

Override appearance of selected options.

@color/customSelectedOptionImageColor @color/customSelectedOptionTextColor ">


   
    @color/customSelectedOptionImageColor
   

   
    @color/customSelectedOptionTextColor

Override appearance of disabled options.

@color/customDisabledOptionImageColors @color/customDisabledOptionImageColor @color/customDisabledOptionBackgColor ">


   
    @color/customDisabledOptionImageColor
   s

   
    @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 ">


   
    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 if you see or got any error.
Leave your thanks here and showcase your implementation.
Donate me a coffee.

Contribute

Open an issue to discuss what you would like to change.
Fork the Project
Create your feature branch (feature-[some-name])
Commit your changes
Push to the branch (origin feature-[some-name])
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 - Beautiful hydration tracker and reminder.
Awake - Intelligent alarms and wake-up challenges and sleep tracking to improve your daily sleep and day-time quality.
Sign for Spotify - Playlist and control widgets for Spotify content.
Buddha Quotes - 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.

Comments

Clock bottom-sheet giving wrong time

The result time is not same as of the selection in clock bottom-sheet. Also when using disableTimeline(TimeLine.PAST) in Calendar bottom-sheets the dates are still selectable
bug

opened by noyize 21
InfoSheet General Cleanup
Some minor cleanup issues I noticed:

Image Cropping: Can we get options for the image display? I think you have the image set to center crop. Sometimes I think it all depends on the image, sometimes a top crop is better than a center crop.

Lottie Display: While this is working well, I think adding an option to blow up or scale the image horizontally to fill all the space would look great. It seems like anything I pull in is stuck in the center with white side bars.

Text Color: Do we have a way to modify the title color besides the hardcoding stuff in the styles.xml? If not, this could be a great quick option to set the color dynamically

Button Boarder: Can we also get borders around the buttons at the bottom of the sheet as an option? + a color option for the boarder.

Text Font If you could also provide a Font Option to dynamically set the font for your text, that would be a another great addition.

After all this, I'll be buying you coffee :)
enhancement module: core
opened by irvine752 11
Duplicate Value Merge Error
Describe the bug

What went wrong: Execution failed for task ':app:mergeDebugResources'.

A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade Android resource compilation failed C:\Users\Maki.gradle\caches\transforms-2\files-2.1\2ccd1e7c841bb979159f85186e44dbc7\preference-1.1.1\res\values\values.xml:257:5-336:25: AAPT: error: duplicate value for resource 'attr/defaultValue' with config ''.

C:\Users\Maki\.gradle\caches\transforms-2\files-2.1\2ccd1e7c841bb979159f85186e44dbc7\preference-1.1.1\res\values\values.xml:257:5-336:25: AAPT: error: resource previously defined here.

Library Version: 2.0.0

Expected behavior Should Compile.
bug
opened by nicemak 8
InputSheet Password Validation

Just a quick thing I noticed from the Sample App (1.1.2) Once the password validation gives an ok, any updates to the input are not allowed. I also think having an active cursor would be helpful.
bug module: input

opened by irvine752 8
input bottomsheets auto dismiss need to be disable

Is your feature request related to a problem? Please describe. I'm using input bottom sheet for change password functionality. If the user entered wrong details I'm able to validate and notify to the user. but Dialog automatically dismissing. again user has to enter the details again. so disable the dismiss will help me in ordered to rectify this problem.

Describe the solution you'd like remove the functionality of dismissing. and add those functionalities to the developer.
enhancement

opened by Yabaze 8

Make Lottie animation setup code more Java friendly

                new InfoSheet().show(context, null, infoSheet -> {
                  infoSheet.title(R.string.send_item);
                  infoSheet.content(R.string.connect_bluetooth);
                  LottieAnimationView coverAnimationView = new LottieAnimationView(context);
                  coverAnimationView.setAnimation(R.raw.bluetooth);
                  infoSheet.setCoverAnimationView(coverAnimationView);
                  infoSheet.onPositive(() -> {
                    return null;
                  });
                  return null;
                });

This does not seem to work. infoSheet.withCoverLottieAnimation does not seem to exist for me.

opened by GraxCode 7

Crash when putting app into app switcher while sheet is open
Describe the bug If you swipe the app into the app switcher while a sheet is open, when you return to it, the app will crash.

Library Version: 2.1.3

To Reproduce Steps to reproduce the behavior:

Open a sheet

Swipe app into the app switcher

Return to the app

Expected behavior The user should be able to return to the app without it crashing and the sheet remain as it was.

Additional context This also occurs in the sheets sample app.

Screenshots I have attached a video of this happening in my app.

https://user-images.githubusercontent.com/74878137/110211291-e442be80-7e8d-11eb-9483-54ae8115a591.mp4
bug help wanted
opened by russellbanks 7
InfoSheet Enhancements
Describe the solution you'd like Request to add more features to the InfoSheet:

InfoSheet with Lottie Animation, and text at the bottom

InfoSheet with an image (url source or drawable) at the top, and text at the bottom.

*Url sources cover dynamic pictures, and the drawable covers icons + other static pictures
enhancement module: info module: lottie
opened by irvine752 6
Multiple Instances with Fragments

For some reason I'm getting multiple instances of the OptionSheet. For instance, if I open up FragmentX & then open up the OptionSheet, the next time I open up another instance FragmentX & open up the OptionSheet again. I will have have to deal with 2 instances of the OptionSheet.
bug help wanted

opened by irvine752 6
📖 Guest Book 👌

This guest book serves as a place to leave comments about this bottom-sheets-library. If it helped you out and you appreciate it, let me know that! :)

You can also mention & link an app, which is using it. I will mention some here.

Thanks! 😁

Inspired by nisrulz.

opened by maxkeppeler 5
ColorSheet For Jetpack Compose.
I had trying to use ColorSheet show in my jetpack compose project and I get:

@Composable fun Some() { val context = LocalContext.current ColorSheet().show(context) { onPositive { ... } } }

java.lang.IllegalStateException: Context (com.android.layoutlib.bridge.android.BridgeContext@35d6d6c2) has no window attached. at com.maxkeppeler.sheets.core.SheetFragment.show(SheetFragment.kt:338) at com.maxkeppeler.sheets.color.ColorSheet.show(ColorSheet.kt:475) at com.maxkeppeler.sheets.color.ColorSheet.show$default(ColorSheet.kt:471) at com.example.jetnote.MainKt.Latvia(Main.kt:127) at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.base/java.lang.reflect.Method.invoke(Method.java:566) at androidx.compose.ui.tooling.ComposableInvoker.invokeComposableMethod(ComposableInvoker.kt:155) at androidx.compose.ui.tooling.ComposableInvoker.invokeComposable(ComposableInvoker.kt:195) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:590) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:588) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:625) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:583) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228) at androidx.compose.ui.tooling.InspectableKt.Inspectable(Inspectable.kt:61) at androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:531) at androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:530) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228) at androidx.compose.ui.tooling.ComposeViewAdapter.WrapPreview(ComposeViewAdapter.kt:525) at androidx.compose.ui.tooling.ComposeViewAdapter.access$WrapPreview(ComposeViewAdapter.kt:124) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:583) at androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:580) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.ui.platform.ComposeView.Content(ComposeView.android.kt:402) at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:248) at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:247) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228) at androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:177) at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:123) at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:122) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228) at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt.ProvideAndroidCompositionLocals(AndroidCompositionLocals.android.kt:114) at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:157) at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:156) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228) at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:156) at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:140) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) at androidx.compose.runtime.ActualJvm_jvmKt.invokeComposable(ActualJvm.jvm.kt:74) at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3193) at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3183) at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:252) at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source) at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:3183) at androidx.compose.runtime.ComposerImpl.composeContent$runtime_release(Composer.kt:3119) at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:584) at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:811) at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:519) at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:140) at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:131) at androidx.compose.ui.platform.AndroidComposeView.setOnViewTreeOwnersAvailable(AndroidComposeView.android.kt:1015) at androidx.compose.ui.platform.WrappedComposition.setContent(Wrapper.android.kt:131) at androidx.compose.ui.platform.WrappedComposition.onStateChanged(Wrapper.android.kt:182) at androidx.lifecycle.LifecycleRegistry$ObserverWithState.dispatchEvent(LifecycleRegistry.java:360) at androidx.lifecycle.LifecycleRegistry.addObserver(LifecycleRegistry.java:202) at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:138) at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:131) at androidx.compose.ui.platform.AndroidComposeView.onAttachedToWindow(AndroidComposeView.android.kt:1102) at android.view.View.dispatchAttachedToWindow(View.java:20753) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3490) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497) at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497) at android.view.AttachInfo_Accessor.setAttachInfo(AttachInfo_Accessor.java:58) at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:370) at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:436) at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:121) at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:741) at com.android.tools.idea.rendering.RenderTask.lambda$inflate$8(RenderTask.java:897) at com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$2.run(RenderExecutor.kt:187) at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128) at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628) at java.base/java.lang.Thread.run(Thread.java:829)
bug
opened by youndon 4
CharSequence to the rescue

Is your feature request related to a problem? Please describe. I would like to bold and or do other things to the InputEditText text

Describe the solution you'd like InputEditText should accept a CharSequence instead of String

Describe alternatives you've considered The custom input route could work, but it is hard to understand how it works.

Additional context None
enhancement

opened by brh 0
StorageSheet Folder Location

I just noticed an issue when I was using the Storage Sheet. It seems to be stuck on this folder -> "/storage/emulated/0/". I can't seem to get any other folder or navigate to some other folder. I did give storage permission to the App.

I'm currently using a Samsung device with an SD Card. I was also using the sample.apk under the sample folder.
bug help wanted

opened by irvine752 1
RTL support

Is your feature request related to a problem? Please describe. well first of all thanks for quick fix on #24

Right to Left support is the feature that I think it would nice to have on this lib currently if we try using this library on languages like farsi or arabic, the position of buttons, text, horizontal recycler view, and ... are not appropriate

Describe the solution you'd like also it's easy to implement just add another copy of layout with tag (android:layoutDirection="rtl") on root layout or kotlin code (window.decorView.layoutDirection = View.LAYOUT_DIRECTION_RTL)

Additional context I think this link is super helpful https://material.io/design/usability/bidirectionality.html
enhancement

opened by mohamadjavadx 17

Releases(2.3.0)

2.3.0(Oct 1, 2022)
clock_time module was renamed to clock (ClockSheet)

time module was renamed to duration (DurationSheet)

Fix InputEditText resultListener issue where resultListener returns previous changed value when dialog is closed quickly

Add suffix and custom drawable tint to InputEditText

Internal changes

Uses now Kotlin DSL

Dependencies updates

Generate API documentation

Source code(tar.gz)
Source code(zip)
compose(Oct 24, 2022)

Compose Version is now public

https://github.com/maxkeppeler/sheets-compose-dialogs
Source code(tar.gz)
Source code(zip)
2.2.9(Jul 24, 2022)
Fix vertical alignment for a list of options

Fix time calculation for 12h time format for the listener

Use compile and target SDK 33

Source code(tar.gz)
Source code(zip)
2.2.8(May 9, 2022)
Support for dynamic drawables for negative and positive buttons

Removed unused resources

Add info header section to OptionsSheet (icon and text as in InfoSheet)

Source code(tar.gz)
Source code(zip)
2.2.7(Feb 13, 2022)
Dependencies updates

Setter for negative and positive button colors (All sheets)

Style attributes for negative and positive button colors (All sheets)

Fixed color selection and improve check button visibility in ColorSheet

Added multiple date selection option for CalendarSheet

Sync calendar date in CalendarSheet

Added min/max selection validation

Replace String with Charsequence in InfoSheet for contentText

Thanks to the contributors!
Source code(tar.gz)
Source code(zip)
2.2.6(Sep 9, 2021)
All Sheets

Added method to set NavBar color

Other fixes

InputSheet

Fixed issue where the ChangeListener was not invoked when the preselected index is the same as the clicked item

OptionsSheet

Added method to prevent default icon tint

CalendarSheet

Remove upper range limit

Fixed crash when sheet is closed very quickly after it was shown

InfoSheet

Added methods for using a custom view

ClockTimeSheet

Fixed timezone issue

Source code(tar.gz)
Source code(zip)
2.2.5(Jul 11, 2021)
All Sheets

Fixed padding for SheetStyle.DIALOG on Android 11

Added method to set visibility of negative and positive button

Added method to enable / disable drag gesture for bottom-sheets

Other fixes

Source code(tar.gz)
Source code(zip)
2.2.4(Jun 5, 2021)
CalendarSheet

New: Custom 'today' date

New: Custom selected date / custom selected date range

New: Use LocalDate or Calendar to set default dates

InputSheet

Changed: If the input is reuqired, but no label was used, the reuired "*" indicator will be added to the hint.

OptionsSheet

Added: More constructors to set up an option. Options can now just consist of texts.

Source code(tar.gz)
Source code(zip)
2.2.3(May 8, 2021)
InputSheet

New: InputCustom - Add your own type of input with your own view.

Source code(tar.gz)
Source code(zip)
2.2.2(May 6, 2021)
InputSheet

New: Inputs can now cover several columns. This allows to split input types in multiple columns. This should only be used for the same type of input due to height differences otherwise.

Source code(tar.gz)
Source code(zip)
2.2.1(May 3, 2021)
InputSheet

New: ButtonToggleGroup view (can be used instead of radio buttons or spinner)

New: Every input type can contain an additional content text

New: Every input can have an initial visibility state

New: Visibility of each input can be changed dynamically

Fixed: Text of spinner when no item is selected

Changed: content text for InputSheet removed, a InputSeparator behaves and looks the same when used at the first position.

CalendarSheet

Changed: Horizontal margin increased

General

All kind of resources as well as the view classes were renamed to match the whole library name.

German translations added and other small things...

Source code(tar.gz)
Source code(zip)
2.2.0(Apr 18, 2021)
StorageSheet (new)

The new StorageSheet allows the (single or multiple) selection of folders or files.

InputSheet

New: InputSwitch model for displaying a Switch

New: InputSeparator model for dividing the content/ inputs

Changed: Vertical paddings and margins reduced

Fix: Temp use of start icon of the TextInputLayout due to issue with 0dp width in ConstraintLayout

OptionsSheet

New: Method added to define the amount of columns

New: LongClickListener can be added to an option

New: Subtitle/caption text for options

New: Custom default color options for icon, title and subtitle of an option

ColorSheet

New: More methods to add colors

General

New: Limit the width of the sheet

New: Limit the content layout height

Fix: Positive and negative button icon color with ButtonStyle.NORMAL

Fix: String fixes

Changed: jCenter repo removed

Changed: Toolbar of sheet is not displayed if it was not setup and other small things...

Source code(tar.gz)
Source code(zip)
2.1.4(Mar 26, 2021)
Add: Custom width for dialog & bottom-sheet (Can be passed with build() or show())

Fix: Default selections of input types

Fix: Transparent background of quick action menu in a text input field

Remove restore functionality: Sheets (dialogs and bottom-sheets) do NOT recover anymore at a configuration change event. It's not possible to recover the listeners.

Source code(tar.gz)
Source code(zip)
2.1.3(Feb 18, 2021)
Update sample app to switch between sheet style (random, dialog, bottom sheet) and theme (auto, day, night)

FIx default selection issue in radio button group

Fix alignment issue when rtl is not supported

Fix time format issue

Other small fixes

Check the README.md for the implementation.
Source code(tar.gz)
Source code(zip)
2.1.0(Feb 10, 2021)

New: Cancel and close listeners added New: Methods added to set button style for negative and positive button New: Add method to allow drawable object for icon in InfoSheet Fix: Allow zero values for time picker

This library is now available through Maven Central following. https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/

Check updated README.md.

(Due to some issues from migrating from Bintray to Maven Central, please use the latest version, 2.1.2 or newer.)
Source code(tar.gz)
Source code(zip)
2.0.0(Jan 11, 2021)
Name of Library changed from bottom-sheets to just sheets to reflect use cases

New: Sheets can dynamically displays as dialogs or bottom sheets (SheetStyle)

New: Cover Image (uses coil)

New: Module "Lottie" to support Lottie animations in the cover image view!

New: Different TopStyles - TOP, BOTTOM, MIXED (above cover/ below cover/ mixed with cover)

New: Sheets maintain their state now at configuration changes

General: Layout and bug fixes

Source code(tar.gz)
Source code(zip)
1.1.2(Jan 3, 2021)
All: Maintain state after configuration changes

Fixes a bug with the default time of the ClockTimeSheet

Fixes the wrong behavior where adding colors to the ColorSheet doesn't replace those with the default colors

Other minor fixes

Source code(tar.gz)
Source code(zip)
1.1.1(Jan 2, 2021)
ColorSheet: Fixes a bug which kept displaying the bottom sheet type icon

All: Fixes a bug where the button is still clickable, even if not displayed

Source code(tar.gz)
Source code(zip)
1.1.0(Dec 30, 2020)
All: Support for handle design

All: Support for icon buttons in the bottom sheet toolbar (up to 3)

All: Support for outlined button, text button and default button

All: Support for icons for buttons

All: Support for icon buttons in the bottom sheet toolbar

All: A lot more attrs to control appearance in style for components e. g. handle, text input, ...

All: Support PreferenceFragmentCompat for custom show() method

InputSheet: InputEditText: Support custom validation

InputSheet: InputEditText: Use official material TextInputLayout view

ClockTimeSheet: Fix wrong time bug

ClockTimeSheet: Return result time in milliseconds, hours and minutes

General: Increase divider opacity

General: More components added, that can be used for custom bottom sheet implementations

General: README updated to reflect all changes

General: Some functions have been changed or renamed, check the README.

General: Donate options added for the library, if you want to donate something for my work. 😁

Source code(tar.gz)
Source code(zip)
1.0.6(Dec 18, 2020)
General

CalendarSheet: Fix disabled days of a timeline (past or future) still being selectable

CalendarSheet: Fix in and out day style which previously led to glitches

CalendarSheet: Disabled days of a timeline are still displayed for the current month, with an equal design as specific disabled dates.

ClockTimeSheet: Disabled keys issue fixed

ClockTimeSheet: Fix bug which leads to invalid time if user switches between indices multiple times

Some methods for Input types renamed

OptionsSheet: Options don't require a drawable anymore, you can just display a list of texts. (I recommend an icon though.)

OptionsSheet: Throws exception in single choice mode if an item is already selected and disabled - therefore can't be changed.

General cleanup, documentation added etc.

New style attrs:

Custom style attr for disabled text color bottomSheetOptionDisabledTextColor

Custom style attr for disabled image color bottomSheetOptionDisabledImageColor

Custom style attr for disabled background color bottomSheetOptionDisabledBackgroundColor

Changed attrs:

bottomSheetOptionActiveTextColor to bottomSheetOptionSelectedTextColor

bottomSheetOptionActiveImageColor to bottomSheetOptionSelectedImageColor

Source code(tar.gz)
Source code(zip)
1.0.5(Dec 14, 2020)
Fixes missing repo JitPack issue

Removes feature dataBinding, which lead to issues when implementing the core module.

Fixes color issue in CalendarView in night mode

Modified packagingOptions to exclude 'META-INF/core.kotlin_module'

Source code(tar.gz)
Source code(zip)
1.0.4(Dec 13, 2020)
Fixes a problem with the TimeSheet

Adds more TimeFormat options (hh, mm)

Fixes regarding disabled keys for the 24h and 12h format with the ClockSheet

Source code(tar.gz)
Source code(zip)
1.0.3(Dec 12, 2020)
NumericalInput is now a custom view and be a reused in your custom bottom sheet

Highlight color is now by default generated based on the colorPrimary / bottomSheetPrimaryColor

Fixes regarding the ripple colors and selected color in the OptionsSheet

Corner radius and family attrs added to set for all bottom sheets

Reduce corner radius in background ripple

Simplified access to hierarchical attr values for frequently used color attrs (e.g. primaryColor)

Fixes typos and formatting issues and general cleanups

Source code(tar.gz)
Source code(zip)
1.0.2(Dec 9, 2020)
Restructuring hierarchy, reduce views

Various Bug fixes

Improvements to easily make a custom bottom sheet while using library's components

Strings added and translated into German

Source code(tar.gz)
Source code(zip)
1.0.1(Dec 6, 2020)
Fixes bugs leading to crashes when building InputSheet

Fixes bug that prevents collapsing items in the OptionsSheet for the horizontal and vertical expanded grid

Source code(tar.gz)
Source code(zip)
1.0.0(Dec 6, 2020)

Initial release with the modules core, time, time-clock, calendar, info, color, input and options.
Source code(tar.gz)
Source code(zip)

Sleek dialogs and bottom-sheets for quick use in your app

Related tags

Overview

Sheets

Table of Contents

Get started

Info

Usage

Options

Usage

Clock Time

Usage

Time

Usage

Input

Usage

Calendar

Usage

Storage

Usage

Color

Usage

Custom

Get started

Components

Lottie

Usage

Appearance

Base

Buttons

Handle

OptionsSheet

InputSheet

Misc

Support this project

Contribute

Donate

Showcase

License

Comments

Releases(2.3.0)

2.3.0(Oct 1, 2022)

Internal changes

compose(Oct 24, 2022)

Compose Version is now public

2.2.9(Jul 24, 2022)

2.2.8(May 9, 2022)

2.2.7(Feb 13, 2022)

2.2.6(Sep 9, 2021)

All Sheets

InputSheet

OptionsSheet

CalendarSheet

InfoSheet

ClockTimeSheet

2.2.5(Jul 11, 2021)

All Sheets

2.2.4(Jun 5, 2021)

CalendarSheet

InputSheet

OptionsSheet

2.2.3(May 8, 2021)

InputSheet

2.2.2(May 6, 2021)

InputSheet

2.2.1(May 3, 2021)

InputSheet

CalendarSheet

General

2.2.0(Apr 18, 2021)

StorageSheet (new)

InputSheet

OptionsSheet

ColorSheet

General

2.1.4(Mar 26, 2021)

2.1.3(Feb 18, 2021)

2.1.0(Feb 10, 2021)

2.0.0(Jan 11, 2021)

1.1.2(Jan 3, 2021)