EAS PPB 2024-5025201079
Julio Geraldi Soeiono
PPB F
5025201079
Rework Point App (Starbucks)
Menggunakan kotlin dan android studio
-Membuat Fitur Landing Page mirip starbucks
-Membuat welcome page melihat point aplikasi seperti starbucks
-Membuat product detail dari yang ada
product_detail_screen.kt
package com.julioger.starbucksapp.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.*
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.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
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 androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.julioger.starbucksapp.R
import com.julioger.starbucksapp.common.AppIcon
import com.julioger.starbucksapp.ui.theme.*
@Composable
fun ProductDetailScreen(
navHostController: NavHostController
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Background)
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(20.dp)
) {
ProductHeader(navHostController)
LazyColumn {
item {
ShowProduct()
}
item {
ProductDescription()
}
}
}
AppButton(
modifier = Modifier
.padding(20.dp)
.align(Alignment.BottomCenter)
)
}
}
@Preview(showBackground = true)
@Composable
fun ProductDetailScreenPreview() {
ProductDetailScreen(navHostController = rememberNavController())
}
@Composable
fun ProductDescription(
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(vertical = 15.dp)
) {
Text(
text = "Coffee",
style = TextStyle(
color = DarkGreen,
fontWeight = FontWeight.W400,
fontSize = 18.sp,
fontFamily = MediumFont
),
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Chocolate Frappuccino",
style = TextStyle(
color = Color.Black,
fontWeight = FontWeight.W500,
fontSize = 22.sp,
fontFamily = MediumFont
),
)
Row(
modifier = Modifier.align(Alignment.CenterVertically)
) {
Icon(
painter = painterResource(id = R.drawable.star), contentDescription = "",
modifier = Modifier
.size(20.dp)
.align(Alignment.CenterVertically),
tint = Color.Unspecified,
)
Spacer(modifier = Modifier.width(5.dp))
Text(
text = "4.5",
style = TextStyle(
color = Gray400,
fontWeight = FontWeight.W400,
fontSize = 18.sp,
fontFamily = MediumFont
),
)
}
}
Spacer(modifier = Modifier.height(15.dp))
Text(
text = "Description Here",
style = TextStyle(
color = Gray500,
fontWeight = FontWeight.W400,
fontSize = 18.sp,
fontFamily = MediumFont
),
)
}
}
@Preview(showBackground = true)
@Composable
fun ProductDescriptionPreview() {
ProductDescription()
}
@Composable
fun ShowProduct(
modifier: Modifier = Modifier
) {
var counter by remember { mutableStateOf(0) }
Box(
modifier = modifier
.padding(top = 30.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(14.dp))
.background(LightRed),
contentAlignment = Alignment.Center
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 15.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = R.drawable.image), contentDescription = "",
modifier = Modifier.height(220.dp)
)
Spacer(modifier = Modifier.height(20.dp))
Box(
modifier = Modifier
.width(130.dp)
.clip(RoundedCornerShape(20.dp))
.background(Color.White)
) {
AppIcon(icon = R.drawable.plus, background = DarkGreen) {
counter++
}
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "$counter",
style = TextStyle(
color = DarkGreen,
fontWeight = FontWeight.W400,
fontSize = 25.sp,
fontFamily = MediumFont
),
modifier = Modifier.align(Alignment.Center)
)
Spacer(modifier = Modifier.width(10.dp))
AppIcon(
icon = R.drawable.minus, background = DarkGreen, modifier = Modifier.align(
Alignment.TopEnd
)
) {
if (counter > 0)
counter--
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun ShowProductPreview() {
ShowProduct()
}
@Composable
fun AppButton(
modifier: Modifier = Modifier
) {
Button(
onClick = {}, modifier = modifier.fillMaxWidth(),
elevation = ButtonDefaults.elevation(0.dp),
shape = RoundedCornerShape(37.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = DarkGreen
),
) {
Text(
text = stringResource(R.string.add_to_bag),
style = TextStyle(
color = Color.White,
fontWeight = FontWeight.W500,
fontSize = 20.sp,
fontFamily = MediumFont
),
modifier = Modifier.padding(vertical = 5.dp)
)
}
}
@Preview(showBackground = true)
@Composable
fun AppButtonPreview() {
AppButton()
}
@Composable
fun ProductHeader(
navHostController: NavHostController
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 30.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
AppIcon(icon = R.drawable.back) {
navHostController.navigateUp()
}
Icon(
painter = painterResource(id = R.drawable.logo),
contentDescription = "",
modifier = Modifier.size(58.dp),
tint = Color.Unspecified
)
AppIcon(icon = R.drawable.love)
}
}
@Preview(showBackground = true)
@Composable
fun ProductHeaderPreview() {
ProductHeader(navHostController = rememberNavController())
}
start_screen.kt
package com.julioger.starbucksapp.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.julioger.starbucksapp.R
import com.julioger.starbucksapp.navigation.HOME_SCREEN
import com.julioger.starbucksapp.ui.theme.Background
import kotlinx.coroutines.delay
@Composable
fun StartScreen(
navHostController: NavHostController
) {
LaunchedEffect(key1 = true){
delay(2000)
navHostController.navigate(HOME_SCREEN)
}
Box(
modifier = Modifier
.fillMaxSize()
.background(Background), contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(id = R.drawable.logo),
contentDescription = "",
modifier = Modifier.size(150.dp)
)
}
}
@Preview(showBackground = true)
@Composable
fun StartScreenPreview() {
StartScreen(navHostController = rememberNavController())
}
home_screen.kt
package com.julioger.starbucksapp.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterVertically
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.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
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.julioger.starbucksapp.common.AppIcon
import com.julioger.starbucksapp.R
import com.julioger.starbucksapp.navigation.DETAIL_SCREEN
import com.julioger
.starbucksapp.ui.theme.*
@Composable
fun HomeScreen(
navHostController: NavHostController
) {
var search by remember { mutableStateOf("") }
val menuList = listOf("All", "Coffee", "Tea", "Drinks", "Beer", "Wine")
var selected by remember { mutableStateOf("All") }
Box(
modifier = Modifier
.fillMaxSize()
.background(Background)
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(20.dp)
) {
Header()
LazyColumn {
item {
Text(
text = "Welcome Julio\nPoint = 100", style = TextStyle(
fontSize = 25.sp,
color = Color.Black,
fontFamily = SemiboldFont,
fontWeight = FontWeight.W600
),
modifier = Modifier.padding(vertical = 30.dp)
)
}
item {
Box() {
CustomSearchBar(value = search, onValueChange = { search = it })
AppIcon(
icon = R.drawable.filter,
background = DarkGreen,
modifier = Modifier
.align(
Alignment.TopEnd
)
.size(55.dp)
)
}
}
item {
LazyRow(modifier = Modifier.padding(vertical = 20.dp)) {
items(menuList) {
CustomFilterChip(title = it, selected = it == selected) { data ->
selected = data
}
}
}
}
item {
Popular(navHostController)
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun PreviewHomeScreen() {
val navController = rememberNavController()
HomeScreen(navHostController = navController)
}
@Composable
fun Popular(
navHostController: NavHostController
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 10.dp, bottom = 20.dp)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Popular",
style = TextStyle(
color = Color.Black,
fontWeight = FontWeight.W500,
fontSize = 22.sp,
fontFamily = MediumFont
),
)
Text(
text = "See All",
style = TextStyle(
color = DarkGreen,
fontWeight = FontWeight.W500,
fontSize = 22.sp,
fontFamily = MediumFont
),
)
}
Spacer(modifier = Modifier.height(10.dp))
LazyRow {
items(5) {
ItemEachRow {
navHostController.navigate(DETAIL_SCREEN)
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun PreviewPopular() {
val navController = rememberNavController()
Popular(navHostController = navController)
}
@Composable
fun ItemEachRow(
onClick: () -> Unit
) {
var selected by remember { mutableStateOf(false) }
Card(
shape = RoundedCornerShape(14.dp),
modifier = Modifier
.clickable { onClick() }
.width(220.dp)
.padding(end = 10.dp),
) {
Column {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.clip(
RoundedCornerShape(
bottomStart = 14.dp,
bottomEnd = 14.dp
)
)
.background(LightRed),
contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(id = R.drawable.image), contentDescription = "",
modifier = Modifier
.height(180.dp),
)
}
Column(
modifier = Modifier.padding(15.dp)
) {
Text(
text = "Chocolate Frappuccino",
style = TextStyle(
color = DarkGray,
fontWeight = FontWeight.W500,
fontSize = 20.sp,
fontFamily = MediumFont
),
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Rp100.000,00",
style = TextStyle(
color = DarkGreen,
fontWeight = FontWeight.W400,
fontSize = 25.sp,
fontFamily = MediumFont
),
)
IconButton(onClick = {
selected = !selected
}, modifier = Modifier
.size(24.dp)
.align(CenterVertically)) {
Icon(
painter = painterResource(id = R.drawable.love),
contentDescription = "",
tint = if (selected) Red else Color.Unspecified
)
}
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun PreviewItemEachRow() {
ItemEachRow(onClick = {})
}
@Composable
fun CustomFilterChip(
title: String,
selected: Boolean,
modifier: Modifier = Modifier,
onValueChange: (String) -> Unit,
) {
TextButton(
onClick = { onValueChange(title) },
shape = RoundedCornerShape(22.dp),
elevation = ButtonDefaults.elevation(0.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = if (selected) DarkGreen else Gray
),
modifier = modifier.padding(end = 15.dp)
) {
Text(
text = title, style = TextStyle(
color = if (selected) Color.White else TextColor,
fontWeight = FontWeight.W400,
fontSize = 20.sp,
fontFamily = RegularFont
),
modifier = Modifier.padding(vertical = 5.dp, horizontal = 10.dp)
)
}
}
@Preview(showBackground = true)
@Composable
fun PreviewCustomFilterChip() {
CustomFilterChip(title = "Coffee", selected = true, onValueChange = {})
}
@Composable
fun CustomSearchBar(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier
) {
Box(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(26.5.dp))
.background(Gray)
) {
TextField(
value = value, onValueChange = { onValueChange(it) },
placeholder = {
Text(
text = "Search", style = TextStyle(
fontSize = 16.sp,
fontFamily = RegularFont,
fontWeight = FontWeight.W400,
color = DarkGray
)
)
},
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.search),
contentDescription = "",
tint = Color.Unspecified
)
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
singleLine = true,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
trailingIcon = {}
)
}
}
@Preview(showBackground = true)
@Composable
fun PreviewCustomSearchBar() {
CustomSearchBar(value = "", onValueChange = {})
}
@Composable
fun Header() {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 30.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
AppIcon(icon = R.drawable.menu)
Icon(
painter = painterResource(id = R.drawable.logo),
contentDescription = "",
modifier = Modifier.size(58.dp),
tint = Color.Unspecified
)
AppIcon(icon = R.drawable.bag)
}
}
@Preview(showBackground = true)
@Composable
fun PreviewHeader() {
Header()
}
MainActivity.kt
package com.julioger.starbucksapp
import android.os.Bundle
import android.view.View
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.julioger.starbucksapp.navigation.MainNavigation
import com.julioger.starbucksapp.screens.HomeScreen
import com.julioger.starbucksapp.screens.ProductDetailScreen
import com.julioger.starbucksapp.screens.StartScreen
import com.julioger.starbucksapp.ui.theme.StarbucksAppTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
window?.decorView?.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
window.statusBarColor = android.graphics.Color.TRANSPARENT
StarbucksAppTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
MainNavigation()
}
}
}
}
}
Komentar
Posting Komentar