MEMBUAT APLIKASI WOOF

Nama : Naily Khairiya

NRP : 5025201244

Kelas : PPB - I

Dalam era digital saat ini, desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) memainkan peran krusial dalam pengembangan aplikasi mobile. Salah satu pendekatan desain yang telah mendapatkan popularitas adalah desain Material, yang diperkenalkan oleh Google pada tahun 2014. Desain Material menawarkan prinsip-prinsip desain yang jelas dan konsisten, serta panduan visual yang berfokus pada kesederhanaan, fungsionalitas, dan estetika. Penerapan tema Material dapat memberikan pengalaman pengguna yang lebih baik, meningkatkan daya tarik visual, serta memudahkan navigasi dalam aplikasi.

Aplikasi Woof, yang dirancang untuk komunitas pecinta anjing, bertujuan untuk memanfaatkan keuntungan dari tema Material dalam rangka meningkatkan interaksi dan keterlibatan pengguna. Penerapan tema Material pada aplikasi Woof mencakup berbagai aspek desain, seperti tata letak, tipografi, ikonografi, dan penggunaan warna.  Aplikasi Woof adalah aplikasi yang menampilkan daftar anjing dengan menggunakan Desain Material untuk membuat tampilan dan pengalaman aplikasi yang menarik. Berikut merupakan langkah untuk membuat Aplikasi Woof.

1️⃣ Persiapan

Desain Material adalah sistem desain yang dikembangkan oleh Google untuk menciptakan pengalaman digital berkualitas tinggi di Android dan platform lainnya. Panduan ini membantu membangun UI aplikasi yang mudah dibaca, menarik, dan konsisten. Dalam blog ini, akan mempelajari penerapan Tema Material, termasuk penyesuaian warna, tipografi, dan bentuk, serta cara menambahkan panel aplikasi atas. Prasyarat meliputi pemahaman bahasa Kotlin, kemampuan membangun tata letak di Compose, dan membuat daftar sederhana.

2️⃣ Ringkasan Aplikasi

Dalam blog ini, akan membuat Woof, yaitu aplikasi yang menampilkan daftar anjing dan menggunakan Desain Material untuk membuat pengalaman aplikasi yang menarik seperti pada tutorial codelab. 

Palet warna

Berikut adalah palet warna untuk tema terang dan gelap yang akan kita buat.

Tipografi

Berikut adalah gaya jenis yang akan digunakan di aplikasi.

3️⃣ Mendapatkan Kode Awal

Buat clone repositori GitHub untuk kode awal :

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof.git
$ cd basic-android-kotlin-compose-training-woof
$ git checkout starter

Pelajari kode awal dan pastikan emulator bertema terang. Apabila dijalankan maka aplikasi akan seperti pada gambar berikut.

4️⃣ Menambah Warna

