впринципе все скрины есть

поправить дезигн нужно
This commit is contained in:
VictoriaPresnyakova 2023-10-16 17:09:41 +04:00
parent 9b61677603
commit 35d89b440e
19 changed files with 1142 additions and 135 deletions

View File

@ -50,7 +50,7 @@ dependencies {
implementation("androidx.core:core-ktx:1.12.0") implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2") implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
implementation("androidx.activity:activity-compose:1.7.2") implementation("androidx.activity:activity-compose:1.8.0")
implementation(platform("androidx.compose:compose-bom:2023.03.00")) implementation(platform("androidx.compose:compose-bom:2023.03.00"))
implementation("androidx.compose.ui:ui") implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics") implementation("androidx.compose.ui:ui-graphics")
@ -63,7 +63,7 @@ dependencies {
androidTestImplementation("androidx.compose.ui:ui-test-junit4") androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling") debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest") debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation ("com.google.code.gson:gson:2.8.8")
implementation("androidx.navigation:navigation-compose:2.7.3") implementation("androidx.navigation:navigation-compose:2.7.3")
} }

View File

@ -10,20 +10,24 @@ import com.example.androidlabs.booking.BookingScreen
import com.example.androidlabs.homeScreen.CardItem.HotelCard import com.example.androidlabs.homeScreen.CardItem.HotelCard
import com.example.androidlabs.homeScreen.HomeScreen import com.example.androidlabs.homeScreen.HomeScreen
import com.example.androidlabs.hotelScreen.HotelInfo import com.example.androidlabs.hotelScreen.HotelInfo
import com.example.androidlabs.profileScreen.profile.Person
import com.example.androidlabs.profileScreen.profile.ProfileScreen import com.example.androidlabs.profileScreen.profile.ProfileScreen
import com.example.androidlabs.profileScreen.signIn.LoginScreen import com.example.androidlabs.profileScreen.signIn.LoginScreen
import com.example.androidlabs.profileScreen.signUp.SignUpScreen
import com.example.androidlabs.adminPanel.AddPanel
import com.example.androidlabs.adminPanel.AdminPanel
import com.example.androidlabs.adminPanel.ChangePanel
@Composable @Composable
fun NavController(navController: NavHostController){ fun NavController(navController: NavHostController) {
NavHost( NavHost(
navController = navController, navController = navController,
startDestination = NavItem.Home.route startDestination = NavItem.Home.route
){ ) {
composable(NavItem.HotelInfo.route){ composable(NavItem.HotelInfo.route) {
HotelInfo(Hotel("hotel", R.drawable.img_1, 4, "location"), navController) HotelInfo(Hotel("hotel", R.drawable.img_1, 4, "location"), navController)
} }
composable(NavItem.Home.route){ composable(NavItem.Home.route) {
HomeScreen(navController) HomeScreen(navController)
} }
composable(NavItem.Profile.route) { composable(NavItem.Profile.route) {
@ -32,8 +36,23 @@ fun NavController(navController: NavHostController){
composable(NavItem.SignIn.route){ composable(NavItem.SignIn.route){
LoginScreen(navController) LoginScreen(navController)
} }
composable(NavItem.Booking.route){ composable(NavItem.SignUp.route){
SignUpScreen()
}
composable(NavItem.Booking.route) {
BookingScreen() BookingScreen()
} }
composable(NavItem.Person.route) {
Person()
} }
} composable(NavItem.AdminPanel.route){
AdminPanel(navController)
}
composable(NavItem.AddPanel.route){
AddPanel()
}
composable(NavItem.ChangePanel.route){
ChangePanel(navController)
}
}
}

View File

@ -1,6 +1,7 @@
package com.example.androidlabs.Navigation package com.example.androidlabs.Navigation
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person import androidx.compose.material.icons.filled.Person
@ -10,7 +11,13 @@ sealed class NavItem(val route: String, val icon: ImageVector?){
object Home : NavItem("home", Icons.Default.Home) object Home : NavItem("home", Icons.Default.Home)
object Profile : NavItem("profile", Icons.Default.Person) object Profile : NavItem("profile", Icons.Default.Person)
object SignIn : NavItem("login", null) object SignIn : NavItem("login", null)
object SignUp : NavItem("signup", null)
object HotelInfo : NavItem("HotelInfo", null) object HotelInfo : NavItem("HotelInfo", null)
object Booking : NavItem("booking", null) object Booking : NavItem("booking", null)
object Person : NavItem("person", null)
object AdminPanel : NavItem("admin", Icons.Default.Build)
object AddPanel : NavItem("add", null)
object ChangePanel : NavItem("change", null)
// object ChangeHotel : NavItem("changeHotel/{hotelItem}", null)
} }

View File

@ -24,6 +24,7 @@ fun Navigate(){
val listItem = listOf( val listItem = listOf(
NavItem.Home, NavItem.Home,
NavItem.Profile, NavItem.Profile,
NavItem.AdminPanel
) )
Scaffold(bottomBar = { Scaffold(bottomBar = {

View File

@ -0,0 +1,219 @@
package com.example.androidlabs.adminPanel
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.androidlabs.R
@Composable
fun AddPanel(){
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(16.dp))
.background((Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)))
.verticalScroll(rememberScrollState())
) {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = R.drawable.img),
contentDescription = "image",
contentScale = ContentScale.FillHeight,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.height(200.dp)
)
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF),
contentColor = Color.White
),
onClick = {
//TODO
},
modifier = Modifier
.fillMaxWidth()
.padding(16.dp, 0.dp, 16.dp, 16.dp)
) {
Text("Add image")
}
TextField(
value = "",
onValueChange = { },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Brand",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = " ",
onValueChange = { },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Model",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = " ",
onValueChange = { },
modifier = Modifier
.fillMaxWidth()
.height(150.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Description",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = "",
onValueChange = { },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Price",
style = TextStyle(fontSize = 12.sp)
)
}
)
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor =(Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
//
},
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text("Add sneaker")
}
}
}
}
@Preview(showBackground = true)
@Composable
fun AddPreview() {
AddPanel()
}

View File

@ -0,0 +1,48 @@
package com.example.androidlabs.adminPanel
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
@Composable
fun AdminPanel(navHostController: NavHostController) {
var isAddPanelVisible by remember { mutableStateOf(false) }
var isChangePanelVisible by remember { mutableStateOf(false) }
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
.padding(bottom = 50.dp)
) {
ButtonAdmin(
onAddClick = {
isAddPanelVisible = true
isChangePanelVisible = false
},
onChangeClick = {
isChangePanelVisible = true
isAddPanelVisible = false
}
)
if (isAddPanelVisible) {
AddPanel()
}
if (isChangePanelVisible) {
ChangePanel(navHostController)
}
}
}

View File

@ -0,0 +1,70 @@
package com.example.androidlabs.adminPanel
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.example.androidlabs.R
@Composable
fun ButtonAdmin(onAddClick: () -> Unit, onChangeClick: () -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp, 16.dp, 16.dp, 0.dp)
.clip(RoundedCornerShape(16.dp))
.background(colorResource(id = R.color.figma))
){
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = colorResource(id = R.color.figma_blue),
contentColor = Color.White
),
onClick = {
onAddClick()
},
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
.fillMaxWidth(0.5f)
.padding(16.dp)
) {
Text("Add")
}
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = colorResource(id = R.color.figma_blue),
contentColor = Color.White
),
onClick = {
onChangeClick()
},
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
.fillMaxWidth()
.padding(16.dp)
) {
Text("Change/Del")
}
}
}

View File

