Android Academy · Pelajaran

Membangun Kartu Profil

Gabungkan composable menjadi satu layar.

Pelajaran 4 dari 413 langkah

Membangun Kartu Profil adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Tujuan Kita

Saatnya menggabungkan yang telah Anda pelajari. Kita akan membuat kartu profil sederhana: nama dan jabatan yang ditumpuk dengan rapi dalam kotak bergaya.

Dalam prosesnya, Anda akan mengenal Modifier, yang mengatur ukuran, jarak, dan tampilan composable.

Mengenal Modifier

Modifier mengubah tampilan dan perilaku composable. Anda meneruskannya melalui parameter modifier yang diterima oleh sebagian besar composable.

Modifier menangani padding, ukuran, warna latar belakang, batas, dan lainnya. Modifier adalah cara utama untuk menghias UI di Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Merangkai Modifier

Anda membuat modifier dengan merangkai pemanggilan menggunakan titik. Setiap pemanggilan menghasilkan modifier baru, sehingga Anda dapat menumpuk beberapa modifier sekaligus.

Urutan penting: padding sebelum background berbeda dari padding setelahnya. Bacalah rangkaian dari kiri ke kanan, seperti resep.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Memenuhi Lebar

Modifier fillMaxWidth membuat composable melebar memenuhi seluruh ruang horizontal yang tersedia. Modifier ini cocok untuk kartu yang harus membentang selebar layar.

Tersedia juga fillMaxSize untuk kedua arah, serta size untuk menetapkan lebar dan tinggi tetap.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Menambahkan Padding

Padding menambahkan ruang di dalam composable, antara tepinya dan kontennya. Gunakan Modifier.padding dengan nilai dp.

Padding mencegah teks menyentuh tepi kartu, sehingga layout terasa nyaman dan rapi.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Memberi Latar Belakang pada Kartu

Warna latar belakang membantu kartu tampak menonjol. Terapkan dengan modifier background dan nilai warna.

Padukan dengan padding agar area berwarna memiliki ruang yang cukup di sekitar teks di dalamnya.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Menumpuk Nama dan Jabatan

Di dalam Column kartu, kita menumpuk dua teks: nama tebal di atas dan jabatan yang lebih ringan di bawahnya.

Menetapkan nilai fontSize dan fontWeight yang berbeda menciptakan hierarki visual yang jelas di antara keduanya.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Membuatnya Dapat Digunakan Kembali

Mari ubah kartu menjadi composable yang dapat digunakan kembali dan menerima name serta title sebagai parameter. Kini kartu tersebut dapat menampilkan siapa saja.

Ini adalah gagasan yang sama dari pelajaran pertama: masukkan data, lalu gunakan kembali UI di mana saja.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

Kartu Profil Lengkap

Berikut kartu dengan semua bagian yang disatukan: column selebar layar, latar belakang abu-abu, padding, dan dua baris teks bergaya.

Perhatikan bagaimana rangkaian modifier dan elemen anak column menggabungkan semua hal dari pelajaran sebelumnya menjadi satu composable yang rapi.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

Melihat Pratinjau Kartu

Tambahkan pembungkus @Preview agar Anda dapat melihat kartu di Android Studio. Pembungkus ini memanggil ProfileCard dengan data contoh dan menampilkan latar belakang.

Sekarang Anda dapat menyesuaikan padding atau warna dan melihat hasilnya diperbarui seketika.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Menampilkannya di Layar

Untuk menampilkan kartu di aplikasi yang sedang berjalan, panggil kartu tersebut di dalam setContent pada aktivitas Anda. Dengan begitu, composable terhubung ke layar langsung.

Anda kini telah beralih dari satu composable menjadi komponen UI lengkap yang dapat digunakan kembali.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Pemeriksaan Singkat

Mari tinjau cara composable memperoleh padding, ukuran, dan latar belakangnya.

Jawab di pelajaran interaktif

Rangkuman

Anda telah membuat kartu profil lengkap dengan menggabungkan Text, Column, dan Modifier. Modifier memungkinkan Anda merangkai padding, fillMaxWidth, dan background untuk membentuk serta menata UI.

Anda membuat kartu yang dapat digunakan kembali dengan parameter name dan title, melihat pratinjaunya dengan @Preview, dan menampilkannya melalui setContent. Itulah layar composable lengkap dari awal hingga akhir. Selamat!

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 36
Pelajaran: 152

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Kartu Profil” gratis?

Ya — teks lengkap “Membangun Kartu Profil” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Kartu Profil”?

Gabungkan composable menjadi satu layar. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Membangun Kartu Profil” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy