Skip to content

Commit d833dde

Browse files
EdgarBarcenas97EdgarBarcenas97
committed
Fix Ui
1 parent 7959d89 commit d833dde

File tree

14 files changed

+426
-396
lines changed

14 files changed

+426
-396
lines changed

‎composeApp/src/androidMain/kotlin/app/app/samplekmp/MainActivity.kt

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ package app.app.samplekmp
33
import android.os.Bundle
44
import androidx.activity.ComponentActivity
55
import androidx.activity.compose.setContent
6+
import androidx.activity.enableEdgeToEdge
67
import androidx.compose.runtime.Composable
78
import androidx.compose.ui.tooling.preview.Preview
89
import app.app.samplekmp.app.App
910

1011
class MainActivity : ComponentActivity() {
1112
override fun onCreate(savedInstanceState: Bundle?) {
1213
super.onCreate(savedInstanceState)
13-
14+
enableEdgeToEdge()
1415
setContent {
1516
App()
1617
}

‎composeApp/src/commonMain/composeResources/values/strings.xml

+1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@
2323
<string name="delete_account">Delete account</string>
2424
<string name="logout">Logout</string>
2525
<string name="start_deleting_your_account_in_the_app">Start deleting your account in the app</string>
26+
<string name="create_account">Create account</string>
2627
</resources>

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/onboarding/OnboardingFakeData.kt

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
package app.app.samplekmp.app.auth.onboarding
2+
3+
fun givenPages() = listOf(
4+
mapOf(
5+
"title" to "Welcome to Wheels",
6+
"subtitle" to "Let's find you a bike",
7+
"image" to "https://images.unsplash.com/photo-1475666675596-cca2035b3d79",
8+
),
9+
mapOf(
10+
"title" to "Find a bike in any town",
11+
"subtitle" to "With over 5,000 spots world wide, we always got you covered",
12+
"image" to "https://images.unsplash.com/photo-1605028241606-ca01277aa15c",
13+
),
14+
mapOf(
15+
"title" to "Safety above all",
16+
"subtitle" to "Travel with peace of mind, thanks to our safety features",
17+
"image" to "https://images.unsplash.com/photo-1517305349393-aad1f0ee4328"))

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/onboarding/OnboardingScaffold.kt

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
package app.app.samplekmp.app.auth.onboarding
2+
3+
import androidx.compose.animation.core.animateDpAsState
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.fillMaxSize
11+
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.layout.size
15+
import androidx.compose.foundation.layout.widthIn
16+
import androidx.compose.foundation.pager.HorizontalPager
17+
import androidx.compose.foundation.pager.rememberPagerState
18+
import androidx.compose.foundation.shape.CircleShape
19+
import androidx.compose.material3.Button
20+
import androidx.compose.material3.ButtonDefaults
21+
import androidx.compose.material3.LocalContentColor
22+
import androidx.compose.material3.MaterialTheme
23+
import androidx.compose.material3.Text
24+
import androidx.compose.material3.TextButton
25+
import androidx.compose.runtime.Composable
26+
import androidx.compose.runtime.CompositionLocalProvider
27+
import androidx.compose.runtime.getValue
28+
import androidx.compose.ui.Alignment
29+
import androidx.compose.ui.Modifier
30+
import androidx.compose.ui.draw.clip
31+
import androidx.compose.ui.graphics.Brush
32+
import androidx.compose.ui.graphics.Color
33+
import androidx.compose.ui.layout.ContentScale
34+
import androidx.compose.ui.text.style.TextAlign
35+
import app.app.samplekmp.resources.Space16
36+
import app.app.samplekmp.resources.Space2
37+
import app.app.samplekmp.resources.Space24
38+
import app.app.samplekmp.resources.Space4
39+
import app.app.samplekmp.resources.Space6
40+
import app.app.samplekmp.resources.Space600
41+
import app.app.samplekmp.resources.Space8
42+
import app.app.samplekmp.resources.Weight1
43+
import coil3.compose.AsyncImage
44+
import org.jetbrains.compose.resources.stringResource
45+
import samplekmp.composeapp.generated.resources.Res
46+
import samplekmp.composeapp.generated.resources.create_account
47+
import samplekmp.composeapp.generated.resources.forgot_password
48+
import samplekmp.composeapp.generated.resources.login
49+
50+
@Composable
51+
fun OnboardingScaffold(
52+
onSignInClick: () -> Unit,
53+
onSignUpClick: () -> Unit
54+
) {
55+
val pages = givenPages()
56+
val pagerState = rememberPagerState { pages.size }
57+
Column(
58+
modifier = Modifier.background(Color.Black)
59+
) {
60+
HorizontalPager(
61+
state = pagerState,
62+
modifier = Modifier.weight(Weight1)
63+
) { page ->
64+
val item = pages[page]
65+
val title = item.getValue(titleConst)
66+
val subtitle = item.getValue(subtitleConst)
67+
val image = item.getValue(imageConst)
68+
Box(
69+
modifier = Modifier.fillMaxSize(),
70+
contentAlignment = Alignment.Center
71+
) {
72+
AsyncImage(
73+
model = image,
74+
modifier = Modifier.fillMaxSize().background(Color.Black),
75+
contentDescription = null,
76+
contentScale = ContentScale.Crop
77+
)
78+
Box(
79+
modifier = Modifier
80+
.fillMaxSize()
81+
.background(Brush.verticalGradient(listOf(Color.Transparent, Color.Black)))
82+
)
83+
Column(
84+
modifier = Modifier
85+
.align(Alignment.BottomCenter)
86+
.padding(Space24)
87+
.widthIn(max = Space600)
88+
.fillMaxWidth(),
89+
) {
90+
CompositionLocalProvider(
91+
value = LocalContentColor provides Color.White
92+
) {
93+
Text(
94+
text = title,
95+
style = MaterialTheme.typography.headlineLarge,
96+
textAlign = TextAlign.Start
97+
)
98+
Spacer(modifier = Modifier.height(Space4))
99+
Text(
100+
text = subtitle,
101+
style = MaterialTheme.typography.headlineSmall,
102+
textAlign = TextAlign.Start
103+
)
104+
}
105+
}
106+
}
107+
}
108+
Row(
109+
horizontalArrangement = Arrangement.spacedBy(Space6),
110+
verticalAlignment = Alignment.CenterVertically,
111+
modifier = Modifier.align(Alignment.CenterHorizontally)
112+
) {
113+
val currentPage = pagerState.currentPage
114+
repeat(pages.size) { iteration ->
115+
val color = if (currentPage == iteration) Color.White else Color.Gray
116+
val size by animateDpAsState(if (currentPage == iteration) Space8 else Space6)
117+
Box(
118+
modifier = Modifier.size(Space8),
119+
contentAlignment = Alignment.Center
120+
) {
121+
Box(
122+
modifier = Modifier
123+
.clip(CircleShape)
124+
.background(color)
125+
.size(size)
126+
)
127+
}
128+
}
129+
}
130+
Spacer(modifier = Modifier.height(Space24))
131+
Column(
132+
verticalArrangement = Arrangement.spacedBy(Space2),
133+
modifier = Modifier
134+
.align(Alignment.CenterHorizontally)
135+
.padding(horizontal = Space16)
136+
.padding(bottom = Space16).widthIn(max = Space600)
137+
) {
138+
Button(
139+
onClick = onSignUpClick,
140+
modifier = Modifier.fillMaxWidth()
141+
) {
142+
Text(
143+
text = stringResource(Res.string.create_account),
144+
modifier = Modifier.padding(vertical = Space8)
145+
)
146+
}
147+
TextButton(
148+
onClick = onSignInClick,
149+
modifier = Modifier.fillMaxWidth(),
150+
colors = ButtonDefaults.textButtonColors(contentColor = Color.White)
151+
) {
152+
Text(text = stringResource(Res.string.login))
153+
}
154+
}
155+
}
156+
}
157+
158+
private const val titleConst = "title"
159+
private const val subtitleConst = "subtitle"
160+
private const val imageConst = "image"

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/onboarding/OnboardingScreen.kt

-167
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,6 @@
11
package app.app.samplekmp.app.auth.onboarding
22

3-
import androidx.compose.animation.core.animateDpAsState
4-
import androidx.compose.foundation.background
5-
import androidx.compose.foundation.layout.Arrangement
6-
import androidx.compose.foundation.layout.Box
7-
import androidx.compose.foundation.layout.Column
8-
import androidx.compose.foundation.layout.Row
9-
import androidx.compose.foundation.layout.Spacer
10-
import androidx.compose.foundation.layout.fillMaxSize
11-
import androidx.compose.foundation.layout.fillMaxWidth
12-
import androidx.compose.foundation.layout.height
13-
import androidx.compose.foundation.layout.padding
14-
import androidx.compose.foundation.layout.size
15-
import androidx.compose.foundation.layout.widthIn
16-
import androidx.compose.foundation.pager.HorizontalPager
17-
import androidx.compose.foundation.pager.rememberPagerState
18-
import androidx.compose.foundation.shape.CircleShape
19-
import androidx.compose.material3.Button
20-
import androidx.compose.material3.ButtonDefaults
21-
import androidx.compose.material3.LocalContentColor
22-
import androidx.compose.material3.MaterialTheme
23-
import androidx.compose.material3.Scaffold
24-
import androidx.compose.material3.Text
25-
import androidx.compose.material3.TextButton
263
import androidx.compose.runtime.Composable
27-
import androidx.compose.runtime.CompositionLocalProvider
28-
import androidx.compose.runtime.getValue
29-
import androidx.compose.ui.Alignment
30-
import androidx.compose.ui.Modifier
31-
import androidx.compose.ui.draw.clip
32-
import androidx.compose.ui.graphics.Brush
33-
import androidx.compose.ui.graphics.Color
34-
import androidx.compose.ui.layout.ContentScale
35-
import androidx.compose.ui.text.style.TextAlign
36-
import app.app.samplekmp.resources.Space16
37-
import app.app.samplekmp.resources.Space2
38-
import app.app.samplekmp.resources.Space24
39-
import app.app.samplekmp.resources.Space4
40-
import app.app.samplekmp.resources.Space6
41-
import app.app.samplekmp.resources.Space600
42-
import app.app.samplekmp.resources.Space8
43-
import app.app.samplekmp.resources.Weight1
44-
import coil3.compose.AsyncImage
454

465
@Composable
476
fun OnboardingScreen(
@@ -53,129 +12,3 @@ fun OnboardingScreen(
5312
onSignUpClick = onSignUpClick
5413
)
5514
}
56-
57-
@Composable
58-
fun OnboardingScaffold(
59-
onSignInClick: () -> Unit,
60-
onSignUpClick: () -> Unit
61-
) {
62-
val pages = listOf(
63-
mapOf(
64-
"title" to "Welcome to Wheels",
65-
"subtitle" to "Let's find you a bike",
66-
"image" to "https://images.unsplash.com/photo-1475666675596-cca2035b3d79",
67-
), mapOf(
68-
"title" to "Find a bike in any town",
69-
"subtitle" to "With over 5,000 spots world wide, we always got you covered",
70-
"image" to "https://images.unsplash.com/photo-1605028241606-ca01277aa15c",
71-
), mapOf(
72-
"title" to "Safety above all",
73-
"subtitle" to "Travel with peace of mind, thanks to our safety features",
74-
"image" to "https://images.unsplash.com/photo-1517305349393-aad1f0ee4328",
75-
)
76-
)
77-
val pagerState = rememberPagerState { pages.size }
78-
79-
Scaffold {
80-
Column(
81-
modifier = Modifier.background(Color.Black)
82-
) {
83-
HorizontalPager(
84-
state = pagerState, modifier = Modifier.weight(Weight1)
85-
) { page ->
86-
val item = pages[page]
87-
val title = item.getValue("title")
88-
val subtitle = item.getValue("subtitle")
89-
val image = item.getValue("image")
90-
Box(
91-
modifier = Modifier.fillMaxSize(),
92-
contentAlignment = Alignment.Center
93-
) {
94-
AsyncImage(
95-
model = image,
96-
modifier = Modifier.fillMaxSize().background(Color.Black),
97-
contentDescription = null,
98-
contentScale = ContentScale.Crop
99-
)
100-
Box(
101-
modifier = Modifier
102-
.fillMaxSize()
103-
.background(Brush.verticalGradient(listOf(Color.Transparent, Color.Black)))
104-
)
105-
Column(
106-
modifier = Modifier
107-
.align(Alignment.BottomCenter)
108-
.padding(Space24)
109-
.widthIn(max = Space600)
110-
.fillMaxWidth(),
111-
) {
112-
CompositionLocalProvider(
113-
value = LocalContentColor provides Color.White
114-
) {
115-
Text(
116-
text = title,
117-
style = MaterialTheme.typography.headlineLarge,
118-
textAlign = TextAlign.Start
119-
)
120-
Spacer(modifier = Modifier.height(Space4))
121-
Text(
122-
text = subtitle,
123-
style = MaterialTheme.typography.headlineSmall,
124-
textAlign = TextAlign.Start
125-
)
126-
}
127-
}
128-
}
129-
}
130-
Row(
131-
horizontalArrangement = Arrangement.spacedBy(Space6),
132-
verticalAlignment = Alignment.CenterVertically,
133-
modifier = Modifier.align(Alignment.CenterHorizontally)
134-
) {
135-
val currentPage = pagerState.currentPage
136-
repeat(pages.size) { iteration ->
137-
val color = if (currentPage == iteration) Color.White else Color.Gray
138-
val size by animateDpAsState(if (currentPage == iteration) Space8 else Space6)
139-
Box(
140-
modifier = Modifier.size(Space8),
141-
contentAlignment = Alignment.Center
142-
) {
143-
Box(
144-
modifier = Modifier
145-
.clip(CircleShape)
146-
.background(color)
147-
.size(size)
148-
)
149-
}
150-
}
151-
}
152-
Spacer(
153-
modifier = Modifier.height(Space24)
154-
)
155-
Column(
156-
verticalArrangement = Arrangement.spacedBy(Space2),
157-
modifier = Modifier
158-
.align(Alignment.CenterHorizontally)
159-
.padding(horizontal = Space16)
160-
.padding(bottom = Space16).widthIn(max = Space600)
161-
) {
162-
Button(
163-
onClick = onSignUpClick,
164-
modifier = Modifier.fillMaxWidth()
165-
) {
166-
Text(
167-
text = "Create account",
168-
modifier = Modifier.padding(vertical = Space8)
169-
)
170-
}
171-
TextButton(
172-
onClick = onSignInClick,
173-
modifier = Modifier.fillMaxWidth(),
174-
colors = ButtonDefaults.textButtonColors(contentColor = Color.White)
175-
) {
176-
Text(text = "Log in")
177-
}
178-
}
179-
}
180-
}
181-
}

0 commit comments

Comments
 (0)