@ -0,0 +1,95 @@
package com.example.androidlabs.adminPanel
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.androidlabs.Hotel
import com.example.androidlabs.R
import com.google.gson.Gson
@Composable
fun CardHotelForChange(item: Hotel, navController: NavHostController) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
.background(colorResource(id = R.color.figma)),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Image(
painter = painterResource(id = item.img),
contentDescription = "image",
contentScale = ContentScale.FillWidth,
modifier = Modifier
.size(70.dp)
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
)
Column(
modifier = Modifier
.weight(1f)
.padding(start = 16.dp)
) {
item.name?.let { Text(text = it, fontSize = 20.sp) }
Text(text = "${item.location} USD", color = Color.Red, fontSize = 16.sp)
}
Image(
painter = painterResource(id = R.drawable.baseline_edit_24),
contentDescription = "image",
modifier = Modifier
.size(40.dp)
.padding(10.dp)
.clickable {
val sneakerItemString = Gson().toJson(item)
navController.navigate("changeSneaker/${sneakerItemString}")
}
)
Image(
painter = painterResource(id = R.drawable.baseline_delete_24),
contentDescription = "image",
modifier = Modifier
.size(40.dp)
.padding(10.dp)
.clickable {
}
)
}
}
@Composable
@Preview
fun CardSneakerLikePreview(){
val navController = rememberNavController()
CardHotelForChange(Hotel("Hotel", R.drawable.img, 5, "location"), navController)
}

View File

@ -0,0 +1,48 @@
package com.example.androidlabs.adminPanel
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.example.androidlabs.Hotel
import com.example.androidlabs.R
@Composable
fun ChangePanel(navHostController: NavHostController){
//val list = sneakerViewModel.SneakerList.collectAsState(initial = emptyList()).value
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
.padding(16.dp)
){
Row {
LazyColumn(
modifier = Modifier
.fillMaxSize()
) {
itemsIndexed(
listOf(
Hotel("Hotel", R.drawable.img, 5, "location"),
Hotel("Hotel", R.drawable.img, 5, "location"),
Hotel("Hotel", R.drawable.img, 5, "location")
)
){_, item->
CardHotelForChange(item = item, navHostController)
}
}
}
}
}

View File

@ -1,69 +1,43 @@
package com.example.androidlabs.profileScreen.profile package com.example.androidlabs.profileScreen.profile
import androidx.compose.foundation.Image
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize import androidx.compose.foundation.layout.size
import androidx.compose.material.Button import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.runtime.Composable; import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController import androidx.compose.ui.unit.sp
import androidx.navigation.compose.rememberNavController
@Composable @Composable
fun ProfileScreen(navController: NavHostController) { fun Person() {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxSize() .background(Color.White)
.background(Color.White), .fillMaxSize(),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center
horizontalAlignment = Alignment.CenterHorizontally ) {
){ ProfileCard()
Row(
modifier = Modifier.padding(vertical = 16.dp)
){
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
navController.navigate("login")
},
modifier = Modifier
.requiredSize(100.dp, 40.dp)
) {
Text(text = "Sign In")
}
}
Row{
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = { /*TODO*/ },
modifier = Modifier
.requiredSize(100.dp, 40.dp)
) {
Text(text = "Sign Up")
}
}
} }
} }
@Composable
@Preview @Preview
fun ProfileScreenPreview(){ @Composable
val navController = rememberNavController() fun PersonPreview(){
ProfileScreen(navController = navController) Person()
} }

View File

@ -0,0 +1,71 @@
package com.example.androidlabs.profileScreen.profile
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.androidlabs.R
@Preview
@Composable
fun ProfileCard() {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(16.dp))
.background(Color.LightGray)
){
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
){
Image(
contentScale = ContentScale.Crop,
painter = painterResource(id = R.drawable.img_2),
contentDescription = null,
modifier = Modifier
.size(150.dp)
.border(2.dp, Color.White, CircleShape)
.padding(16.dp)
.clip(CircleShape)
)
Text(
text = "Шайлушай",
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "shailushai@example.com",
fontSize = 16.sp,
color = Color.Gray
)
}
}
}

View File

@ -0,0 +1,98 @@
package com.example.androidlabs.profileScreen.profile
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable;
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.draw.clip
@Composable
fun ProfileScreen(navController: NavHostController) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Row(
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
){
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
navController.navigate("person")
},
modifier = Modifier
.requiredSize(300.dp, 40.dp)
) {
Text(text = "Profile")
}
}
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
){
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
navController.navigate("login")
},
modifier = Modifier
.requiredSize(300.dp, 40.dp)
) {
Text(text = "Sign In")
}
}
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
){
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
navController.navigate("signup")
},
modifier = Modifier
.requiredSize(300.dp, 40.dp)
) {
Text(text = "Sign Up")
}
}
}
}
@Composable
@Preview
fun ProfileScreenPreview(){
val navController = rememberNavController()
ProfileScreen(navController = navController)
}

