Tugas 8 - Membuat Aplikasi Woof
Membuat Aplikasi Woof
Ricardo Supriyanto - 5025221218
Pada tugas pertemuan 8, saya mendapatkan tugas untuk mengembangkan sebuah aplikasi Android yang menampilkan daftar anjing, yang diberi nama "Woof". Inspirasi utama dan panduan desain untuk aplikasi ini berasal dari prinsip-prinsip Material Design, dengan tujuan menciptakan antarmuka pengguna (UI) yang tidak hanya fungsional tetapi juga menarik secara visual, intuitif, dan konsisten.
Aplikasi "Woof" ini dibangun sepenuhnya menggunakan Jetpack Compose, toolkit UI modern dari Android yang memungkinkan pengembangan UI secara deklaratif dengan Kotlin. Fokus utama adalah menampilkan daftar anjing, di mana setiap entri menampilkan informasi penting seperti foto, nama, dan usia anjing, serta deskripsi singkat yang dapat diperluas.
Fitur-fitur utama yang diimplementasikan meliputi:
- Tampilan Daftar Dinamis: Menggunakan LazyColumn untuk menampilkan daftar anjing secara efisien, bahkan jika daftarnya panjang.
- Desain Kartu Informasi: Setiap anjing direpresentasikan dalam sebuah Card yang menampilkan detailnya secara terstruktur.
- Interaksi Expand/Collapse: Pengguna dapat melihat deskripsi lebih lanjut tentang setiap anjing dengan mengetuk kartu atau tombol panah.
- Top App Bar Informatif: Menampilkan logo dan judul aplikasi.
- Struktur Proyek yang Terorganisir: Memisahkan data, UI, dan tema untuk pengelolaan kode yang lebih baik.
Berikut merupakan sedikit demo dari aplikasi "Woof" yang telah saya buat:
Kode Program Modifikasi:
package com.woofapp
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.material3.*
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.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.woofapp.data.Dog
import com.woofapp.data.DataSource
import com.woofapp.ui.theme.WoofAppTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
WoofAppTheme {
WoofAppScaffold()
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun WoofAppScaffold(modifier: Modifier = Modifier) {
Scaffold(
topBar = {
WoofTopAppBar()
}
) { innerPadding ->
LazyColumn(
modifier = modifier
.padding(innerPadding)
.padding(horizontal = 16.dp, vertical = 8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
items(
items = DataSource.dogs,
key = { dog -> dog.id }
) { dog ->
DogItem(
dog = dog,
modifier = Modifier
.fillMaxWidth()
.animateContentSize()
)
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
CenterAlignedTopAppBar(
title = {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.ic_woof_logo),
contentDescription = null,
modifier = Modifier
.size(40.dp)
.padding(end = 8.dp),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimaryContainer)
)
Text(
text = stringResource(R.string.app_name_title),
style = MaterialTheme.typography.displayMedium
)
}
},
modifier = modifier,
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
)
)
}
@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
var expanded by remember { mutableStateOf(false) }
Card(
modifier = modifier,
onClick = { expanded = !expanded },
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
shape = MaterialTheme.shapes.medium
) {
Column(
modifier = Modifier
.animateContentSize()
.padding(16.dp)
) {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = dog.imageResourceId),
contentDescription = stringResource(dog.nameRes),
modifier = Modifier
.size(64.dp)
.clip(MaterialTheme.shapes.small),
contentScale = ContentScale.Crop
)
Spacer(Modifier.width(16.dp))
DogInformation(
dogNameRes = dog.nameRes,
dogAge = dog.age,
modifier = Modifier.weight(1f)
)
DogItemButton(
expanded = expanded,
onClick = { expanded = !expanded }
)
}
if (expanded) {
DogHobby(
dogHobbyRes = dog.descriptionRes,
modifier = Modifier.padding(top = 8.dp)
)
}
}
}
}
@Composable
fun DogInformation(
dogNameRes: Int,
dogAge: Int,
modifier: Modifier = Modifier
) {
Column(modifier = modifier) {
Text(
text = stringResource(dogNameRes),
style = MaterialTheme.typography.titleLarge,
modifier = Modifier.padding(bottom = 4.dp)
)
Text(
text = stringResource(R.string.years_old, dogAge),
style = MaterialTheme.typography.bodyMedium
)
}
}
@Composable
private fun DogItemButton(
expanded: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
IconButton(
onClick = onClick,
modifier = modifier
) {
Icon(
imageVector = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown,
contentDescription = stringResource(R.string.expand_button_content_description),
tint = MaterialTheme.colorScheme.secondary
)
}
}
@Composable
fun DogHobby(
dogHobbyRes: Int,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
) {
Text(
text = stringResource(R.string.about),
style = MaterialTheme.typography.labelSmall,
modifier = Modifier.padding(top = 8.dp, bottom = 4.dp)
)
Text(
text = stringResource(dogHobbyRes),
style = MaterialTheme.typography.bodyLarge
)
}
}
@Preview(showBackground = true, name = "Light Theme WoofApp")
@Composable
fun LightThemeWoofAppPreview() {
WoofAppTheme(darkTheme = false) {
WoofAppScaffold()
}
}
@Preview(showBackground = true, name = "Dark Theme WoofApp")
@Composable
fun DarkThemeWoofAppPreview() {
WoofAppTheme(darkTheme = true) {
WoofAppScaffold()
}
}
@Preview(showBackground = true, name = "Dog Item Preview")
@Composable
fun DogItemPreview() {
WoofAppTheme {
DogItem(DataSource.dogs[0])
}
}
Komentar
Posting Komentar