Skip to content

Commit 8790f11

Browse files
UrAvgCodeUrAvgCode
committed
update button tutorial layout
1 parent 167349e commit 8790f11

File tree

7 files changed

+108
-186
lines changed

7 files changed

+108
-186
lines changed

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/component/ButtonExplanation.kt‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
package com.uravgcode.chooser.tutorial.presentation.component
2+
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.foundation.layout.size
8+
import androidx.compose.foundation.shape.CircleShape
9+
import androidx.compose.material3.Card
10+
import androidx.compose.material3.MaterialTheme
11+
import androidx.compose.material3.Surface
12+
import androidx.compose.material3.Text
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.Color
17+
import androidx.compose.ui.text.font.FontWeight
18+
import androidx.compose.ui.text.style.TextAlign
19+
import androidx.compose.ui.unit.dp
20+
21+
@Composable
22+
fun ButtonExplanation(
23+
title: String,
24+
description: String,
25+
buttonContent: @Composable () -> Unit,
26+
modifier: Modifier = Modifier
27+
) {
28+
Card(
29+
modifier = modifier
30+
) {
31+
Row(
32+
modifier = Modifier.padding(16.dp),
33+
verticalAlignment = Alignment.CenterVertically
34+
) {
35+
Surface(
36+
shape = CircleShape,
37+
color = MaterialTheme.colorScheme.secondaryContainer,
38+
contentColor = Color.White,
39+
modifier = Modifier.size(56.dp)
40+
) {
41+
Box(
42+
contentAlignment = Alignment.Center,
43+
) {
44+
buttonContent()
45+
}
46+
}
47+
48+
Column(
49+
horizontalAlignment = Alignment.CenterHorizontally
50+
) {
51+
Text(
52+
text = title,
53+
fontWeight = FontWeight.Bold,
54+
textAlign = TextAlign.Center,
55+
style = MaterialTheme.typography.titleMedium,
56+
)
57+
Text(
58+
text = description,
59+
textAlign = TextAlign.Center,
60+
)
61+
}
62+
}
63+
}
64+
}

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/component/DummyButton.kt‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/component/ModeButtonExplanation.kt‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/component/NumberButtonExplanation.kt‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ButtonPage.kt‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
package com.uravgcode.chooser.tutorial.presentation.page
22

33
import androidx.compose.foundation.layout.Arrangement
4-
import androidx.compose.foundation.layout.Box
54
import androidx.compose.foundation.layout.Column
6-
import androidx.compose.foundation.layout.Row
7-
import androidx.compose.foundation.layout.aspectRatio
8-
import androidx.compose.foundation.layout.fillMaxWidth
5+
import androidx.compose.foundation.layout.ExperimentalLayoutApi
6+
import androidx.compose.foundation.layout.fillMaxSize
97
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.material.icons.Icons
10+
import androidx.compose.material.icons.filled.Settings
11+
import androidx.compose.material3.Icon
1012
import androidx.compose.material3.MaterialTheme
1113
import androidx.compose.material3.Text
1214
import androidx.compose.runtime.Composable
1315
import androidx.compose.ui.Alignment
1416
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.res.painterResource
1518
import androidx.compose.ui.text.font.FontWeight
1619
import androidx.compose.ui.text.style.TextAlign
1720
import androidx.compose.ui.unit.dp
18-
import com.uravgcode.chooser.tutorial.presentation.component.ModeButtonExplanation
19-
import com.uravgcode.chooser.tutorial.presentation.component.NumberButtonExplanation
21+
import androidx.compose.ui.unit.sp
22+
import com.uravgcode.chooser.R
23+
import com.uravgcode.chooser.tutorial.presentation.component.ButtonExplanation
2024

2125
@Composable
26+
@OptIn(ExperimentalLayoutApi::class)
2227
fun ButtonPage() {
2328
Column(
29+
modifier = Modifier.fillMaxSize(),
2430
horizontalAlignment = Alignment.CenterHorizontally,
25-
verticalArrangement = Arrangement.Center
31+
verticalArrangement = Arrangement.SpaceEvenly,
2632
) {
2733
Text(
2834
text = "How to Use",
@@ -32,36 +38,40 @@ fun ButtonPage() {
3238
textAlign = TextAlign.Center
3339
)
3440

35-
Row(
36-
modifier = Modifier.fillMaxWidth(),
37-
horizontalArrangement = Arrangement.Center,
38-
verticalAlignment = Alignment.CenterVertically
39-
) {
40-
Box(
41-
modifier = Modifier
42-
.weight(1f)
43-
.aspectRatio(1f)
44-
.padding(horizontal = 8.dp),
45-
contentAlignment = Alignment.Center
46-
) {
47-
ModeButtonExplanation()
41+
ButtonExplanation(
42+
title = "Mode Button",
43+
description = "Tap to switch between Single, Group, and Order modes",
44+
buttonContent = {
45+
Icon(
46+
painter = painterResource(id = R.drawable.single_icon),
47+
contentDescription = null,
48+
modifier = Modifier.size(38.dp),
49+
)
4850
}
51+
)
4952

50-
Box(
51-
modifier = Modifier
52-
.weight(1f)
53-
.aspectRatio(1f)
54-
.padding(horizontal = 8.dp),
55-
contentAlignment = Alignment.Center
56-
) {
57-
NumberButtonExplanation()
53+
ButtonExplanation(
54+
title = "Number Button",
55+
description = "Tap to change the number of winners or groups",
56+
buttonContent = {
57+
Text(
58+
text = "1",
59+
fontSize = 38.sp,
60+
textAlign = TextAlign.Center,
61+
)
5862
}
59-
}
63+
)
6064

61-
Text(
62-
text = "Long press on the Mode button to access settings",
63-
modifier = Modifier.padding(top = 8.dp),
64-
textAlign = TextAlign.Center
65+
ButtonExplanation(
66+
title = "Settings",
67+
description = "Long press on the Mode button to access settings",
68+
buttonContent = {
69+
Icon(
70+
imageVector = Icons.Filled.Settings,
71+
contentDescription = null,
72+
modifier = Modifier.size(38.dp),
73+
)
74+
}
6575
)
6676
}
6777
}

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ModePage.kt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.Box
1212
import androidx.compose.foundation.layout.Column
1313
import androidx.compose.foundation.layout.Row
1414
import androidx.compose.foundation.layout.fillMaxSize
15-
import androidx.compose.foundation.layout.fillMaxWidth
1615
import androidx.compose.foundation.layout.padding
1716
import androidx.compose.foundation.layout.size
1817
import androidx.compose.foundation.shape.RoundedCornerShape
@@ -73,8 +72,8 @@ fun ModePage(
7372
)
7473
Text(
7574
text = title,
75+
fontWeight = FontWeight.Bold,
7676
style = MaterialTheme.typography.headlineLarge,
77-
fontWeight = FontWeight.Bold
7877
)
7978
}
8079
Text(

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/WelcomePage.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Arrangement
99
import androidx.compose.foundation.layout.Box
1010
import androidx.compose.foundation.layout.Column
1111
import androidx.compose.foundation.layout.fillMaxSize
12-
import androidx.compose.foundation.layout.fillMaxWidth
1312
import androidx.compose.foundation.layout.padding
1413
import androidx.compose.material3.MaterialTheme
1514
import androidx.compose.material3.Text

0 commit comments

Comments
 (0)