Penerapan Tema Material - Membuat Aplikasi Woof

 Moch. Avin (5025221061)

Pemrograman Perangkat Bergerak - PPB G
Link Repo Github:  https://github.com/mochavin/ppb-aplikasi-woof

Tampilan Utama & Komponen UI

Aplikasi ini menggunakan Scaffold sebagai kerangka utama, dengan CenterAlignedTopAppBar yang menampilkan logo aplikasi (ic_woof_logo.xml) dan nama aplikasi "Woof".

Daftar anjing ditampilkan secara efisien menggunakan LazyColumn. Setiap item dalam daftar merupakan sebuah Card yang berisi:

  • Foto Anjing: Sebuah Image yang menampilkan foto anjing, di-clip dengan bentuk MaterialTheme.shapes.small (RoundedCornerShape 50.dp).

  • Informasi Anjing :

    • Nama anjing (Text dengan gaya MaterialTheme.typography.displayMedium).

    • Usia anjing 

    • Hobi anjing (Text dengan gaya MaterialTheme.typography.bodySmall).

    • Semua informasi ini disusun menggunakan Row dan Column dengan padding yang sesuai dari dimens.xml.

Data Anjing

Informasi mengenai setiap anjing disimpan dalam data class Dog yang berada di data/Dog.kt. Struktur datanya meliputi:

  • imageResourceId: ID drawable untuk foto anjing.

  • name: ID string untuk nama anjing.

  • age: Usia anjing (Integer).

  • hobbies: ID string untuk hobi anjing.

Semua data anjing ini disediakan dalam sebuah list bernama dogs di file yang sama.

Theming

kustomisasi pada tema:

  • Warna di Color.kt

  • Bentuk Menggunakan Shapes kustom, contohnya small = RoundedCornerShape(50.dp) dan medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp).

  • Tipografi: font kustom di res/font/:

    • AbrilFatface (untuk displayLarge).

    • Montserrat (Regular & Bold untuk displayMedium, labelSmall, bodyLarge).

  • Tema: mengaplikasikan semua kustomisasi warna, bentuk, dan tipografi. Selain itu,

    • Dukungan tema gelap sistem (isSystemInDarkTheme()).

Assets

  • Font: abril_fatface_regular.ttf, montserrat_bold.ttf, montserrat_regular.ttf di res/font/.

  • Drawable: Selain gambar-gambar anjing, terdapat ic_woof_logo.xml .

  • Strings: Semua teks aplikasi, termasuk nama dan deskripsi anjing, didefinisikan di res/values/strings.xml.

Demo Video

Link Repo Github:  https://github.com/mochavin/ppb-aplikasi-woof

Comments

Post a Comment

Popular posts from this blog

Pengumpulan EAS Pemrograman Perangkat Bergerak G

Image
📚 PerpustakaanKu Aplikasi Manajemen Perpustakaan Modern dengan Android & Jetpack Compose 👥 Tim Pengembang 👨‍💻 Muhammad Rayyaan Fatikhahur Rakhim NRP: 5025221047 👨‍💻 Moch. Avin NRP: 5025221061 👨‍💻 Abiyu Ramadhan Kiesly NRP: 5025221123 🎓 Final Project PPB - Pemrograman Perangkat Bergerak Institut Teknologi Sepuluh Nopember (ITS) - 2025 📎 Resource Links Akses dokumentasi lengkap, presentasi, dan demo aplikasi melalui link berikut: 📊 Presentasi PPT 🎥 Demo Video 💻 Source Code 📱 ...
Read more

Tugas 5 - Membuat Aplikasi Kalkulator Sederhana

Moch. Avin (5025221061) Pemrograman Perangkat Bergerak - PPB G Link Repo Github:  https://github.com/mochavin/ppb-simplecalculator MainActivity.kt package com.example.simplecalculator import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.KeyboardType 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 com.example.simplecalculator.ui.theme.SimpleCalculatorTheme class MainActivity : ComponentActivity() { override fun onCreat...
Read more

Tugas 6 - Membuat aplikasi currency converter sederhana

Moch. Avin (5025221061) Pemrograman Perangkat Bergerak - PPB G Link Repo Github:  https://github.com/mochavin/ppb-currencyconverter/ MainActivity.kt: package com.example.currencyconverter import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled. ArrowDropDown import androidx.compose.material3.Button import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.Icon impo...
Read more