Tutorial Jetpack Compose: Text

Pada tutorial kali ini, kita akan belajar bagaimana membuat UI text pada jetpack compose.

Introduction

Teks menjadi bagian penting dari setiap UI, dan Jetpack Compose memudahkan untuk menampilkan atau menulis teks. Compose memanfaatkan Composable blok, yang berarti kita tidak perlu overwrite properti dan method atau memperluas kelas untuk memiliki desain dan logic yang dapat dikomposisikan sesuai keinginan kita.

Compose menyediakan BasicText dan BasicTextField sebagai dasar yang merupakan barebone untuk menampilkan teks dan menangani input user. Pada level yang lebih tinggi, Compose menyediakan Text dan TextField, yang dapat dikomposisi mengikuti Material Design guidelines. Disarankan untuk menggunakannya karena memiliki tampilan dan nuansa yang tepat untuk pengguna di Android, dan menyertakan opsi lain untuk menyederhanakan penyesuaiannya tanpa harus menulis banyak kode (efisiensi).

Baik langsung saja kita ke pengimplementasiannya di aplikasi.

Basic Text

Menampilkan text biasa di jetpack compose. Caranya cukup panggil composable function Text() lalu isi text diparamaternya.

@Composable
fun BasicText() {
    Text("Hello World")
}

Styling Text

Text punya banyak parameter untuk styling text, Berikut cara styling text yang paling banyak digunakan.

Membuat text bercetak tebal

Untuk membuat text bercetak tebal, kalian hanya perlu mengisi parameter fontWeight dengan FontWeight.bold.

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

Ganti warna text

Mengganti warna pada text, ada parameter color yang bisa kalian gunakan, isi parameter tersebut dengan Color Integer seperti Color(0xFF000000) atau menggunakan Color yang sudah desediakan seperti berikut

@Composable
fun ColorText() {
    Text("Hello World", color = Color.Blue)
}

Membuat text bercetak miring

Parameter fontStyle, berguna untuk mengubah style text, apakah bercetak itu normal atau italic.

@Composable
fun ItalicText(){
    Text("Hello World", fontStyle = FontStyle.Italic)
}

Mengganti ukuran font

Kalian juga bisa mengubah ukuran font dengan parameter fontSize, isi parameter tersebut dengan Extension-Function Int.sp.

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

Text allignment

textAlign berfungsi mengganti allignment pada text. Ada beberapa variasi dari textAlign yaitu Left (rata kiri), Right (rata kanan), Center (rata tengah), Justify, Start (rata depan), dan End (rata akhir).

fun CenterText() {
    Text("Hello World", textAlign = TextAlign.Center,
        modifier = Modifier.width(150.dp))
}

Menggunakan font dari resource

Sebelum menggunakan font pastikan font sudah didownload di res/font.

Setelah itu, buat font family nya agar mudah digunakan. Kode berikut berada di ui/theme/Type.kt.

val poppinsFamily = FontFamily(
    Font(R.font.poppins_light, FontWeight.Light),
    Font(R.font.poppins_regular, FontWeight.Normal),
    Font(R.font.poppins_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.poppins_medium, FontWeight.Medium),
    Font(R.font.poppins_bold, FontWeight.Bold)
)

Untuk penggunaannya setel fontFamily sesuai dengan yang sudah kalian buat sebelumnya, lalu tentukan weight atau ketebalannya sesuai keiinginan kalian.

Column {
    Text("Font Light", fontFamily = poppinsFamily, fontWeight = FontWeight.Light)
    Text("Font Normal", fontFamily = poppinsFamily, fontWeight = FontWeight.Normal)
    Text("Font Italic", fontFamily = poppinsFamily, fontWeight = FontWeight.Normal,
    fontStyle = FontStyle.Italic)
    Text("Font Medium", fontFamily = poppinsFamily, fontWeight = FontWeight.Medium)
    Text("Font Bold", fontFamily = poppinsFamily, fontWeight = FontWeight.Bold)
}

Dari kode diatas akan tampil UI seperti berikut

Kesimpulan

Nah itu dia tutorial singkat penggunaan text di jetpack compose. Kalau kalian pengen tahu lebih banyak tentang Text silahkan kunjungi halaman resminya di https://developer.android.com/jetpack/compose/text