Skip to content

Instantly share code, notes, and snippets.

@hassanabidpk

hassanabidpk/KopiDetailScreen.kt

Created July 27, 2024 13:52
Show Gist options
  • Save hassanabidpk/0f40af2975b4f45fe4d228782bdc73af to your computer and use it in GitHub Desktop.
Save hassanabidpk/0f40af2975b4f45fe4d228782bdc73af to your computer and use it in GitHub Desktop.
Download ZIP
Iteration 1 of KopiDetailScreen generated by Google AI Studio. Iteration 2 done to rectify changes
Raw
KopiDetailScreen.kt
package dev.hassanabid.ioextendedsg.studioui
import android.annotation.SuppressLint
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Coffee
import androidx.compose.material.icons.filled.DeliveryDining
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.LocalOffer
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.*
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.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import dev.hassanabid.ioextendedsg.R
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true)
@Composable
fun KopiDetailScreen() {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = { Text("Detail", fontWeight = FontWeight.Bold) },
navigationIcon = {
IconButton(onClick = { /* TODO */ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /* TODO */ }) {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null
)
}
},
)
}
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Image(
painter = painterResource(id = R.drawable.coffee),
contentDescription = null,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Caffe Mocha",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Ice/Hot",
color = Color.Gray,
fontSize = 16.sp
)
Spacer(modifier = Modifier.height(8.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Icon(
imageVector = Icons.Default.DeliveryDining,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
Icon(
imageVector = Icons.Default.Coffee,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
Icon(
imageVector = Icons.Default.LocalOffer,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
}
Spacer(modifier = Modifier.height(16.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Icon(
imageVector = Icons.Default.Star,
contentDescription = null,
tint = Color(0xFFFFD700)
)
Text(
text = "4.8",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "(230)",
color = Color.Gray,
fontSize = 16.sp
)
}
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Description",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "A cappuccino is an approximately 150 ml (5 oz) beverage, with 25 ml of espresso coffee and 85ml of fresh milk the fo...",
textAlign = TextAlign.Justify
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Size",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "S",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "M",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "L",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
}
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Price",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
Text(
text = "$ 4.53",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Button(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "Buy Now",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
}
}
}
}
Raw
KopiDetailScreen2.kt
package dev.hassanabid.ioextendedsg.studioui
import android.annotation.SuppressLint
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Coffee
import androidx.compose.material.icons.filled.DeliveryDining
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.LocalOffer
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.*
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.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import dev.hassanabid.ioextendedsg.R
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true)
@Composable
fun .
KopiDetailScreen2() {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = { Text("Detail", fontWeight = FontWeight.Bold) },
navigationIcon = {
IconButton(onClick = { /* TODO */ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /* TODO */ }) {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null
)
}
},
)
}
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Image(
painter = painterResource(id = R.drawable.coffee),
contentDescription = null,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Caffe Mocha",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
text = "Ice/Hot",
color = Color.Gray,
fontSize = 16.sp
)
Icon(
imageVector = Icons.Default.DeliveryDining,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
Icon(
imageVector = Icons.Default.Coffee,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
Icon(
imageVector = Icons.Default.LocalOffer,
contentDescription = null,
tint = Color(0xFFC19A6B)
)
}
Spacer(modifier = Modifier.height(16.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Icon(
imageVector = Icons.Default.Star,
contentDescription = null,
tint = Color(0xFFFFD700)
)
Text(
text = "4.8",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "(230)",
color = Color.Gray,
fontSize = 16.sp
)
}
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Description",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "A cappuccino is an approximately 150 ml (5 oz) beverage, with 25 ml of espresso coffee and 85ml of fresh milk the fo...",
textAlign = TextAlign.Justify
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Size",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "S",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "M",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
OutlinedButton(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "L",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
}
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Price",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
Text(
text = "$ 4.53",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.weight(1f))
Button(
onClick = { /* TODO */ },
shape = RoundedCornerShape(16.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = "Buy Now",
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
}
Spacer(modifier = Modifier.weight(1f))
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment