Skip to content

Commit 246b24d

Browse files
add dialog avatar
1 parent 3757142 commit 246b24d

File tree

7 files changed

+174
-8
lines changed

7 files changed

+174
-8
lines changed

.idea/deploymentTargetDropDown.xml

Lines changed: 14 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/discord.xml

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/misc.xml

Lines changed: 1 addition & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/src/main/java/com/example/quizkit/MainActivity.kt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import androidx.compose.material3.Text
1010
import androidx.compose.runtime.Composable
1111
import androidx.compose.ui.Modifier
1212
import androidx.compose.ui.tooling.preview.Preview
13+
import com.example.quizkit.presentation.MainApp
1314
import com.example.quizkit.ui.theme.QuizKitTheme
1415

1516
class MainActivity : ComponentActivity() {
@@ -22,7 +23,7 @@ class MainActivity : ComponentActivity() {
2223
modifier = Modifier.fillMaxSize(),
2324
color = MaterialTheme.colorScheme.background
2425
) {
25-
26+
MainApp()
2627
}
2728
}
2829
}
Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
package com.example.quizkit.ui.screen.profile
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.border
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.size
14+
import androidx.compose.foundation.layout.width
15+
import androidx.compose.foundation.lazy.grid.GridCells
16+
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
17+
import androidx.compose.foundation.shape.CircleShape
18+
import androidx.compose.foundation.shape.RoundedCornerShape
19+
import androidx.compose.material3.Button
20+
import androidx.compose.material3.ButtonDefaults
21+
import androidx.compose.material3.Divider
22+
import androidx.compose.material3.Surface
23+
import androidx.compose.material3.Text
24+
import androidx.compose.runtime.Composable
25+
import androidx.compose.ui.Alignment
26+
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.draw.clip
28+
import androidx.compose.ui.graphics.Color
29+
import androidx.compose.ui.res.colorResource
30+
import androidx.compose.ui.res.painterResource
31+
import androidx.compose.ui.text.font.FontWeight
32+
import androidx.compose.ui.tooling.preview.Preview
33+
import androidx.compose.ui.unit.dp
34+
import androidx.compose.ui.unit.sp
35+
import com.example.quizkit.R
36+
import com.example.quizkit.data.avatarProfile
37+
import com.example.quizkit.data.backgroundProfile
38+
39+
@Preview
40+
@Composable
41+
fun DialogAvatarProfile(){
42+
Column(
43+
Modifier
44+
.clip(shape = RoundedCornerShape(8))
45+
.background(Color.White)
46+
.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally) {
47+
Text(
48+
text = "Choose Avatar",
49+
fontWeight = FontWeight.Bold,
50+
fontSize = 28.sp
51+
)
52+
Spacer(modifier = Modifier.height(16.dp))
53+
AvatarBox()
54+
Spacer(modifier = Modifier.height(16.dp))
55+
Divider()
56+
Spacer(modifier = Modifier.height(16.dp))
57+
ColorBox()
58+
Spacer(modifier = Modifier.height(20.dp))
59+
Button(
60+
onClick = { /*TODO*/ },
61+
modifier = Modifier.fillMaxWidth(),
62+
colors = ButtonDefaults.buttonColors(
63+
containerColor = colorResource(id = R.color.primary_purple)
64+
)
65+
) {
66+
Text(text = "Apply", fontSize = 24.sp)
67+
}
68+
}
69+
}
70+
71+
@Composable
72+
fun AvatarBox(){
73+
LazyVerticalGrid(
74+
verticalArrangement = Arrangement.spacedBy(16.dp),
75+
columns = GridCells.Fixed(4)
76+
, modifier = Modifier.padding(vertical = 12.dp)) {
77+
items(8){
78+
Surface(
79+
color = colorResource(id = R.color.gray_background),
80+
modifier = Modifier
81+
.width(120.dp)
82+
.height(60.dp)
83+
.padding(horizontal = 4.dp)
84+
.then(
85+
if (1 == it) Modifier.border(
86+
2.5.dp,
87+
colorResource(id = R.color.primary_purple),
88+
shape = RoundedCornerShape(20)
89+
) else Modifier
90+
),
91+
shape = RoundedCornerShape(20),
92+
) {
93+
Image(
94+
painter = painterResource(id = avatarProfile[it]!!),
95+
contentDescription = "profile",
96+
modifier = Modifier
97+
.size(30.dp)
98+
.padding(top = 10.dp)
99+
)
100+
}
101+
}
102+
}
103+
}
104+
105+
@Composable
106+
fun ColorBox(){
107+
LazyVerticalGrid(
108+
verticalArrangement = Arrangement.spacedBy(16.dp),
109+
horizontalArrangement = Arrangement.spacedBy(24.dp),
110+
columns = GridCells.Fixed(4),
111+
modifier = Modifier.padding(vertical = 12.dp)
112+
){
113+
items(8){
114+
Box(
115+
modifier = Modifier
116+
.width(40.dp)
117+
.height(50.dp)
118+
.clip(shape = CircleShape)
119+
.background(color = colorResource(id = backgroundProfile[it]!!))
120+
.then(
121+
if (6 == it) Modifier.border(
122+
2.5.dp,
123+
colorResource(id = R.color.primary_purple),
124+
shape = CircleShape
125+
) else Modifier
126+
)
127+
128+
)
129+
}
130+
}
131+
}

