Memperbaharui Teks, Mengubah Latar belakang, dan Menambahkan Padding pada Android Studio

Muhamad ilham mubarrok
3 min readMar 16, 2023

Hallo guys, sebelumnya kita telah membahah bagaimana cara mendownload dan menset up Android Studio, selanjutnya kita akan memperbaharui teks, mengubah latar belakang dan menambahkan padding, so ikutin tutorial berikut ini ya guys.

pada awal tampilan kalian akan di tampilkan lay out seperti ini,

bagai mana cara menampilkan tampilan tersebut, kalian hanya perlu mengclick bagian split pada kanan atas seperti ini,

pada bagian awal anda di suguhkan kode seperti ini,

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
GreetingCardTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}
}

@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GreetingCardTheme {
Greeting("Meghan")
}
}

langkah pertama kalian harus mengubah bagian ini menjadi “Hallo nama saya “,

@Composable
fun Greeting(name: String) {
Text(text = "Hallo nama saya $name!")
}

langkah ke-dua ganti teks berikut dengan nama anda, seperti contoh dibawah ini, saya memberikan nama kunyuk

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GreetingCardTheme {
Greeting("kunyuk")
}
}

langkah ke-tiga, untuk menambahkan warna pada latar belakang kalian harus menambahkan parents seperti surface dengan memencet tombol alt+enter, setelah itu nanti akan di suguhi tampilan sebagai berikut,

pilih surround with widget, lalu pilih surround with container,

maka tampilan akan seperti ini,

@Composable
fun Greeting(name: String) {
Surface() {
Text(text = "Hi, my name is $name!")
}
}

lalu tambahkan color di dalam kurung surface,

@Composable
fun Greeting(name: String) {
Surface(color = Color) {
Text(text = "Hi, my name is $name!")
}
}

kalian perlu mengimport code berikut ini,

import androidx.compose.ui.graphics.Color

selesai mengimport tambahkan colo.blue dan tampilan akan seperti berikut,

langkah selanjutnya kita menambahkan padding dengan menambahkan modifier pada samping text seperti berikut ini,

Text(text = "hallo nama saya $name", modifier = Modifier.padding(10.dp))

jangan lupa untuk menambahkan import seperti berikut ini,

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

maka tampilan dari code kita akan seperti ini,

selamat kita telah menyelesaikan sesi kali ini, jangan bosan dalam mengembangkan ilmu yang kalian miliki keep read and smart, have a nice day.

--

--