Hal pertama yang akan diubah di aplikasi Woof adalah skema warna. Skema warna adalah kombinasi warna yang digunakan aplikasi. Kombinasi warna yang berbeda membangkitkan suasana hati yang berbeda, yang memengaruhi perasaan orang saat menggunakan aplikasi Anda. Warna, dalam sistem Android, diwakili oleh nilai warna heksadesimal (hex). Kode warna heksadesimal dimulai dengan tanda pagar (#), dan diikuti dengan enam huruf dan/atau angka yang mewakili komponen merah, hijau, dan biru (RGB) dari warna tersebut. Dua huruf/angka pertama merujuk ke warna merah, dua huruf berikutnya berwarna hijau, dan dua huruf terakhir mengacu pada warna biru.

Kode warna heksadesimal dapat menyertakan nilai alfa yang menunjukkan transparansi. Nilai alfa (#00 hingga #FF) ditempatkan sebagai dua karakter pertama setelah tanda pagar (#), di mana #00 adalah 0% opasitas (transparan) dan #FF adalah 100% opasitas (solid). Jika nilai alfa tidak disertakan, dianggap sebagai #FF (100% opasitas).

Menggunakan Material Theme Builder untuk membuat skema warna

Untuk membuat skema warna kustom bagi aplikasi, gunakan Material Theme Builder.

1. Buka Material Theme Builder melalui tautan ini.
2. Di panel kiri, klik "Primary" di bagian Core Colors.
3. Gunakan Pemilih Warna HCT untuk memilih warna kustom. Masukkan #006C4C di kotak teks untuk mengatur warna primer aplikasi menjadi hijau.
4. Aplikasi akan memperbarui skema warnanya sesuai perubahan ini.
5. Scroll ke bawah untuk melihat skema warna lengkap untuk tema terang dan gelap yang dihasilkan.

Peran utama warna:

Primer: Untuk komponen utama UI.

Sekunder: Untuk komponen non-utama UI.

Tersier: Untuk aksen kontras.

On colors: Untuk teks, ikon, dan goresan di atas warna lain (misalnya, onSurface dan onPrimary).

Dengan langkah ini, Anda dapat menambahkan palet warna yang indah ke aplikasi.

Menambahkan palet warna ke tema

Di halaman Material Theme Builder, ada opsi untuk mengklik tombol "Export" guna mengunduh file Color.kt dan Theme.kt dengan tema kustom yang telah dibuat.

Export: Mengunduh file tema kustom.

Catatan: File Theme.kt tidak menyertakan kode untuk warna dinamis.

Penggunaan: Jika digunakan untuk proyek lain, perbarui nama paket sesuai dengan nama paket proyek Anda.

1. Buka file Color.kt dan ganti konten dengan kode di bawah ini untuk menyalin dalam skema warna baru.

package com.example.woof.ui.theme

import androidx.compose.ui.graphics.Color

val md_theme_light_primary = Color(0xFF006C4C)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFF89F8C7)
val md_theme_light_onPrimaryContainer = Color(0xFF002114)
val md_theme_light_secondary = Color(0xFF4D6357)
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Color(0xFFCFE9D9)
val md_theme_light_onSecondaryContainer = Color(0xFF092016)
val md_theme_light_tertiary = Color(0xFF3D6373)
val md_theme_light_onTertiary = Color(0xFFFFFFFF)
val md_theme_light_tertiaryContainer = Color(0xFFC1E8FB)
val md_theme_light_onTertiaryContainer = Color(0xFF001F29)
val md_theme_light_error = Color(0xFFBA1A1A)
val md_theme_light_errorContainer = Color(0xFFFFDAD6)
val md_theme_light_onError = Color(0xFFFFFFFF)
val md_theme_light_onErrorContainer = Color(0xFF410002)
val md_theme_light_background = Color(0xFFFBFDF9)
val md_theme_light_onBackground = Color(0xFF191C1A)
val md_theme_light_surface = Color(0xFFFBFDF9)
val md_theme_light_onSurface = Color(0xFF191C1A)
val md_theme_light_surfaceVariant = Color(0xFFDBE5DD)
val md_theme_light_onSurfaceVariant = Color(0xFF404943)
val md_theme_light_outline = Color(0xFF707973)
val md_theme_light_inverseOnSurface = Color(0xFFEFF1ED)
val md_theme_light_inverseSurface = Color(0xFF2E312F)
val md_theme_light_inversePrimary = Color(0xFF6CDBAC)
val md_theme_light_shadow = Color(0xFF000000)
val md_theme_light_surfaceTint = Color(0xFF006C4C)
val md_theme_light_outlineVariant = Color(0xFFBFC9C2)
val md_theme_light_scrim = Color(0xFF000000)

val md_theme_dark_primary = Color(0xFF6CDBAC)
val md_theme_dark_onPrimary = Color(0xFF003826)
val md_theme_dark_primaryContainer = Color(0xFF005138)
val md_theme_dark_onPrimaryContainer = Color(0xFF89F8C7)
val md_theme_dark_secondary = Color(0xFFB3CCBE)
val md_theme_dark_onSecondary = Color(0xFF1F352A)
val md_theme_dark_secondaryContainer = Color(0xFF354B40)
val md_theme_dark_onSecondaryContainer = Color(0xFFCFE9D9)
val md_theme_dark_tertiary = Color(0xFFA5CCDF)
val md_theme_dark_onTertiary = Color(0xFF073543)
val md_theme_dark_tertiaryContainer = Color(0xFF244C5B)
val md_theme_dark_onTertiaryContainer = Color(0xFFC1E8FB)
val md_theme_dark_error = Color(0xFFFFB4AB)
val md_theme_dark_errorContainer = Color(0xFF93000A)
val md_theme_dark_onError = Color(0xFF690005)
val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
val md_theme_dark_background = Color(0xFF191C1A)
val md_theme_dark_onBackground = Color(0xFFE1E3DF)
val md_theme_dark_surface = Color(0xFF191C1A)
val md_theme_dark_onSurface = Color(0xFFE1E3DF)
val md_theme_dark_surfaceVariant = Color(0xFF404943)
val md_theme_dark_onSurfaceVariant = Color(0xFFBFC9C2)
val md_theme_dark_outline = Color(0xFF8A938C)
val md_theme_dark_inverseOnSurface = Color(0xFF191C1A)
val md_theme_dark_inverseSurface = Color(0xFFE1E3DF)
val md_theme_dark_inversePrimary = Color(0xFF006C4C)
val md_theme_dark_shadow = Color(0xFF000000)
val md_theme_dark_surfaceTint = Color(0xFF6CDBAC)
val md_theme_dark_outlineVariant = Color(0xFF404943)
val md_theme_dark_scrim = Color(0xFF000000)

2. Buka file Theme.kt dan ganti konten dengan kode di bawah ini untuk menambahkan warna baru ke tema.

package com.example.woof.ui.theme

import android.app.Activity
import android.os.Build
import android.view.View
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

private val LightColors = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    secondary = md_theme_light_secondary,
    onSecondary = md_theme_light_onSecondary,
    secondaryContainer = md_theme_light_secondaryContainer,
    onSecondaryContainer = md_theme_light_onSecondaryContainer,
    tertiary = md_theme_light_tertiary,
    onTertiary = md_theme_light_onTertiary,
    tertiaryContainer = md_theme_light_tertiaryContainer,
    onTertiaryContainer = md_theme_light_onTertiaryContainer,
    error = md_theme_light_error,
    errorContainer = md_theme_light_errorContainer,
    onError = md_theme_light_onError,
    onErrorContainer = md_theme_light_onErrorContainer,
    background = md_theme_light_background,
    onBackground = md_theme_light_onBackground,
    surface = md_theme_light_surface,
    onSurface = md_theme_light_onSurface,
    surfaceVariant = md_theme_light_surfaceVariant,
    onSurfaceVariant = md_theme_light_onSurfaceVariant,
    outline = md_theme_light_outline,
    inverseOnSurface = md_theme_light_inverseOnSurface,
    inverseSurface = md_theme_light_inverseSurface,
    inversePrimary = md_theme_light_inversePrimary,
    surfaceTint = md_theme_light_surfaceTint,
    outlineVariant = md_theme_light_outlineVariant,
    scrim = md_theme_light_scrim,
)

