FAB long press

# compose-android

[pabloscloud]

Hi! I wanted to create a FAB with two action. One for clicking one for longPress, but it doesn't catch the longPress action. Any idea how I could call a function whenever a FAB is long pressed?

[pabloscloud]

package cloud.pablos.overload.ui.tabs.home

import android.os.Build
import androidx.annotation.RequiresApi
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.School
import androidx.compose.material.icons.filled.Work
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import cloud.pablos.overload.R
import cloud.pablos.overload.data.item.ItemEvent
import cloud.pablos.overload.data.item.ItemState
import cloud.pablos.overload.ui.views.extractDate
import cloud.pablos.overload.ui.views.parseToLocalDateTime
import java.time.LocalDate
import java.time.LocalDateTime

OptIn(ExperimentalFoundationApi::class)
RequiresApi(Build.VERSION_CODES.O)
Composable
fun HomeTabFab(
    state: ItemState,
    onEvent: (ItemEvent) -> Unit,
) {
    var expanded by remember { mutableStateOf(false) }
    val date = LocalDate.now()

    val itemsForToday = state.items.filter { item ->
        val startTime = parseToLocalDateTime(item.startTime)
        extractDate(startTime) == date
    }

    Column(
        modifier = Modifier.padding(10.dp),
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.spacedBy(5.dp),
    ) {
        if (expanded) {
            FloatingActionButton(
                onClick = {
                    expanded = false
                },
                containerColor = MaterialTheme.colorScheme.secondary,
                contentColor = MaterialTheme.colorScheme.onSecondary,
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(8.dp),
                ) {
                    Icon(
                        imageVector = Icons.Default.Work,
                        contentDescription = "work",
                    )
                    Text(
                        text = "Work",
                        modifier = Modifier.padding(8.dp, 0.dp, 8.dp, 0.dp),
                    )
                }
            }

            FloatingActionButton(
                onClick = {
                    expanded = false
                },
                containerColor = MaterialTheme.colorScheme.secondary,
                contentColor = MaterialTheme.colorScheme.onSecondary,
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(8.dp),
                ) {
                    Icon(
                        imageVector = Icons.Default.School,
                        contentDescription = "school",
                    )
                    Text(
                        text = "School",
                        modifier = Modifier.padding(8.dp, 0.dp, 8.dp, 0.dp),
                    )
                }
            }
        }

        Box {
            FloatingActionButton(
                onClick = {
                    val isFirst = itemsForToday.isEmpty()
                    val isNotOngoing = itemsForToday.isEmpty() || state.items.last().ongoing

                    if (isFirst) {
                        onEvent(ItemEvent.SetStart(start = LocalDateTime.now().toString()))
                        onEvent(ItemEvent.SetOngoing(ongoing = true))
                        onEvent(ItemEvent.SetPause(pause = false))
                        onEvent(ItemEvent.SaveItem)

                        onEvent(ItemEvent.SetIsOngoing(isOngoing = true))
                    } else if (isNotOngoing) {
                        onEvent(ItemEvent.SetStart(start = itemsForToday.last().endTime))
                        onEvent(ItemEvent.SetEnd(end = LocalDateTime.now().toString()))
                        onEvent(ItemEvent.SetOngoing(ongoing = false))
                        onEvent(ItemEvent.SetPause(pause = true))
                        onEvent(ItemEvent.SaveItem)

                        onEvent(ItemEvent.SetStart(start = LocalDateTime.now().toString()))
                        onEvent(ItemEvent.SetOngoing(ongoing = true))
                        onEvent(ItemEvent.SetPause(pause = false))
                        onEvent(ItemEvent.SaveItem)

                        onEvent(ItemEvent.SetIsOngoing(isOngoing = true))
                    } else {
                        onEvent(ItemEvent.SetId(id = itemsForToday.last().id))
                        onEvent(ItemEvent.SetStart(start = itemsForToday.last().startTime))
                        onEvent(ItemEvent.SetEnd(end = LocalDateTime.now().toString()))
                        onEvent(ItemEvent.SetOngoing(ongoing = false))
                        onEvent(ItemEvent.SaveItem)

                        onEvent(ItemEvent.SetIsOngoing(isOngoing = false))
                    }
                },
                modifier = Modifier.pointerInput(Unit) {
                    detectTapGestures(
                        onLongPress = {
                            expanded = expanded
                        },
                    )
                },
                containerColor = MaterialTheme.colorScheme.secondaryContainer,
                contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
            ) {
                if (expanded) {
                    Icon(
                        imageVector = Icons.Default.Close,
                        contentDescription = "Close",
                        tint = MaterialTheme.colorScheme.onSecondaryContainer,
                    )
                } else {
                    val isOngoing = itemsForToday.isNotEmpty() && itemsForToday.last().ongoing

                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Icon(
                            imageVector =
                            if (isOngoing) {
                                Icons.Default.Pause
                            } else {
                                Icons.Default.PlayArrow
                            },
                            contentDescription = stringResource(id = R.string.edit),
                            modifier = Modifier.padding(8.dp, 0.dp, 0.dp, 0.dp),

                        )
                        Text(
                            text =
                            if (isOngoing) {
                                stringResource(id = R.string.pause).replaceFirstChar { it.uppercase() }
                            } else {
                                stringResource(id = R.string.start).replaceFirstChar { it.uppercase() }
                            },
                            modifier = Modifier.padding(8.dp, 0.dp, 8.dp, 0.dp),
                        )
                    }
                }
            }
        }
    }
}

[Jetbrains Ttvna]

Couldn't figure that out yet. Do I need to create my own button layout or does this work with a fab?

[Jetbrains Ttvna]

Still, I didn't find a way to do this