Tugas 3 Interactive Button "Dice Roller" App

Nama : Dilla Wahdana
NRP : 5025211060
Kelas : PPB B

Interactive Button "Dice Roller" App

Membuat Proyek

1. Buka Android Studio dan buat proyek baru dengan cara klik File > New > New Project.
2. Pilih opsi Empty Activity dalam dialog New Project, kemudian klik Next.
3. Isi Nama proyek dengan "Dice Roller" dan pilih tingkat API minimum 24 (Nougat) dalam kolom Minimum SDK, lalu klik Finish.

Mengubah Struktur Kode

1. Hapus fungsi DefaultPreview().
2, Buat fungsi baru bernama DiceWithButtonAndImage() dengan menggunakan anotasi @Composable.
3. Hapus juga fungsi Greeting(name: String).
4. Buat fungsi DiceRollerApp() dan tambahkan anotasi @Preview dan @Composable.
5. Bersihkan semua kode di dalam lambda setContent{} dalam metode onCreate().
6. Dalam lambda setContent{}, panggil lambda DiceRollerTheme{}. Di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp().
7. Dalam fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().

Menambahkan Modifiers

1. Modifikasi fungsi DiceWithButtonAndImage() untuk menerima argumen modifier berjenis Modifier dengan memberikan nilai default Modifier.
2. Saat memanggil fungsi DiceWithButtonAndImage(), lewatkan modifier sebagai parameter. Ini mengubah tanda tangan metode sehingga objek Modifier harus disertakan saat dipanggil.
3. Kelas Modifier digunakan untuk menambahkan dekorasi atau perilaku tambahan pada komponen di dalam fungsi DiceRollerApp().
4. Beberapa dekorasi penting dapat ditambahkan ke objek Modifier yang akan dilewatkan ke fungsi DiceWithButtonAndImage().
5. Tambahkan metode fillMaxSize() ke objek Modifier agar tata letak mengisi seluruh layar.
6. Berikan metode wrapContentSize() ke objek Modifier, dengan Alignment.Center sebagai argumen, untuk memusatkan komponen secara vertikal dan horizontal.

Membuat Tata Letak Vertikal

1. Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
2. Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen modifier Column().
3. Berikan argumen horizontalAlignment ke fungsi Column(), kemudian atur nilainya ke Alignment.CenterHorizontally.

Menambahkan Button

1. Di file strings.xml, tambahkan string baru dan tetapkan nilainya ke "Roll".
2. Di dalam lambda Column(), tambahkan fungsi Button().
3. Di dalam file MainActivity.kt, tambahkan fungsi Text() ke dalam Button() dalam lambda fungsi.
4. Teruskan ID resource string untuk string "roll" ke dalam fungsi stringResource() dan gunakan hasilnya dalam composable Text.

Mendownload Gambar Dadu

1. Buka tautan untuk mengunduh file zip gambar dadu ke komputer dan tunggu hingga selesai.
2. Ekstrak file zip untuk membuat folder baru bernama dice_images yang berisi enam file gambar dadu dengan nilai dadu dari 1 sampai 6.

Menambahkan Gambar Dadu ke Aplikasi

1. Buka Android Studio, klik View > Tool Windows > Resource Manager.
2. Klik + > Import Drawables untuk membuka jendela penjelajah file.
3. Cari dan pilih enam folder gambar dadu, lalu lanjutkan untuk mengunggahnya.
4. Klik Next.
5. Dialog Import Drawables akan muncul, menampilkan lokasi file sumber daya dalam struktur file.
6. Klik Import untuk mengonfirmasi impor enam gambar tersebut.

Menambahkan Composable Image

1. Di dalam fungsi Column(), tambahkan fungsi Image() sebelum fungsi Button().
2. Teruskan argumen painter ke fungsi Image(), dan tentukan nilai dengan painterResource yang menggunakan ID resource drawable sebagai argumen. Untuk saat ini, gunakan ID resource berikut: R.drawable.dice_1.
3. Sertakan juga argumen contentDescription dengan nilai "1".

Berikut Tampilannya:

Tugas 2 Membuat aplikasi Happy Birthday

Nama    : Dilla Wahdana

NRP      : 5025211060

Kelas    : PPB B

 ANDROID STUDIO

HAPPY BIRTHDAY APP

Pada tugas kali ini, kami ditugaskan untuk membuat sebuah tampilan sederhana "Happy Birthday" pada aplikasi android studio. Brikut adalah penjelasan singkat mengenai bagian-bagian yang telah saya kerjakan dalam pembuatan tugas ini:
Jetpack Compose adalah toolkit modern untuk membangun UI Android. Jetpack Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan lebih sedikit kode, alat yang canggih, dan API Kotlin yang intuitif.
Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang Anda lihat di layar: teks, gambar, tombol, dan berbagai jenis elemen lainnya.
Fungsi composable adalah elemen penyusun dasar Compose. Fungsi composable adalah fungsi yang mendeskripsikan beberapa bagian UI Anda.
Fungsi composable dianotasi menggunakan anotasi @Composable; anotasi ini memberi tahu compiler Compose bahwa fungsi ini dimaksudkan untuk mengonversi data menjadi UI.
Tiga elemen tata letak standar dan dasar di Compose adalah Column, Row,, dan Box. Tiga elemen tersebut adalah fungsi Composable yang menggunakan konten Composable sehingga Anda dapat menempatkan item di dalamnya. Misalnya, setiap turunan dalam Row akan ditempatkan berdampingan secara horizontal.Membuat Project Empty Activity

1. Pada dialog Welcome to Android Studio, pilih New Project.
2. Pada dialog New Project, pilih Empty Activity, lalu klik Next.
3. Isi kolom Name dengan Happy Birthday, pilih level API minimum 24 (Nougat) di kolom Minimum SDK, dan klik Finish.

package com.example.happybirthday

4. Baru kita akan mulai Membuat Aplikasi "Happy Birthday" berikut code yang saya buat

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        message = "Happy Birthday Sam!",
                        from = "From Emma",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
    }
}

Referensi:
1. https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html
2. https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0
3. https://medium.com/@zyrridian/jetpack-compose-3-membangun-aplikasi-sederhana-dengan-composable-t-28997eb393df