private val DarkColors = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
    secondary = md_theme_dark_secondary,
    onSecondary = md_theme_dark_onSecondary,
    secondaryContainer = md_theme_dark_secondaryContainer,
    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
    tertiary = md_theme_dark_tertiary,
    onTertiary = md_theme_dark_onTertiary,
    tertiaryContainer = md_theme_dark_tertiaryContainer,
    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
    error = md_theme_dark_error,
    errorContainer = md_theme_dark_errorContainer,
    onError = md_theme_dark_onError,
    onErrorContainer = md_theme_dark_onErrorContainer,
    background = md_theme_dark_background,
    onBackground = md_theme_dark_onBackground,
    surface = md_theme_dark_surface,
    onSurface = md_theme_dark_onSurface,
    surfaceVariant = md_theme_dark_surfaceVariant,
    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
    outline = md_theme_dark_outline,
    inverseOnSurface = md_theme_dark_inverseOnSurface,
    inverseSurface = md_theme_dark_inverseSurface,
    inversePrimary = md_theme_dark_inversePrimary,
    surfaceTint = md_theme_dark_surfaceTint,
    outlineVariant = md_theme_dark_outlineVariant,
    scrim = md_theme_dark_scrim,
)

@Composable
fun WoofTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = false,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColors
        else -> LightColors
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            setUpEdgeToEdge(view, darkTheme)
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        shapes = Shapes,
        typography = Typography,
        content = content
    )
}

