Composable Text

Nabhyla Niagara Rannuan, 5025221286

Fungsi Composable digunakan untuk merender halaman User Interface (UI). Misalnya, fungsi Greeting pada kode menerima nama sebagai parameter dan menampilkan pesan sapaan di layar.

Modifikasi

Modifikasi yang dilakukan adalah dengan mengubah font dengan menambahkan di folder res/font, kemudian menambahkan Box, lalu TextAlign.Center agar teks berada di tengah, juga mengubah warna background dan font.

Untuk melakukan perubahan-perubahan di atas, maka perlu mengimpor beberapa properti, seperti text.font.Font, text.font.FontFamily, text.style.TextAlign, graphics.Color.

Source : https://drive.google.com/file/d/1NL1aHyXvdQJPWpkR4c4cpYYOl6Rkq11Y/view?usp=sharing

Kode Lengkap

package com.example.tugas3

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.tugas3.ui.theme.Tugas3Theme
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.graphics.Color

val interSemiBold = FontFamily(Font(R.font.inter_semibold))

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Tugas3Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.Black
                ) {
                    GreetingText(
                        message = "happy birthday..",
                        from = "i miss you, i really do.",
                        modifier = Modifier.padding(16.dp),
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        Column(
            modifier = modifier.fillMaxWidth()
        ) {
            Text(
                text = message,
                fontSize = 30.sp,
                fontFamily = interSemiBold,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth(),
                color = Color.White
            )
            Text(
                text = from,
                fontSize = 13.sp,
                fontFamily = interSemiBold,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth(),
                color = Color.White
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    Tugas3Theme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            GreetingText(message = "happy birthday..", from = "i miss you, i really do.")
        }
    }
}

Hasil

Link Github

https://github.com/nabhylanr/Composable-Text.git

Video