Jetpack Compose - Floating action button

A floating action button (FAB) represents the primary action of a screen.

  • Floating Action Button,
  • Small Floating Action Button,
  • Large Floating Action Button,
  • Extended Floating Action Button


package io.material.compose.ui.design

import androidx.compose.foundation.layout.size
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FloatingActionButtonSample() {
FloatingActionButton(
onClick = { /* do something */ },
) {
Icon(Icons.Filled.Add, "Localized description")
}
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SmallFloatingActionButtonSample() {
SmallFloatingActionButton(
onClick = { /* do something */ },
) {
Icon(Icons.Filled.Add, contentDescription = "Localized description")
}
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun LargeFloatingActionButtonSample() {
LargeFloatingActionButton(
onClick = { /* do something */ },
) {
Icon(
Icons.Filled.Add,
contentDescription = "Localized description",
modifier = Modifier.size(FloatingActionButtonDefaults.LargeIconSize),
)
}
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ExtendedFloatingActionButtonSample() {
ExtendedFloatingActionButton(
onClick = { /* do something */ },
icon = { Icon(Icons.Filled.Add, "Localized description") },
text = { Text(text = "Extended FAB") },
)
}


..

Comments