Tired of the same old, generic bottom sheets that stifle your innovative Compose app? Enter Gleam, the modern and customizable bottom sheet library designed to empower your creativity and elevate your user experience.
Here's why Gleam should be your go-to choice:
๐จ Modern & Customizable:
- Design stunning bottom sheets that seamlessly match your app's aesthetic with Gleam's wide range of customization options. Say goodbye to generic, cookie-cutter designs!
- Shape, color, elevation, animations, and more are all easily configurable to create a unique and immersive user experience.
๐ Effortless Integration:
- Integrate Gleam into your Compose codebase in a snap. No complex setups or boilerplate code. Just focus on building amazing features!
- Gleam plays nicely with other Compose components and tools, making it the perfect addition to your existing workflow.
๐ Powerful & Flexible:
- Handle long lists of actions, detailed information with icons, or confirmations confidently with Gleam's ability to adapt to various content types.
- Whether you need a simple confirmation dialog or a complex configuration sheet, Gleam has you covered.
๐คนโโ๏ธ Easy Interaction:
- Enable user interaction with intuitive gestures and actions for a more engaging and delightful experience.
- Make your bottom sheets interactive and responsive, adding a dynamic touch to your app.
โจ Polished & Refined:
- Ensure a smooth and seamless user experience with Gleam's polished animations and intuitive interactions.
- Gleam takes care of the details so you can focus on delivering top-notch value to your users.
Description:
Gleam brings beautiful, interactive bottom sheets to your Kotlin Compose app. Design with ease, seamlessly integrate, and elevate your user experience.
Add the dependency below into your module's build.gradle
file:
dependencies {
implementation "dev.teogor.gleam:gleam:1.0.0-alpha01"
}
For comprehensive details about Gleam, please refer to the complete documentation available here.
This section provides a step-by-step guide to using Gleam
in your Compose app:
1. Create a State Variable:
var showGleam by remember { mutableStateOf(false) }
This state variable controls the visibility of the Gleam bottom sheet. Initially, it's set
to false
, keeping the sheet hidden.
2. Render the Button:
Button(
modifier = Modifier.fillMaxWidth(), // Fill the available width
onClick = { showGleam = true },
) {
Text(text = "Show Gleam")
}
This creates a button with the text "Show Gleam". When clicked, it sets showGleam
to true
,
triggering the bottom sheet to appear. You can customize the button's appearance and position as
needed.
3. Conditionally Render Gleam:
if (showGleam) {
Gleam(
onDismissRequest = { showGleam = false }, // Hide sheet on dismissal
windowInsets = WindowInsets.none, // Remove default insets
properties = GleamDefaults.properties(
// Customize appearance
animateCorners = true,
animateHorizontalEdge = true,
maxHorizontalEdge = 14.dp,
),
) {
// Your bottom sheet content goes here
Text(text = "This is the Gleam content!")
Button(
onClick = { // Add an action button
showGleam = false // Hide sheet on action
// Perform other actions here
},
) {
Text(text = "Perform Action")
}
}
}
This part is crucial:
- The
if
block ensures the Gleam sheet only renders whenshowGleam
istrue
. - The
Gleam
composable configures the sheet's behavior and appearance:onDismissRequest
: Hides the sheet when the user swipes down or taps outside.windowInsets
: Adjusts padding based on system elements.properties
: Defines customization options like animation and corner radius.
- The content inside the
{}
block defines what appears inside the sheet. For this example, a text message and an action button are included.
View implementation in demo
This section provides a step-by-step guide to using GleamScaffold
in your Compose app:
1. Create State Variable:
var showGleam by remember { mutableStateOf(false) }
This state variable controls the visibility of the Gleam bottom sheet. Initially, it's set
to false
, keeping the sheet hidden.
2. Implement GleamScaffold:
GleamScaffold(
isVisible = showGleam,
gleamContent = {
// Your Gleam sheet content here
Column(modifier = Modifier.padding(16.dp)) {
Text("This is the Gleam content!")
Button(
onClick = { showGleam = false },
modifier = Modifier.align(Alignment.CenterHorizontally)
) {
Text("Close")
}
}
},
) {
// Your main app content (repeated for clarity)
Text("This is the main app content")
Button(
onClick = { showGleam = true },
modifier = Modifier.fillMaxWidth()
) {
Text("Show Gleam")
}
}
Wrap your main app content with GleamScaffold
Key Points:
GleamScaffold
simplifies sheet creation and management.- Consistent structure reduces boilerplate code.
- Customizable appearance enhances app design.
By following these steps and adapting them to your specific needs, you can effectively
use GleamScaffold
to create engaging and well-designed bottom sheets in your Compose apps.
Note
Ensure you have added the dev.teogor.gleam:gleam-navigation
dependency
This guide will walk you through integrating GleamScaffold with navigation using
the GleamScaffold
composable:
1. Initialize GleamNavigator:
Use rememberGleamNavigator
to create a navigation manager and associate it with the current
composition:
val navigator = rememberGleamNavigator()
2. Connect GleamNavigator to NavController (Required):
If you use a separate compose navigation controller (NavController
), link it to
the GleamNavigator
:
val navController = rememberNavController()
navigator.provideNavController(navController)
3. Use GleamScaffold:
Wrap your app's content with GleamScaffold
, providing the navigator
and configuring other
desired options:
GleamScaffold(
navigator = navigator, // Connect the initialized navigator
modifier = Modifier.fillMaxSize(), // Optional modifiers
shape = sheetShape, // Customize sheet shape (optional)
containerColor = sheetBackgroundColor, // Set sheet background color (optional)
windowInsets = WindowInsets.navigationBars, // Optional insets adjustment
properties = GleamDefaults.properties(
// Customize sheet behavior (optional)
animateCorners = true,
animateHorizontalEdge = true,
maxHorizontalEdge = 14.dp,
),
content = content, // Your main app content goes here
)
Purpose:
- Represents the actual bottom sheet content that slides up from the screen.
- Offers an alternative to inline menus or simple dialogs for mobile apps.
Parameters:
onDismissRequest
: Called when the user dismisses theGleam
by clicking outside.modifier
: Optional modifiers for theGleam
.gleamState
: The state object managing theGleam
's visibility and animation (usuallyrememberGleamState()
).gleamMaxWidth
: Maximum width of theGleam
inDp
(useDp.Unspecified
for full width).shape
: Defines the shape of theGleam
's container (e.g., rounded corners).containerColor
: The background color of theGleam
container.contentColor
: Preferred color for content inside theGleam
(defaults based oncontainerColor
).tonalElevation
: The shadow level of theGleam
(inDp
).scrimColor
: The color of the overlay behind theGleam
when open.dragHandle
: Optional composable for a visual swipe handle.windowInsets
: Insets for proper layout and positioning.properties
: Additional customization options throughGleamProperties
.content
: The content displayed inside theGleam
, defined as a composable function.
Purpose:
- Displays a
Gleam
modal window that slides up from the bottom of the screen. - Suitable for presenting long action lists, detailed information with icons, or confirmations.
- Temporarily disables other app content and remains visible until dismissed or an action is taken.
Parameters:
gleamContent
: The content displayed inside theGleam
, defined as a composable function.isVisible
: Boolean, determines if theGleam
is visible (true
) or hidden (false
).modifier
: Optional modifiers to apply to theGleam
.gleamState
: The state object managing theGleam
's visibility and animation (usuallyrememberGleamState()
).gleamMaxWidth
: Maximum width of theGleam
inDp
(useDp.Unspecified
for full width).shape
: Defines the shape of theGleam
's container (e.g., rounded corners).containerColor
: The background color of theGleam
container.contentColor
: Preferred color for content inside theGleam
(defaults based oncontainerColor
).tonalElevation
: The shadow level of theGleam
(inDp
).scrimColor
: The color of the overlay behind theGleam
when open.dragHandle
: Optional composable for a visual swipe handle.windowInsets
: Insets for proper layout and positioning.properties
: Additional customization options throughGleamProperties
.content
: The content displayed beneath theGleam
.
- Support it by joining stargazers for this repository. ๐
- Get notified about my new projects by following me on GitHub. ๐ป
- Interested in sponsoring me? Support me on GitHub! ๐ค
Designed and developed by 2024 teogor (Teodor Grigor)
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.