Android Academy · Pelajaran

Tata Letak & Tampilan

Rancang UI dengan tata letak XML. Gunakan ConstraintLayout, LinearLayout, dan tampilan umum seperti TextView, Button, ImageView, serta EditText.

Tata Letak & Tampilan adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 7. 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 7 pelajaran total.

Membangun UI dengan XML

UI Android ditentukan dalam file tata letak XML yang disimpan di res/layout/. Tata letak tersebut menjelaskan struktur dan tampilan layar Anda — tampilan mana yang ditampilkan dan di mana letaknya.

Kode Kotlin Anda kemudian mengembangkan tata letak ini dan berinteraksi dengan tampilan tersebut saat runtime.

Jenis Tampilan Umum

Widget View yang paling sering digunakan:

TextView — menampilkan teks
EditText — kolom input teks
Button — tombol yang dapat diklik
ImageView — menampilkan gambar
CheckBox — mengaktifkan atau menonaktifkan pilihan
Switch — sakelar aktif/nonaktif (Material)

ConstraintLayout

ConstraintLayout adalah tata letak yang direkomendasikan untuk sebagian besar layar. Anda dapat memosisikan tampilan relatif terhadap satu sama lain atau terhadap induknya menggunakan batasan — seperti menghubungkan titik jangkar.

Hierarki datar — tidak memerlukan tata letak bertingkat
Fleksibel — mendukung ukuran layar apa pun
Digunakan secara default dalam proyek Android Studio baru

XML ConstraintLayout

TextView yang diposisikan di tengah layar dalam ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout menyusun tampilan dalam satu baris atau kolom:

android:orientation="vertical" — menumpuk tampilan dari atas ke bawah
android:orientation="horizontal" — menyusun tampilan berdampingan
android:layout_weight — membagi ruang yang tersisa secara proporsional

Sederhana dan mudah diprediksi, tetapi hindari penumpukan yang terlalu dalam.

Atribut Tata Letak Utama

Setiap View memiliki atribut penting berikut:

layout_width / layout_height: match_parent, wrap_content, atau nilai dp tetap
id: digunakan untuk merujuk tampilan dalam Kotlin
margin: ruang di luar tampilan
padding: ruang di dalam tampilan

Gunakan dp untuk ukuran (piksel yang tidak bergantung pada kepadatan) dan sp untuk ukuran teks.

ScrollView

Jika konten lebih tinggi daripada layar, bungkus konten tersebut dalam ScrollView:

Hanya dapat berisi satu turunan langsung (biasanya LinearLayout)
Pengguliran vertikal secara default
Gunakan HorizontalScrollView untuk pengguliran horizontal

Untuk daftar dinamis yang panjang, gunakan RecyclerView — cara ini lebih efisien.

Menemukan Tampilan dalam Kode

Ada dua cara untuk mengakses tampilan dalam kode Kotlin Anda:

findViewById(R.id.tvTitle) — cara klasik, mengembalikan tampilan berdasarkan ID
ViewBinding — pendekatan modern: membuat kelas binding dari XML, sehingga semua tampilan dapat diakses dengan keamanan tipe

ViewBinding sangat direkomendasikan — Anda akan mempelajarinya dalam pelajaran berikutnya.

Menggunakan findViewById

Mengakses dan mengubah tampilan dari onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Pemeriksaan Cepat

Unit apa yang sebaiknya digunakan untuk ukuran teks dalam tata letak Android?

Ringkasan: Tata Letak & Tampilan

Sekarang Anda dapat merancang layar Android:

UI ditentukan dalam file tata letak XML di res/layout/
Tampilan umum: TextView, EditText, Button, ImageView
ConstraintLayout — fleksibel, datar, dan direkomendasikan
LinearLayout — penyusunan baris/kolom yang sederhana
Gunakan dp untuk ukuran dan sp untuk teks
Akses tampilan dalam Kotlin dengan findViewById

Berikutnya: jadikan UI interaktif dengan menangani input pengguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tata Letak & Tampilan” gratis?

Ya — teks lengkap “Tata Letak & Tampilan” 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 7 pelajaran total.

Apa yang akan aku pelajari di “Tata Letak & Tampilan”?

Rancang UI dengan tata letak XML. Gunakan ConstraintLayout, LinearLayout, dan tampilan umum seperti TextView, Button, ImageView, serta EditText. 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 3 dari 7.

Berapa lama pelajaran “Tata Letak & Tampilan” 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