Nama    : Danno Denis Dhaifullah

NRP      : 5025211027

Kelas     : PPB - D

 Tugas 3 PPB

Memodifikasi Aplikasi Sederhana dengan Menerapkan Composable Text

Composable Text

Dalam ekosistem pengembangan aplikasi Android yang terus berkembang, Jetpack Compose hadir sebagai solusi modern dan efisien untuk membangun antarmuka pengguna (UI). Framework ini menyederhanakan proses pembuatan UI dengan pendekatan deklaratif yang intuitif, memungkinkan pengembang menulis kode lebih ringkas dan mudah dipelihara. Salah satu elemen paling fundamental dalam Jetpack Compose adalah komponen Text, yang digunakan untuk menampilkan teks di layar. Komponen ini sangat fleksibel dan dapat disesuaikan dengan berbagai gaya dan format, seperti ukuran huruf, warna, dan jenis font sesuai dengan kebutuhan desain aplikasi.

Tutorial ini mempelajari cara menggunakan Text dalam konteks Jetpack Compose melalui Android Studio. Sebagai langkah awal, Anda akan membangun UI sederhana yang menampilkan pesan "Happy Birthday Sam!" dengan ukuran font besar. Dari situ, Anda akan diperkenalkan pada berbagai teknik styling teks, termasuk pengaturan warna, ukuran font, serta integrasi dengan tipografi tema aplikasi.

Tutorial ini dirancang untuk mulai memahami konsep dasar Jetpack Compose. Selain itu, panduan ini juga berfungsi sebagai fondasi yang kuat bagi Anda yang ingin mengembangkan aplikasi Android yang lebih kompleks dan dinamis di masa mendatang.

Code

package com.example.a5025211027_tugas3ppb

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.graphics.Color

import androidx.compose.ui.text.font.FontFamily

import androidx.compose.ui.text.font.FontWeight

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.a5025211027_tugas3ppb.ui.theme._5025211027_Tugas3PPBTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            _5025211027_Tugas3PPBTheme {

                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,

            fontWeight = FontWeight.Bold,

            fontFamily = FontFamily.SansSerif,

            color = Color.Blue

        )

        Text(

            text = from,

            fontSize = 36.sp,

            fontWeight = FontWeight.Bold,

            fontFamily = FontFamily.SansSerif,

            color = Color.Red,

            modifier = Modifier

                .padding(16.dp)

                .align(alignment = Alignment.End)

        )

    }

}

@Preview(showBackground = true)

@Composable

fun GreetingPreview() {

    _5025211027_Tugas3PPBTheme {

        GreetingText(message = "Happy Birthday Sam!", from = "From Emma")

    }

}

Sebelum Modifikasi

Setelah Modifikasi

Modifikasi

1. Menambahkan bold pada teks.
2. Menambahkan font family.
3. Memberikan warna biru untuk message.
4. Memberikan warna merah untuk from.

Dilakukan dengan cara:

1. Tambahkan fontWeight = FontWeight.Bold untuk membuat teks tebal
2. Tambahkan fontFamily = FontFamily.SansSerif
3. Tambahkan color = Color.Blue untuk teks message
4. Tambahkan color = Color.Red untuk teks from
5. Import Color, FontFamily, dan FontWeight.

Link GitHub dapat diakses di sini.

Link demo dapat diakses di sini.