devoalda
/
basic-android-kotlin-compose-training-cupcake
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/main/java/com/example/cupcake/MainActivity.kt
View File

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

32
app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt
View File

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

44
app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt
View File

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

19
app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt
View File

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