PPB - PERTEMUAN 3

 

DOKUMENTASI PPB

Nama : Dawamul Fikri Aqil

NRP : 5025201025

Kelas : PPB F

Tahun : 2024

Tugas : HelloWorld

---

DOKUMENTASI TUGAS

PENDAHULUAN

Pada pertemuan ke 3, penulis diajarkan materi mengenai "Jetpack Compose". Jetpack Compose adalah toolkit UI modern yang diperkenalkan Google untuk mempermudah pengembangan user interface di platform Android. Dibangun di atas bahasa pemrograman Kotlin, Jetpack Compose mengadopsi pendekatan deklaratif dalam mendesain UI. Artinya, developer dapat mendeskripsikan tampilan dan UI behavior menggunakan serangkaian fungsi tanpa perlu khawatir tentang detail implementasi. 
Setelah diajarkan materi penulis diberikan tugas untuk membuat aplikasi HelloWorld sederhana. Untuk implementasi tugas ada di bawah ini.

IMPLEMENTASI CODE

package com.example.helloworld

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
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.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.style.TextAlign
import com.example.helloworld.ui.theme.HelloWorldTheme

data class UserInfo(
    val hello: String,
    val name: String,
    val nrp: String,
    val profileImageResId: Int // Resource ID of the profile image
)

val userInfo = UserInfo(
    hello = "Hello World!",
    name = "NAMAKU FIKRI",
    nrp = "5025201025",
    profileImageResId = R.mipmap.profile_image // Replace with the resource ID of your profile image
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            HelloWorldTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ProfilePage(userInfo)
                }
            }
        }
    }
}

@Composable
fun ProfilePage(userInfo: UserInfo) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier.padding(16.dp)
        ) {
            // Apply circular border to the image
            Image(
                painter = painterResource(id = userInfo.profileImageResId),
                contentDescription = "Profile Image",
                modifier = Modifier
                    .size(150.dp)
                    .clip(CircleShape)
                    .border(
                        width = 2.dp,
                        color = MaterialTheme.colorScheme.primary,
                        shape = CircleShape
                    )
                    .padding(2.dp),
                contentScale = ContentScale.Crop
            )
        }
        Text(
            text = userInfo.hello,
            style = MaterialTheme.typography.headlineMedium,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(8.dp)
        )
        Text(
            text = userInfo.name,
            style = MaterialTheme.typography.bodyMedium,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(8.dp)
        )
        Text(
            text = userInfo.nrp,
            style = MaterialTheme.typography.bodyMedium,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(8.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HelloWorldTheme {
        ProfilePage(userInfo)
    }
}

TAMPILAN UI