Tugas 6 - Pemrograman Perangkat Bergerak (B)

Nama      : Yusna Millaturrosyidah

NRP        : 5025211254

Kelas      : Pemrograman Perangkat Bergerak (B)

Membuat Aplikasi Woof

Aplikasi Woof adalah sebuah aplikasi yang dirancang untuk menampilkan daftar anjing menggunakan prinsip Desain Material dari Google. Aplikasi ini memiliki fitur utama seperti tampilan daftar anjing yang rapi, lengkap dengan gambar, nama, dan umur setiap anjing. Terdapat sebuah App Bar di bagian atas aplikasi yang menampilkan logo dan nama aplikasi, memberikan identitas visual yang konsisten. Aplikasi ini menggunakan elemen Desain Material seperti Card untuk item daftar, Typography untuk gaya teks, dan Shapes untuk tampilan gambar, yang semuanya menciptakan pengalaman pengguna yang modern dan menarik. Struktur dasar aplikasi memanfaatkan Scaffold untuk mengatur tata letak, memastikan tampilan yang responsif dan intuitif di berbagai perangkat.

Langkah-Langkah Memulai Proyek Woof di Android Studio

  1. Membuka Kode Awal di Android Studio:

    • Buka Android Studio.
    • Buka proyek Woof yang telah disediakan.

  2. Membuka dan Memahami File Dog.kt:

    • Arahkan ke com.example.woof > data > Dog.kt.
    • File ini berisi data class Dog yang digunakan untuk mewakili informasi anjing seperti foto, nama, usia, dan hobi.
    • Perhatikan juga daftar anjing yang disediakan di dalam file ini, karena data ini akan digunakan di aplikasi.

  3. Meninjau Aset Gambar:

    • Buka folder res > drawable.
    • Periksa semua aset gambar yang disertakan dalam proyek, termasuk ikon aplikasi, gambar anjing, dan ikon lainnya.

  4. Meninjau File strings.xml:

    • Buka folder res > values > strings.xml.
    • File ini berisi string yang digunakan dalam aplikasi, termasuk nama aplikasi, nama anjing, deskripsi, dan lainnya.

  5. Meninjau MainActivity.kt:

    • Buka file MainActivity.kt.
    • File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto, nama, dan usia anjing.
    • Perhatikan beberapa composable utama:
      • WoofApp(): Berisi LazyColumn yang menampilkan DogItem.
      • DogItem(): Berisi Row yang menampilkan foto anjing dan informasi tentangnya.
      • DogIcon(): Menampilkan foto anjing.
      • DogInformation(): Menampilkan nama dan usia anjing.
      • WoofPreview(): Memungkinkan Anda melihat pratinjau aplikasi di panel Design.

  6. Memastikan Emulator/Perangkat Bertema Terang:

    • Buka aplikasi Setelan di perangkat/emulator Anda.
    • Cari opsi Tema gelap.
    • Pastikan Tema gelap tidak aktif (nonaktifkan jika aktif).

  7. Menjalankan Kode Awal:

    • Jalankan aplikasi di emulator atau perangkat fisik.
    • Lihat daftar yang menampilkan anjing beserta foto, nama, dan usianya.
    • Perhatikan bahwa meskipun aplikasi sudah berfungsi, tampilannya masih perlu diperbaiki untuk terlihat lebih menarik.
Berikut merupakan tampilan dari kode awal ketika dijalankan :


Kemudian berikut merupakan kode yang telah dimodifikasi :
  1. Penggunaan Scaffold dan Penambahan App Bar:

    • Scaffold:
      • Scaffold adalah composable dari Jetpack Compose yang menyediakan struktur tata letak dasar aplikasi dengan slot untuk elemen-elemen umum seperti topBar, bottomBar, floatingActionButton, dll. Ini membantu dalam mengatur tata letak aplikasi dengan cara yang konsisten.
      • topBar di sini diisi dengan WoofTopBarApp, yang merupakan composable baru yang ditambahkan untuk menampilkan App Bar.
    • LazyColumn dengan contentPadding:
      • LazyColumn di dalam Scaffold diberikan contentPadding yang berasal dari lambda it. Ini memastikan bahwa konten daftar tidak tertutup oleh elemen-elemen dari Scaffold seperti topBar.
  2. Penambahan Card untuk Item Daftar:

    • Card:
      • Card adalah composable yang digunakan untuk menampilkan item dalam bentuk kartu dengan efek elevasi dan batas yang memberikan tampilan yang lebih menarik dan terstruktur.
      • Di sini, Card membungkus seluruh konten DogItem, memberikan tampilan yang lebih baik pada item daftar.
  3. Penambahan clip dan ContentScale pada Gambar:

    • clip:
      • clip digunakan untuk memotong gambar dengan bentuk tertentu. Di sini, gambar dipotong dengan bentuk kecil dari tema material menggunakan MaterialTheme.shapes.small.
    • ContentScale:
      • contentScale diatur ke ContentScale.Crop yang memastikan bahwa gambar di-crop agar sesuai dengan ukuran yang ditentukan, mengisi seluruh ruang yang tersedia dan memotong bagian yang berlebih.
  4. Penambahan WoofTopBarApp:

    • CenterAlignedTopAppBar:

      • CenterAlignedTopAppBar adalah composable dari Material 3 yang menampilkan App Bar dengan judul yang disejajarkan di tengah.

    • Row:

      • Di dalam CenterAlignedTopAppBar, sebuah Row digunakan untuk menampilkan logo aplikasi dan nama aplikasi secara horizontal.
      • verticalAlignment = Alignment.CenterVertically memastikan bahwa elemen-elemen dalam Row disejajarkan secara vertikal di tengah.

    • Image:

      • Menampilkan logo aplikasi menggunakan painterResource(R.drawable.ic_woof_logo).

    • Text:

      • Menampilkan nama aplikasi menggunakan stringResource(R.string.app_name) dan gaya teks yang diatur menggunakan MaterialTheme.typography.displayLarge.
  5. Penggunaan MaterialTheme.typography pada DogInformation:

    • Text dengan MaterialTheme.typography:
      • MaterialTheme.typography.displayMedium: Digunakan untuk gaya teks nama anjing, memberikan tampilan yang lebih besar dan mencolok.
      • MaterialTheme.typography.bodyLarge: Digunakan untuk gaya teks umur anjing, memberikan tampilan teks yang lebih besar dan mudah dibaca.
Berikut ini merupakan hasil modifikasi yang telah dilakukan :

Tampilan Light Mode

                                                                Tampilan Dark Mode


 

Komentar

Posting Komentar

Postingan Populer