Implement edge-to-edge

This commit is contained in:
John Shea 2023-10-31 17:00:20 -04:00
parent 5f8ed6f1b9
commit e6d5c7a69b
4 changed files with 53 additions and 46 deletions

View File

@ -18,13 +18,13 @@ package com.example.cupcake
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.core.view.WindowCompat
import androidx.activity.enableEdgeToEdge
import com.example.cupcake.ui.theme.CupcakeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
enableEdgeToEdge()
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
CupcakeTheme {
CupcakeApp()

View File

@ -39,6 +39,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.example.cupcake.R
import com.example.cupcake.ui.components.FormattedPriceLabel
import com.example.cupcake.ui.theme.CupcakeTheme
/**
* Composable that displays the list of items as [RadioButton] options,
@ -52,14 +53,14 @@ fun SelectOptionScreen(
options: List<String>,
onSelectionChanged: (String) -> Unit = {},
modifier: Modifier = Modifier
){
) {
var selectedValue by rememberSaveable { mutableStateOf("") }
Column(
modifier = modifier,
verticalArrangement = Arrangement.SpaceBetween
) {
Column(modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium))){
Column(modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium))) {
options.forEach { item ->
Row(
modifier = Modifier.selectable(
@ -70,7 +71,7 @@ fun SelectOptionScreen(
}
),
verticalAlignment = Alignment.CenterVertically
){
) {
RadioButton(
selected = selectedValue == item,
onClick = {
@ -98,12 +99,14 @@ fun SelectOptionScreen(
Row(
modifier = Modifier
.fillMaxWidth()
.padding(dimensionResource(R.dimen.padding_medium))
.weight(1f, false),
.padding(dimensionResource(R.dimen.padding_medium)),
horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)),
verticalAlignment = Alignment.Bottom
){
OutlinedButton(modifier = Modifier.weight(1f), onClick = {}) {
) {
OutlinedButton(
modifier = Modifier.weight(1f),
onClick = {}
) {
Text(stringResource(R.string.cancel))
}
Button(
@ -116,15 +119,16 @@ fun SelectOptionScreen(
}
}
}
}
@Preview
@Composable
fun SelectOptionPreview(){
SelectOptionScreen(
subtotal = "299.99",
options = listOf("Option 1", "Option 2", "Option 3", "Option 4"),
modifier = Modifier.fillMaxHeight()
)
fun SelectOptionPreview() {
CupcakeTheme {
SelectOptionScreen(
subtotal = "299.99",
options = listOf("Option 1", "Option 2", "Option 3", "Option 4"),
modifier = Modifier.fillMaxHeight()
)
}
}

View File

@ -19,7 +19,6 @@ import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
@ -40,6 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.cupcake.R
import com.example.cupcake.data.DataSource
import com.example.cupcake.ui.theme.CupcakeTheme
/**
* Composable that allows the user to select the desired cupcake quantity and expects
@ -50,7 +50,7 @@ import com.example.cupcake.data.DataSource
fun StartOrderScreen(
quantityOptions: List<Pair<Int, Int>>,
modifier: Modifier = Modifier
){
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.SpaceBetween
@ -73,20 +73,18 @@ fun StartOrderScreen(
)
Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small)))
}
Row(modifier = Modifier.weight(1f, false)) {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(
dimensionResource(id = R.dimen.padding_medium)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(
dimensionResource(id = R.dimen.padding_medium)
)
) {
quantityOptions.forEach { item ->
SelectQuantityButton(
labelResourceId = item.first,
onClick = {}
)
) {
quantityOptions.forEach { item ->
SelectQuantityButton(
labelResourceId = item.first,
onClick = {}
)
}
}
}
}
@ -101,7 +99,7 @@ fun SelectQuantityButton(
@StringRes labelResourceId: Int,
onClick: () -> Unit,
modifier: Modifier = Modifier
){
) {
Button(
onClick = onClick,
modifier = modifier.widthIn(min = 250.dp)
@ -112,9 +110,13 @@ fun SelectQuantityButton(
@Preview
@Composable
fun StartOrderPreview(){
StartOrderScreen(
quantityOptions = DataSource.quantityOptions,
modifier = Modifier.fillMaxSize().padding(dimensionResource(R.dimen.padding_medium))
)
fun StartOrderPreview() {
CupcakeTheme {
StartOrderScreen(
quantityOptions = DataSource.quantityOptions,
modifier = Modifier
.fillMaxSize()
.padding(dimensionResource(R.dimen.padding_medium))
)
}
}

View File

@ -38,6 +38,7 @@ import androidx.compose.ui.tooling.preview.Preview
import com.example.cupcake.R
import com.example.cupcake.data.OrderUiState
import com.example.cupcake.ui.components.FormattedPriceLabel
import com.example.cupcake.ui.theme.CupcakeTheme
/**
* This composable expects [orderUiState] that represents the order state, [onCancelButtonClicked]
@ -48,7 +49,7 @@ import com.example.cupcake.ui.components.FormattedPriceLabel
fun OrderSummaryScreen(
orderUiState: OrderUiState,
modifier: Modifier = Modifier
){
) {
val resources = LocalContext.current.resources
val numberOfCupcakes = resources.getQuantityString(
@ -95,9 +96,7 @@ fun OrderSummaryScreen(
)
}
Row(
modifier = Modifier
.weight(1f, false)
.padding(dimensionResource(R.dimen.padding_medium))
modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium))
) {
Column(
verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small))
@ -121,9 +120,11 @@ fun OrderSummaryScreen(
@Preview
@Composable
fun OrderSummaryPreview(){
OrderSummaryScreen(
orderUiState = OrderUiState(0, "Test", "Test", "$300.00"),
modifier = Modifier.fillMaxHeight()
)
fun OrderSummaryPreview() {
CupcakeTheme {
OrderSummaryScreen(
orderUiState = OrderUiState(0, "Test", "Test", "$300.00"),
modifier = Modifier.fillMaxHeight()
)
}
}