/SpeedDialFloatingActionButton

Jetpack Compose SpeedDial / Multi Selection - FloatingActionButton (FAB) (Material 2 + 3)

Primary LanguageKotlinApache License 2.0Apache-2.0

SpeedDialFloatingActionButton

Current Compose Version: 1.3.1

Compose MultiSelection / SpeedDial - FloatingActionButton

Usable docked in BottomAppBar

Lint Ktlint

CodeFactor Maven Central Maven Central

How to use it?

Material 3

Add actual SpeedDialFloatingActionButton for Material 3 BottomAppBar library:

dependencies {
    implementation 'de.charlex.compose:speeddial-bottomappbar-material3:1.1.1'
}
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

BottomAppBarSpeedDialFloatingActionButton demonstration

Material 2

Add to your project

Add actual SpeedDialFloatingActionButton library:

dependencies {
    implementation 'de.charlex.compose:speeddial:1.1.1'
}

Use it instead of a normal FloatingActionButton

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

SpeedDialFloatingActionButton demonstration

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.