View File

@ -0,0 +1,147 @@
package com.example.androidlabs.profileScreen.signIn
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
@Composable
fun SignInCard(navController: NavHostController) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(16.dp))
.background((Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)))
){
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
){
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Text(
text = "Sign In",
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
)
TextField(
value = username,
onValueChange = { username = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Username",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = password,
onValueChange = { password = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Password",
style = TextStyle(fontSize = 12.sp)
)
}
)
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.White,
contentColor = Color.Black
),
onClick = {
},
modifier = Modifier
.fillMaxWidth()
.padding(16.dp, 16.dp, 16.dp, 0.dp)
) {
Text("Sign In")
}
ClickableText(
text = AnnotatedString("You do not have an account? Register!"),
modifier = Modifier
.padding(0.dp, 0.dp, 0.dp, 16.dp),
onClick = {
navController.navigate("signup")
}
)
}
}
}

View File

@ -26,85 +26,12 @@ import androidx.navigation.compose.rememberNavController
import androidx.compose.material.Text as Text1 import androidx.compose.material.Text as Text1
@Composable @Composable
fun LoginScreen(navController : NavHostController) { fun LoginScreen(navController: NavHostController) {
var username by remember { mutableStateOf("") } Column(modifier = Modifier
var password by remember { mutableStateOf("") } .fillMaxSize()
.background(Color.White),
Column( verticalArrangement = Arrangement.Center
modifier = Modifier
.fillMaxSize()
.background(Color.White)
.padding(15.dp, 0.dp)
,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text1(text = "Sign In", fontSize = 24.sp, fontWeight = FontWeight.Bold) SignInCard(navController)
Spacer(modifier = Modifier.height(16.dp))
BasicTextField(
value = username,
onValueChange = { username = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(8.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
.padding(8.dp),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
)
BasicTextField(
value = password,
onValueChange = { password = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(8.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
.padding(8.dp),
singleLine = true,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
){
}
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = (Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)),
contentColor = Color.White
),
onClick = {
navController.navigate("login")
},
modifier = Modifier.fillMaxWidth()
) {
Text1("Sign In")
}
} }
}
fun performLogin(username: String, password: String) {
} }

View File

@ -0,0 +1,224 @@
package com.example.androidlabs.profileScreen.signUp
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
@Preview
fun SignUpCard() {
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var sex by remember { mutableStateOf("") }
var name by remember { mutableStateOf("") }
var surname by remember { mutableStateOf("") }
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(16.dp))
.background((Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF)))
){
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
){
Text(
text = "Sign Up",
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(16.dp)
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = username,
onValueChange = { username = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Username",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = name,
onValueChange = { name = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Name",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = surname,
onValueChange = { surname = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Surname",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = sex,
onValueChange = { sex = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Sex",
style = TextStyle(fontSize = 12.sp)
)
}
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = password,
onValueChange = { password = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(16.dp, 0.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp)),
singleLine = true,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
placeholder = {
Text(
text = "Password",
style = TextStyle(fontSize = 12.sp)
)
}
)
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.White,
contentColor = Color.Black
),
onClick = {
},
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text("Sign Up")
}
}
}
}

View File

@ -0,0 +1,47 @@
package com.example.androidlabs.profileScreen.signUp
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.DropdownMenu
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun SignUpScreen() {
Column(modifier = Modifier
.fillMaxSize()
.background(Color.White),
verticalArrangement = Arrangement.Center
) {
SignUpCard()
}
}

View File

@ -0,0 +1,5 @@
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z"/>
</vector>

View File

@ -0,0 +1,5 @@
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
</vector>

View File

@ -7,4 +7,6 @@
<color name="teal_700">#FF018786</color> <color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color> <color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color> <color name="white">#FFFFFFFF</color>
<color name="figma">#F4F4F4</color>
<color name="figma_blue">#3660F6</color>
</resources> </resources>