Tugas 3 - Membangun Aplikasi Sederhana dengan Composable Teks
Membangun Aplikasi Sederhana dengan Composable Teks
Ricardo Supriyanto 5025221218
Untuk memulai Project klik Start a new Android Studio project. Jika sudah membuka project Android Studio, pilih File > New > New Project dari panel menu. Untuk project baru, pilih Empty Activity dari template yang tersedia. Di kolom Name, masukkan Happy Birthday, lalu pilih level API minimum 24 (Nougat) di kolom Minimum SDK dan klik Finish.
Lalu dengan menggunakan tutorial dari jetpack compose menggunakan composable text. Didapatkan hasil seperti ini.
Setelah itu, untuk memberikan kreasi pada project ini, saya melakukan beberapa modifikasi agar lebih menarik untuk dibaca. Hasilnya seperti ini:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
BirthdayCard(
message = "Happy Birthday Sam!",
from = "From Emma"
)
}
}
}
}
}
@Composable
fun BirthdayCard(message: String, from: String, modifier: Modifier = Modifier) {
Box(
modifier = modifier.fillMaxSize()
) {
Image(
painter = painterResource(id = R.drawable.background),
contentDescription = "Birthday Background",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(32.dp)
) {
Text(
text = "Birthday Card",
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center,
color = Color(0xFF9C27B0),
modifier = Modifier
.background(
color = Color(0x80FFFFFF),
shape = RoundedCornerShape(16.dp)
)
.padding(16.dp)
.padding(bottom = 8.dp)
)
Text(
text = message,
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center,
color = Color.White,
modifier = Modifier
.padding(bottom = 8.dp)
.background(
brush = Brush.linearGradient(
colors = listOf(Color(0xFF9C27B0), Color(0xFFFF4081))
),
shape = RoundedCornerShape(8.dp)
)
.padding(16.dp)
.shadow(20.dp)
)
Text(
text = from,
fontSize = 22.sp,
fontWeight = FontWeight.Medium,
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f),
modifier = Modifier
.background(
color = Color(0x80FFFFFF),
shape = RoundedCornerShape(8.dp)
)
.padding(16.dp)
.shadow(10.dp)
)
}
}
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
BirthdayCard(message = "Happy Birthday Sam!", from = "From Emma")
}
}
Dengan source code berikut:
Demo Aplikasi:
Referensi:
Komentar
Posting Komentar