TUGAS 2 PERTEMUAN 3

 NAMA    : Mohammad Nouval Bachrezi

NRP         : 5025201030

KELAS    : PPBF

TAHUN   : 2024

Hello World

Jadi disini disuruh membuat Hello World menggunakan android studio dan menggunakan Jetpack Compose dimana Jetpack Compose adalah toolkit UI modern yang diperkenalkan Google untuk mempermudah pengembangan user interface di platform Android. berikut implementasi tugasnya :

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 Nouval",
    nrp = "5025201030",
    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)
    }

}

Gambar Ui :