https://github.com/ch4rl3x/speeddialfloatingactionbutton
Jetpack Compose SpeedDial / Multi Selection - FloatingActionButton (FAB) (Material 2 + 3)
https://github.com/ch4rl3x/speeddialfloatingactionbutton
android android-library floating-action-button floatingactionbutton jetpack-compose jetpackcompose material material3 speeddial
Last synced: about 1 month ago
JSON representation
Jetpack Compose SpeedDial / Multi Selection - FloatingActionButton (FAB) (Material 2 + 3)
- Host: GitHub
- URL: https://github.com/ch4rl3x/speeddialfloatingactionbutton
- Owner: ch4rl3x
- License: apache-2.0
- Created: 2021-04-05T12:09:49.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-30T09:16:21.000Z (11 months ago)
- Last Synced: 2025-03-30T10:23:23.988Z (11 months ago)
- Topics: android, android-library, floating-action-button, floatingactionbutton, jetpack-compose, jetpackcompose, material, material3, speeddial
- Language: Kotlin
- Homepage:
- Size: 812 KB
- Stars: 34
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SpeedDialFloatingActionButton
## Current Compose Version: 1.3.1
Compose MultiSelection / SpeedDial - FloatingActionButton
Usable docked in BottomAppBar
# How to use it?
## Material 3
Add actual SpeedDialFloatingActionButton for Material 3 BottomAppBar library:
```groovy
dependencies {
implementation 'de.charlex.compose:speeddial-bottomappbar-material3:1.1.1'
}
```
```kotlin
val fabState = rememberSpeedDialFloatingActionButtonState()
Scaffold(
bottomBar = {
BottomAppBar(
...
floatingActionButton = {
BottomAppBarSpeedDialFloatinActionButton(
state = fabState
) {
Icon(Icons.Default.Add, contentDescription = null)
}
}
...
)
},
floatingActionButton = {
SubSpeedDialFloatingActionButtons(
state = fabState,
items = listOf(
FloatingActionButtonItem(
icon = Icons.Default.Person,
label = "Person"
) {
//TODO onClick
},
FloatingActionButtonItem(
icon = Icons.Default.Home,
label = "Home"
) {
//TODO onClick
}
)
)
}
) {
//Content
}
```
### Docked in BottomAppBar with labels
## Material 2
### Add to your project
Add actual SpeedDialFloatingActionButton library:
```groovy
dependencies {
implementation 'de.charlex.compose:speeddial:1.1.1'
}
```
Use it instead of a normal FloatingActionButton
```kotlin
SpeedDialFloatingActionButton(
modifier = Modifier,
initialExpanded = false,
animationDuration = 300,
animationDelayPerSelection = 100,
showLabels = true,
fabBackgroundColor = MaterialTheme.colors.secondary,
fabContentColor = contentColorFor(fabBackgroundColor),
speedDialBackgroundColor = MaterialTheme.colors.secondaryVariant,
speedDialContentColor = contentColorFor(speedDialBackgroundColor),
speedDialData = listOf(
SpeedDialData(
label = "Test 1",
painter = painterResource(id = R.drawable.ic_add_white_24dp)
) {
//TODO onClick
},
SpeedDialData(
label = "Test 2",
painter = painterResource(id = R.drawable.ic_add_white_24dp)
) {
//TODO onClick
},
SpeedDialData(
label = "Test 3",
painterResource = R.drawable.ic_add_white_24dp
) {
//TODO onClick
},
SpeedDialData(
label = "Test 4",
painterResource = R.drawable.ic_add_white_24dp
) {
//TODO onClick
}
)
)
```
### Docked in BottomAppBar with labels
That's it!
License
--------
Copyright 2020 Alexander Karkossa
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.