/**
 * Sets up edge-to-edge for the window of this [view]. The system icon colors are set to either
 * light or dark depending on whether the [darkTheme] is enabled or not.
 */
private fun setUpEdgeToEdge(view: View, darkTheme: Boolean) {
    val window = (view.context as Activity).window
    WindowCompat.setDecorFitsSystemWindows(window, false)
    window.statusBarColor = Color.Transparent.toArgb()
    val navigationBarColor = when {
        Build.VERSION.SDK_INT >= 29 -> Color.Transparent.toArgb()
        Build.VERSION.SDK_INT >= 26 -> Color(0xFF, 0xFF, 0xFF, 0x63).toArgb()
        // Min sdk version for this app is 24, this block is for SDK versions 24 and 25
        else -> Color(0x00, 0x00, 0x00, 0x50).toArgb()
    }
    window.navigationBarColor = navigationBarColor
    val controller = WindowCompat.getInsetsController(window, view)
    controller.isAppearanceLightStatusBars = !darkTheme
    controller.isAppearanceLightNavigationBars = !darkTheme
}

3. Jalankan kembali aplikasi Anda, perhatikan bahwa panel aplikasi telah otomatis berubah warna.

Pemetaan warna

Komponen material otomatis dipetakan ke slot warna sesuai tema, termasuk komponen utama seperti Floating Action Button (FAB) yang disetel ke warna primer secara default. Tidak perlu menetapkan warna secara eksplisit, tetapi bisa menggantinya dalam kode jika diperlukan.

Untuk menggabungkan Row dengan DogIcon() dan DogInformation() dalam Card di fungsi composable DogItem() seperti berikut,

 File dimensi

Sama seperti strings.xml untuk menyimpan string, sebaiknya gunakan dimens.xml untuk menyimpan nilai dimensi agar tidak perlu hard code dan dapat diubah di satu tempat. Buka app > res > values > dimens.xml untuk melihat nilai dimensi seperti padding_small, padding_medium, dan image_size. Di WoofApp(), tambahkan modifier dengan padding_small dalam panggilan ke DogItem(). 

Tema gelap

Di Android, ada opsi untuk mengalihkan perangkat ke tema gelap, yang menggunakan warna lebih gelap dan tenang. Aplikasi dapat menggunakan Gelap Otomatis, di mana sistem menerapkan tema gelap. Namun, lebih baik jika Anda menerapkan tema gelap sendiri untuk kontrol penuh atas tema aplikasi. 

Melihat Tema Gelap dalam Pratinjau

Buat pratinjau seperti berikut.

@Preview
@Composable
fun WoofDarkThemePreview() {
   WoofTheme(darkTheme = true) {
       WoofApp()
   }
}

Warna Dinamis

Material 3 berfokus pada personalisasi pengguna dengan fitur baru bernama Warna Dinamis, yang menyesuaikan tema aplikasi berdasarkan wallpaper pengguna. Fitur ini tersedia di perangkat yang menjalankan Android 12 dan yang lebih baru. Tema kustom digunakan untuk aplikasi dengan warna branding yang kuat dan untuk perangkat yang tidak mendukung tema dinamis. Untuk mengaktifkan warna dinamis, buka Theme.kt dan buka composable WoofTheme(), lalu setel parameter dynamicColor ke benar.