app/src/main/java/com/example/quizkit/ui/screen/profile/Profile.kt

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,17 @@ import androidx.compose.foundation.layout.width
1515
import androidx.compose.foundation.shape.RoundedCornerShape
1616
import androidx.compose.material.icons.Icons
1717
import androidx.compose.material.icons.filled.Edit
18+
import androidx.compose.material3.AlertDialog
19+
import androidx.compose.material3.ExperimentalMaterial3Api
1820
import androidx.compose.material3.Icon
1921
import androidx.compose.material3.IconButton
2022
import androidx.compose.material3.IconButtonDefaults
2123
import androidx.compose.material3.Surface
2224
import androidx.compose.runtime.Composable
25+
import androidx.compose.runtime.getValue
26+
import androidx.compose.runtime.mutableStateOf
27+
import androidx.compose.runtime.remember
28+
import androidx.compose.runtime.setValue
2329
import androidx.compose.ui.Alignment
2430
import androidx.compose.ui.Modifier
2531
import androidx.compose.ui.graphics.Color
@@ -31,9 +37,14 @@ import com.example.quizkit.data.avatarProfile
3137
import com.example.quizkit.data.backgroundProfile
3238
import com.example.quizkit.ui.component.InputForm
3339

40+
@OptIn(ExperimentalMaterial3Api::class)
3441
@Composable
3542
fun ProfileScreen(innerPadding:PaddingValues){
3643

44+
var showDialog by remember {
45+
mutableStateOf(false)
46+
}
47+
3748
Surface(
3849
modifier = Modifier
3950
.fillMaxSize()
@@ -86,7 +97,7 @@ fun ProfileScreen(innerPadding:PaddingValues){
8697
modifier = Modifier
8798
.size(48.dp)
8899
.offset(x = 76.dp, y = 76.dp),
89-
onClick = { /*TODO*/ },
100+
onClick = { showDialog = true },
90101
colors = IconButtonDefaults.iconButtonColors(
91102
containerColor = colorResource(id = R.color.primary_purple),
92103
contentColor = Color.White
@@ -101,4 +112,10 @@ fun ProfileScreen(innerPadding:PaddingValues){
101112
)
102113
}
103114
}
115+
116+
if(showDialog){
117+
AlertDialog(onDismissRequest = { showDialog = false }) {
118+
DialogAvatarProfile()
119+
}
120+
}
104121
}

build.gradle.kts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Top-level build file where you can add configuration options common to all sub-projects/modules.
22
plugins {
3-
id("com.android.application") version "8.2.1" apply false
3+
id("com.android.application") version "8.2.2" apply false
44
id("org.jetbrains.kotlin.android") version "1.9.0" apply false
55
}

0 commit comments

Comments
 (0)