Add overflow indicator and overflow menu items in ButtonGroup
This commit is contained in:
Nishant Mishra
@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.widthIn
|
||||
import androidx.compose.material3.ButtonGroup
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.CircularWavyProgressIndicator
|
||||
import androidx.compose.material3.DropdownMenuItem
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
|
||||
import androidx.compose.material3.FilledIconToggleButton
|
||||
@@ -48,6 +49,7 @@ import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Devices
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
@@ -228,30 +230,29 @@ fun TimerScreen(
|
||||
}
|
||||
val interactionSources = remember { List(2) { MutableInteractionSource() } }
|
||||
ButtonGroup(
|
||||
overflowIndicator = {},
|
||||
overflowIndicator = { state ->
|
||||
FilledTonalIconButton(
|
||||
onClick = {
|
||||
if (state.isExpanded) {
|
||||
state.dismiss()
|
||||
} else {
|
||||
state.show()
|
||||
}
|
||||
},
|
||||
colors = IconButtonDefaults.filledTonalIconButtonColors(
|
||||
containerColor = colorContainer
|
||||
),
|
||||
shapes = IconButtonDefaults.shapes(),
|
||||
modifier = Modifier.size(64.dp, 96.dp)
|
||||
) {
|
||||
Icon(
|
||||
painterResource(R.drawable.more_vert_large),
|
||||
contentDescription = "More"
|
||||
)
|
||||
}
|
||||
},
|
||||
modifier = Modifier.padding(16.dp)
|
||||
) {
|
||||
customItem(
|
||||
{
|
||||
FilledTonalIconButton(
|
||||
onClick = resetTimer,
|
||||
colors = IconButtonDefaults.filledTonalIconButtonColors(
|
||||
containerColor = colorContainer
|
||||
),
|
||||
shapes = IconButtonDefaults.shapes(),
|
||||
interactionSource = interactionSources[0],
|
||||
modifier = Modifier
|
||||
.size(96.dp)
|
||||
.animateWidth(interactionSources[0])
|
||||
) {
|
||||
Icon(
|
||||
painterResource(R.drawable.restart_large),
|
||||
contentDescription = "Restart"
|
||||
)
|
||||
}
|
||||
},
|
||||
{}
|
||||
)
|
||||
customItem(
|
||||
{
|
||||
FilledIconToggleButton(
|
||||
@@ -270,17 +271,76 @@ fun TimerScreen(
|
||||
if (uiState.timerRunning) {
|
||||
Icon(
|
||||
painterResource(R.drawable.pause_large),
|
||||
contentDescription = "Pause"
|
||||
contentDescription = "Pause",
|
||||
modifier = Modifier.size(32.dp)
|
||||
)
|
||||
} else {
|
||||
Icon(
|
||||
painterResource(R.drawable.play_large),
|
||||
contentDescription = "Play"
|
||||
contentDescription = "Play",
|
||||
modifier = Modifier.size(32.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{}
|
||||
{ state ->
|
||||
DropdownMenuItem(
|
||||
leadingIcon = {
|
||||
if (uiState.timerRunning) {
|
||||
Icon(
|
||||
painterResource(R.drawable.pause),
|
||||
contentDescription = "Pause"
|
||||
)
|
||||
} else {
|
||||
Icon(
|
||||
painterResource(R.drawable.play),
|
||||
contentDescription = "Play"
|
||||
)
|
||||
}
|
||||
},
|
||||
text = { Text(if (uiState.timerRunning) "Pause" else "Play") },
|
||||
onClick = {
|
||||
toggleTimer()
|
||||
state.dismiss()
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
customItem(
|
||||
{
|
||||
FilledTonalIconButton(
|
||||
onClick = resetTimer,
|
||||
colors = IconButtonDefaults.filledTonalIconButtonColors(
|
||||
containerColor = colorContainer
|
||||
),
|
||||
shapes = IconButtonDefaults.shapes(),
|
||||
interactionSource = interactionSources[0],
|
||||
modifier = Modifier
|
||||
.size(96.dp)
|
||||
.animateWidth(interactionSources[0])
|
||||
) {
|
||||
Icon(
|
||||
painterResource(R.drawable.restart_large),
|
||||
contentDescription = "Restart",
|
||||
modifier = Modifier.size(32.dp)
|
||||
)
|
||||
}
|
||||
},
|
||||
{ state ->
|
||||
DropdownMenuItem(
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
painterResource(R.drawable.restart),
|
||||
"Restart"
|
||||
)
|
||||
},
|
||||
text = { Text("Restart") },
|
||||
onClick = {
|
||||
resetTimer()
|
||||
state.dismiss()
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -313,16 +373,16 @@ fun TimerScreen(
|
||||
}
|
||||
|
||||
@Preview(
|
||||
widthDp = 384,
|
||||
heightDp = 832,
|
||||
showSystemUi = true
|
||||
showSystemUi = true,
|
||||
device = Devices.PIXEL_9_PRO,
|
||||
// widthDp = 200
|
||||
)
|
||||
@Composable
|
||||
fun TimerScreenPreview() {
|
||||
val uiState = UiState(
|
||||
timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.SHORT_BREAK
|
||||
timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.FOCUS, timerRunning = true
|
||||
)
|
||||
TomatoTheme {
|
||||
TimerScreen(uiState, false,{ 0.3f }, {}, {})
|
||||
TimerScreen(uiState, false, { 0.3f }, {}, {})
|
||||
}
|
||||
}
|
||||
|
||||
13
app/src/main/res/drawable/more_vert_large.xml
Normal file
13
app/src/main/res/drawable/more_vert_large.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="40dp"
|
||||
android:height="40dp"
|
||||
android:autoMirrored="true"
|
||||
android:tint="#000000"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960">
|
||||
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M479.8,833.33q-28.13,0 -47.97,-20.03Q412,793.27 412,765.13q0,-28.13 20.03,-47.96 20.04,-19.84 48.17,-19.84 28.13,0 47.97,20.04Q548,737.4 548,765.53q0,28.14 -20.03,47.97 -20.04,19.83 -48.17,19.83ZM479.8,548q-28.13,0 -47.97,-20.03Q412,507.93 412,479.8q0,-28.13 20.03,-47.97Q452.07,412 480.2,412q28.13,0 47.97,20.03Q548,452.07 548,480.2q0,28.13 -20.03,47.97Q507.93,548 479.8,548ZM479.8,262.67q-28.13,0 -47.97,-20.04Q412,222.6 412,194.47q0,-28.14 20.03,-47.97 20.04,-19.83 48.17,-19.83 28.13,0 47.97,20.03Q548,166.73 548,194.87q0,28.13 -20.03,47.96 -20.04,19.84 -48.17,19.84Z" />
|
||||
|
||||
</vector>
|
||||
13
app/src/main/res/drawable/pause.xml
Normal file
13
app/src/main/res/drawable/pause.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:autoMirrored="true"
|
||||
android:tint="#000000"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960">
|
||||
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M640,760q-33,0 -56.5,-23.5T560,680v-400q0,-33 23.5,-56.5T640,200q33,0 56.5,23.5T720,280v400q0,33 -23.5,56.5T640,760ZM320,760q-33,0 -56.5,-23.5T240,680v-400q0,-33 23.5,-56.5T320,200q33,0 56.5,23.5T400,280v400q0,33 -23.5,56.5T320,760Z" />
|
||||
|
||||
</vector>
|
||||
13
app/src/main/res/drawable/play.xml
Normal file
13
app/src/main/res/drawable/play.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:autoMirrored="true"
|
||||
android:tint="#000000"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960">
|
||||
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M320,687v-414q0,-17 12,-28.5t28,-11.5q5,0 10.5,1.5T381,239l326,207q9,6 13.5,15t4.5,19q0,10 -4.5,19T707,514L381,721q-5,3 -10.5,4.5T360,727q-16,0 -28,-11.5T320,687Z" />
|
||||
|
||||
</vector>
|
||||
13
app/src/main/res/drawable/restart.xml
Normal file
13
app/src/main/res/drawable/restart.xml
Normal file
@@ -0,0 +1,13 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:autoMirrored="true"
|
||||
android:tint="#000000"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960">
|
||||
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M393,828q-103,-29 -168,-113.5T160,520q0,-57 19,-108.5t54,-94.5q11,-12 27,-12.5t29,12.5q11,11 11.5,27T290,374q-24,31 -37,68t-13,78q0,81 47.5,144.5T410,751q13,4 21.5,15t8.5,24q0,20 -14,31.5t-33,6.5ZM567,828q-19,5 -33,-7t-14,-32q0,-12 8.5,-23t21.5,-15q75,-24 122.5,-87T720,520q0,-100 -70,-170t-170,-70h-3l16,16q11,11 11,28t-11,28q-11,11 -28,11t-28,-11l-84,-84q-6,-6 -8.5,-13t-2.5,-15q0,-8 2.5,-15t8.5,-13l84,-84q11,-11 28,-11t28,11q11,11 11,28t-11,28l-16,16h3q134,0 227,93t93,227q0,109 -65,194T567,828Z" />
|
||||
|
||||
</vector>
|
||||
Reference in New Issue
Block a user