Tugas 4 PPB D

Nama : Charles
NRP : 5025211082

Tugas ini dikerjakan sesuai dengan referensi yang diberikan yakni https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app?hl=id#8. Pada tugas ini diminta untuk membuat aplikasi dice roller sederhana. Untuk hasilnya sendiri setelah mengikuti tutorialnya adalah sebagai berikut.

Dadu itu juga bisa di roll sehingga akan berubah angkanya.


Berikut kode full untuk aplikasi di atas:
package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.diceroller.ui.theme.DiceRollerTheme
import androidx.compose.foundation.layout.Column
import androidx.compose.ui.Alignment
import androidx.compose.material3.Button
import androidx.compose.ui.res.stringResource
import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.Spacer
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                DiceRollerApp()
            }
        }
    }
}

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(R.string.roll))
        }
    }
}



Kemudian berikut dilakukan sedikit modifikasi dengan menambahkan background image dan juga menampilkan nomor yang didapatkan.



Berikut kode fullnya untuk kode yang dimodifikasi:
package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.diceroller.ui.theme.DiceRollerTheme
import androidx.compose.foundation.layout.Column
import androidx.compose.ui.Alignment
import androidx.compose.material3.Button
import androidx.compose.ui.res.stringResource
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.res.painterResource
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.Spacer
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ButtonDefaults
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                DiceRollerApp()
            }
        }
    }
}

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }
    Box(
        modifier = modifier.fillMaxSize()
    ) {
        Image(
            painter = painterResource(R.drawable.background_image), // Add your image in res/drawable
            contentDescription = "Background",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )

        Column(
            modifier = modifier,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
                    .padding(8.dp)
            ) {
                Text(
                    text = "Rolled: $result",
                    color = Color.White
                )
            }
            Image(
                painter = painterResource(imageResource),
                contentDescription = result.toString()
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(
                onClick = { result = (1..6).random() },
                colors = ButtonDefaults.buttonColors(containerColor = Color.Red) // Button color changed
            ) {
                Text(stringResource(R.string.roll), color = Color.White)
            }
        }
    }
}


Link Presentasi : https://youtu.be/1kF1aCWYS9A


Comments

Post a Comment

Popular posts from this blog

Tugas 1 PPB D

Image
  Tugas 1 Infografis PPB D Charles - 5025211082 Evolusi Teknologi Perangkat Bergerak 1. 1970s-1990s Martin Cooper melakukan panggilan telepon seluler pertama menggunakan prototipe model Dynatac Motorola. Pada 1992 pengiriman pesan teks pertama yang berisi “ Merry Christmas ” terjadi. 2. 1990s-2000 Flip phone pertama yang ringan dan portabel menandai pergeseran desain ponsel. Nokia 3310 yang ikonik, terkenal dengan daya tahan yang kuat. 3. 2000s-2010 Peluncuran iPhone generasi pertama pada tahun 2007 menandai perubahan revolusioner yang beralih dari keyboard fisik ke antarmuka layar sentuh. 4. 2010s-2020 Perdebatan Apple vs. Android dimulai tahun 2008, peluncuran Samsung Galaxy S pada tahun 2010, menandai mulainya persaingan smartphone Sekitar 48.72% populasi global memiliki ponsel pintar pada masa ini. 5. 2020s-Sekarang Ponsel cerdas modern memiliki kinerja yang signifikan, dengan peningkatan memori, kamera HD, dan desain tahan lama yang menjadi standar. AI pada ponsel pintar menj...
Read more

Tugas 2 PPB

Image
Tugas 2 :  Membuat Aplikasi Hello Android Nama : Charles NRP : 5025211082 Kelas : PPB D Pada tugas 2 PPB ini diminta untuk membuak aplikasi sederhana yang dapat menampilkan hello. Untuk tugas ini diminta untuk mengikuti langkah-langkah yang ada di  https://developer.android.com/codelabs/jetpack-compose-basics?hl=id#0. Berikut merupakan hasil pengerjaan saya mengikuti langkah-langkah tersebut Pertama terdapat greeting preview yang merupakan sebuah preview untuk function greeting bisa dilihat hasilnya seperti di gambar. Di greeting preview ini terdapat dua tema, yang satunya dark theme kemudian yang satu lagi light theme. Kemudian terdapat juga onboarding screen yang merupakan screen yang pertama kali muncul ketika aplikasi dijalankan. Terakhir berikut merupakan full preview dari aplikasi ketika dijalankan secara interaktif. Pertama akan muncul onboarding screen dulu. Ketika continue di tekan akan muncul tampilan seperti dibawah. Kemudian untuk masing-masing tab nya bisa ditekan...
Read more

Tugas 5 PPB D

Image
 Tugas 5 PPB D Nama : Charles NRP : 5025211082 Kelas PPB D Pada pertemuan ini tugasnya berupa membuat aplikasi kalkulator menggunakan bahasa pemrograman kotlin di android studio. Untuk referensi yang digunakan kali ini adalah di sini  https://www.youtube.com/watch?v=HlE8MEtKBr0 . Cukup mengikuti dari referensi saja maka aplikasi kalkulatornya pun bisa dibuat. Berikut merupakan hasil pengerjaannya. Untuk kode lengkapnya sebagai berikut: package com.example.calculator import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material3.Text import androidx.compose.ui.Modifier import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width import androidx.compose.material3.Button import androidx.compose...
Read more