Aplikasi Woof (Material Design)

Aplikasi Woof - Jetpack Compose Showcase

Aplikasi Woof adalah aplikasi berbasis Android yang dibuat menggunakan Jetpack Compose dan Material 3. Aplikasi ini dirancang untuk menampilkan daftar anjing (dog list) lengkap dengan nama, umur, gambar, dan hobi mereka. Cocok digunakan sebagai proyek pembelajaran UI deklaratif dengan animasi dan tema.

🛠️ Teknologi yang Digunakan

  • Jetpack Compose (UI deklaratif modern)
  • Material 3 untuk desain UI
  • Kotlin sebagai bahasa pemrograman
  • Android Studio sebagai lingkungan pengembangan

📱 Tampilan Aplikasi



Setiap item dalam daftar menampilkan informasi berikut:

  • 📷 Foto Anjing (berbentuk bulat)
  • 🐶 Nama anjing dan usia
  • 🔽 Tombol expand/collapse untuk menampilkan deskripsi hobi

📂 Struktur File

com.example.woof
│
├── data
│   └── Dog.kt         (model data anjing)
│   └── DogData.kt     (data dummy anjing)
│
├── ui.theme
│   └── Theme.kt       (pengaturan tema Material 3)
│   └── Color.kt, Type.kt, Shape.kt
│
├── MainActivity.kt    (tampilan utama dan seluruh composable UI)

🧩 Penjelasan Kode Utama

1. MainActivity.kt

File utama yang memanggil WoofApp() di dalam Surface menggunakan tema WoofTheme.

2. WoofApp()

Fungsi utama aplikasi yang menggunakan Scaffold untuk menyusun struktur TopAppBar dan LazyColumn untuk menampilkan daftar anjing.

3. DogItem()

Menampilkan satu kartu anjing dengan:

  • Gambar anjing (bulat)
  • Nama dan usia
  • Tombol expand untuk melihat deskripsi hobi

4. Animasi

Animasi saat kartu dibuka/tutup menggunakan animateContentSize() dengan Spring: 


.animateContentSize(
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioNoBouncy,
        stiffness = Spring.StiffnessMedium
    )
)

5. Top App Bar

AppBar menampilkan logo ic_woof_logo dan teks "Woof", terpusat secara horizontal menggunakan CenterAlignedTopAppBar.

🎨 Tema dan Sumber Daya

  • R.dimen.padding_small, padding_medium, dan image_size untuk ukuran
  • R.drawable.ic_woof_logo untuk ikon AppBar
  • strings.xml untuk nama anjing, usia, dan deskripsi hobi

🎯 Fitur Utama

  • 💡 Expandable cards untuk informasi lebih lanjut
  • 🧩 Modular dan reusable composables
  • 🌓 Mendukung tampilan Light dan Dark Mode

🔚 Kesimpulan

Aplikasi Woof memberikan contoh bagaimana membuat UI modern, ramah pengguna, dan mudah dikembangkan menggunakan Jetpack Compose. Proyek ini sangat direkomendasikan untuk pemula Android atau siapa pun yang ingin memahami desain UI deklaratif.

Github : https://github.com/Arkandrvesh/PPB

VIDEO



Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat aplikasi Hello Android

Gambar
Proyek Hello Android - Jetpack Compose Proyek ini adalah contoh aplikasi Android paling dasar menggunakan Jetpack Compose . Tujuannya adalah untuk menampilkan tulisan sederhana yaitu Hello Android di layar perangkat. Struktur Proyek MainActivity.kt → Tempat kode utama yang menjalankan UI Theme.kt → Untuk mengatur tema aplikasi (optional, default saja) AndroidManifest.xml → Mendefinisikan aktivitas awal aplikasi Kode Lengkap MainActivity package com.example.helloandroid import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material3.Text import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import com.example.helloandroid.ui.theme.HelloAndroidTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInst...
Baca selengkapnya

Aplikasi Dessert Clicker (Activity dan Intent)

Gambar
Dessert Clicker App dengan Jetpack Compose Dessert Clicker adalah aplikasi Android sederhana berbasis Jetpack Compose yang menampilkan gambar dessert dan menghitung total pendapatan berdasarkan jumlah dessert yang telah diklik oleh pengguna. Aplikasi ini cocok digunakan untuk mempelajari konsep dasar Jetpack Compose seperti state management, layout, serta pemisahan concerns menggunakan Composable functions . 1. Struktur Proyek MainActivity.kt : Berisi logika utama aplikasi dan lifecycle logging. Datasource.kt : Menyediakan daftar dessert sebagai data statis. Dessert.kt : Data model yang merepresentasikan setiap dessert. ui.theme : Berisi file Theme.kt dan Color.kt untuk pengaturan tema Material3. 2. Tampilan Aplikasi Tampilan menunjukkan sebuah dessert di atas meja dan dua informasi penting: Desserts sold: Jumlah dessert yang telah dijual (klik oleh user). Total Revenue: Total pendapatan berdasarkan harga setiap dessert yang dijual. 3. Penjelasan Ko...
Baca selengkapnya