Skip to content

Commit 54048d7

Browse files
UmairKhalid786UmairKhalid786
committed
Settings screen update with about me copy and profile images added
1 parent 505f07f commit 54048d7

File tree

6 files changed

+160
-14
lines changed

6 files changed

+160
-14
lines changed

‎app/src/main/java/com/techlads/composetv/settings/navigation/NestedHomeScreenNavigation.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import com.google.accompanist.navigation.animation.AnimatedNavHost
77
import com.google.accompanist.navigation.animation.composable
88
import com.techlads.composetv.navigation.tabEnterTransition
99
import com.techlads.composetv.navigation.tabExitTransition
10-
import com.techlads.composetv.settings.screens.about.AboutMeScreen
10+
import com.techlads.composetv.settings.screens.about.AboutScreen
1111
import com.techlads.composetv.settings.screens.profile.ProfileScreen
1212

1313
@OptIn(ExperimentalAnimationApi::class)
1414
@Composable
1515
fun NestedSettingsScreenNavigation(navController: NavHostController) {
16-
AnimatedNavHost(navController = navController, startDestination = SettingsScreens.AboutMe.title) {
16+
AnimatedNavHost(navController = navController, startDestination = SettingsScreens.Profile.title) {
1717
// e.g will add auth routes here if when we will extend project
1818
composable(
1919
SettingsScreens.Profile.title,
@@ -25,7 +25,7 @@ fun NestedSettingsScreenNavigation(navController: NavHostController) {
2525
SettingsScreens.AboutMe.title,
2626
enterTransition = { tabEnterTransition() },
2727
exitTransition = { tabExitTransition() }) {
28-
AboutMeScreen()
28+
AboutScreen()
2929
}
3030
}
3131
}

‎app/src/main/java/com/techlads/composetv/settings/screens/Container.kt‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
package com.techlads.composetv.settings.screens
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Alignment
7+
import androidx.compose.ui.Modifier
8+
import androidx.compose.ui.tooling.preview.Preview
9+
import androidx.compose.ui.unit.dp
10+
import androidx.tv.material3.LocalContentColor
11+
import androidx.tv.material3.MaterialTheme
12+
import androidx.tv.material3.Text
13+
import com.techlads.composetv.settings.data.SettingsMenuModel
14+
15+
@Composable
16+
fun PreferencesContainer(
17+
modifier: Modifier = Modifier,
18+
preference: SettingsMenuModel,
19+
content: @Composable () -> Unit
20+
) {
21+
Box(
22+
modifier
23+
.fillMaxSize()
24+
.padding(64.dp),
25+
contentAlignment = Alignment.CenterStart
26+
) {
27+
Column(modifier = Modifier.fillMaxSize()) {
28+
ContentHeading(title = preference.text)
29+
Spacer(modifier = Modifier.padding(8.dp))
30+
Spacer(modifier = Modifier.height(1.dp).fillMaxWidth().background(color = LocalContentColor.current.copy(alpha = 0.1f)))
31+
Spacer(modifier = Modifier.padding(8.dp))
32+
content()
33+
}
34+
}
35+
}
36+
37+
@Composable
38+
fun ContentHeading(title: String) {
39+
Text(
40+
text = title,
41+
style = MaterialTheme.typography.headlineLarge,
42+
modifier = Modifier
43+
.wrapContentWidth()
44+
)
45+
}
46+
47+
@Preview
48+
@Composable
49+
fun ContentHeadingPrev() {
50+
ContentHeading(SettingsMenuModel("Profile", "").text)
51+
}

‎app/src/main/java/com/techlads/composetv/settings/screens/about/AboutMeScreen.kt‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
package com.techlads.composetv.settings.screens.about
22

3-
import androidx.compose.foundation.layout.Box
4-
import androidx.compose.foundation.layout.fillMaxSize
53
import androidx.tv.material3.Text
64
import androidx.compose.runtime.Composable
7-
import androidx.compose.ui.Alignment
85
import androidx.compose.ui.Modifier
6+
import androidx.compose.ui.tooling.preview.Preview
7+
import androidx.tv.material3.LocalContentColor
8+
import androidx.tv.material3.MaterialTheme
9+
import com.techlads.composetv.settings.data.SettingsMenuModel
10+
import com.techlads.composetv.settings.screens.PreferencesContainer
911

1012
@Composable
11-
fun AboutMeScreen(){
12-
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
13-
Text(text = "About Me")
13+
fun AboutScreen() {
14+
PreferencesContainer(preference = SettingsMenuModel("About", "about_me")) {
15+
Text(modifier = Modifier,
16+
text = "Hello! I'm Umair Khalid,\nA software developer with a passion for open source development. I have a strong background in programming languages and technologies, and I'm constantly learning and improving my skills. I believe in the power of open source development to create innovative solutions and make a positive impact on society. That's why I have contributed to several open source projects, which you can find on my GitHub profile at https://github.com/UmairKhalid786. I'm also active on LinkedIn, where you can learn more about my experience, education, and interests in software development: https://www.linkedin.com/in/umairkhalid786/. I'm always looking for new opportunities to collaborate with other developers and create meaningful solutions, so feel free to connect with me on LinkedIn or check out my projects on GitHub.", color = LocalContentColor.current.copy(alpha = 0.4f), style = MaterialTheme.typography.bodyMedium)
1417
}
18+
}
19+
20+
@Preview
21+
@Composable
22+
private fun AboutScreenPrev() {
23+
AboutScreen()
1524
}

‎app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,81 @@
11
package com.techlads.composetv.settings.screens.profile
22

3-
import androidx.compose.foundation.layout.Box
4-
import androidx.compose.foundation.layout.fillMaxSize
5-
import androidx.tv.material3.Text
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.shape.CircleShape
67
import androidx.compose.runtime.Composable
78
import androidx.compose.ui.Alignment
89
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.draw.clip
11+
import androidx.compose.ui.draw.shadow
12+
import androidx.compose.ui.res.painterResource
13+
import androidx.compose.ui.unit.dp
14+
import androidx.tv.material3.LocalContentColor
15+
import androidx.tv.material3.MaterialTheme
16+
import androidx.tv.material3.Text
17+
import com.techlads.composetv.R
18+
import com.techlads.composetv.settings.data.SettingsMenuModel
19+
import com.techlads.composetv.settings.screens.PreferencesContainer
20+
import com.techlads.composetv.widgets.Button
21+
922
@Composable
1023
fun ProfileScreen() {
11-
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
12-
Text(text = "Profile")
24+
PreferencesContainer(preference = SettingsMenuModel("Profile", "profile")) {
25+
ProfilesContent()
26+
}
27+
}
28+
29+
@Composable
30+
fun ProfilesContent() {
31+
Column {
32+
33+
Row(verticalAlignment = Alignment.CenterVertically) {
34+
Image(
35+
modifier = Modifier
36+
.size(100.dp)
37+
.clip(CircleShape)
38+
.shadow(elevation = 12.dp, shape = CircleShape, clip = true)
39+
.border(2.dp, LocalContentColor.current, CircleShape),
40+
painter = painterResource(id = R.drawable.profile),
41+
contentDescription = "User profile"
42+
)
43+
Spacer(modifier = Modifier.size(20.dp))
44+
UserDetails()
45+
}
46+
Spacer(modifier = Modifier.size(5.dp))
47+
Row {
48+
Spacer(modifier = Modifier.size(120.dp))
49+
Button(text = "Save") {
50+
51+
}
52+
Spacer(modifier = Modifier.size(8.dp))
53+
Button(text = "Cancel") {
54+
55+
}
56+
}
1357
}
58+
}
59+
60+
@Composable
61+
fun UserDetails() {
62+
Column {
63+
Text(text = "Umair Khalid", style = MaterialTheme.typography.headlineSmall)
64+
Spacer(modifier = Modifier.size(8.dp))
65+
Text(
66+
text = "Android Developer", style = MaterialTheme.typography.labelSmall,
67+
color = LocalContentColor.current.copy(alpha = 0.4f)
68+
)
69+
Text(
70+
text = "Github: https://github.com/UmairKhalid786",
71+
style = MaterialTheme.typography.labelSmall,
72+
color = LocalContentColor.current.copy(alpha = 0.4f)
73+
)
74+
}
75+
}
76+
77+
@androidx.compose.ui.tooling.preview.Preview
78+
@Composable
79+
fun ProfileScreenPrev() {
80+
ProfileScreen()
1481
}

‎app/src/main/java/com/techlads/composetv/widgets/Button.kt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
package com.techlads.composetv.widgets
2+
3+
import androidx.compose.foundation.layout.padding
4+
import androidx.compose.runtime.Composable
5+
import androidx.compose.ui.Modifier
6+
import androidx.compose.ui.unit.dp
7+
import androidx.tv.material3.*
8+
9+
@OptIn(ExperimentalTvMaterial3Api::class)
10+
@Composable
11+
fun Button(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
12+
Surface(
13+
onClick = onClick,
14+
modifier = modifier,
15+
tonalElevation = 1.dp
16+
) {
17+
Text(text = text, Modifier.padding(horizontal = 12.dp, vertical = 4.dp))
18+
}
19+
}

‎app/src/main/res/drawable/profile.jpg‎

379 KB
Loading

0 commit comments

Comments
 (0)