@Composable
fun WoofTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
   dynamicColor: Boolean = true,
   content: @Composable () -> Unit
)

5️⃣ Menambahkan Bentuk

Bentuk sangat memengaruhi tampilan dan nuansa composable, mampu menarik perhatian, mengidentifikasi komponen, mengomunikasikan status, dan mengekspresikan merek. RoundedCornerShape adalah bentuk yang sering digunakan, dengan angka yang diteruskan menentukan kebulatan sudut (misalnya, 0.dp untuk sudut persegi, 50.dp untuk sudut sepenuhnya bulat). Anda dapat menyesuaikan lebih lanjut dengan menentukan kebulatan sudut setiap sisi. Di file Shape.kt, bentuk komponen ditentukan berdasarkan ukuran (kecil, sedang, besar). Anda akan mengubah Card menjadi bentuk lingkaran untuk gambar anjing, dan mengubah bentuk item daftar.

Membentuk gambar anjing menjadi lingkaran

1. Buka file Shape.kt dan perhatikan bahwa parameter kecil ditetapkan ke RoundedCornerShape(50.dp). Ini akan digunakan untuk membentuk gambar menjadi lingkaran.

2. Buka MainActivity.kt. Di DogIcon(), tambahkan atribut clip ke modifier dari Image; tindakan ini akan memotong gambar menjadi sebuah bentuk. Teruskan MaterialTheme.shapes.small

3. Untuk membuat semua foto menjadi lingkaran, tambahkan atribut ContentScale dan Crop; tindakan ini akan memangkas gambar agar sesuai. Perlu diketahui bahwa contentScale adalah atribut dari Image, dan bukan bagian dari modifier.

Menambahkan bentuk ke item daftar

Kita akan menambahkan bentuk ke item daftar menggunakan Card dalam bagian ini. Card adalah komponen media yang bisa diberi dekorasi seperti batas dan bentuk. Dalam aplikasi ini, Anda akan menambahkan bentuk ke item daftar.

6️⃣ Menambahkan Typografi

Tentukan di mana menambahkan direktori font di Android Studio, unduh font Montserrat dari Google Fonts, dan inisialisasi font dalam proyek. Setelah inisiasi berhasil dilakukan langkah selanjutnya menambahkan tipografi ke teks aplikasi.

7️⃣ Menambahkan Panel Atas

Scaffold adalah tata letak yang menyediakan slot untuk berbagai komponen dan elemen layar, seperti Image, Row, atau Column. Scaffold juga menyediakan slot untuk TopAppBar, yang akan Anda gunakan di bagian ini. TopAppBar dapat digunakan untuk berbagai tujuan, tetapi dalam hal ini, Anda akan menggunakannya untuk branding dan memberikan karakteristik pada aplikasi. Ada empat jenis TopAppBar: tengah, kecil, sedang, dan besar. Dalam codelab ini, Anda akan menerapkan panel aplikasi atas di tengah. Anda akan membuat composable yang terlihat seperti screenshot di bawah, dan memasukkannya ke bagian topBar dari Scaffold.

KESIMPULAN

Penerapan Tema Material memungkinkan Anda untuk menggunakan Desain Material di aplikasi Anda, dengan panduan tentang penyesuaian warna, tipografi, dan bentuk. Anda dapat menentukan warna, bentuk, dan tipografi aplikasi Anda di file Theme.kt, Color.kt, Shape.kt, dan Type.kt. Aplikasi Anda juga dapat mengikuti tema gelap otomatis sistem, atau Anda dapat memiliki kontrol penuh atas tema untuk memberikan pengalaman pengguna yang lebih baik. Penerapan Tema Material memudahkan Anda untuk membuat aplikasi yang indah dan konsisten dengan Desain Material.

code lengkap dapat dilihat pada https://github.com/nailykhry/aplikasi-woof-ppb