Beranda
Android

Belajar Android : Membuat Aplikasi TwoActivitie

Tutorial Android: buat aplikasi dua layar dengan Kotlin, kirim data via Intent dan putExtra, layout XML ConstraintLayout di Android Studio terbaru.

Hampir semua aplikasi Android punya lebih dari satu layar. Aplikasi catatan punya layar daftar dan layar tulis, aplikasi belanja punya layar katalog dan layar detail produk. Di Android, setiap layar seperti itu disebut Activity, dan berpindah dari satu Activity ke Activity lain sambil membawa data adalah keterampilan dasar yang wajib dikuasai. Di resep kali ini kita akan membuat aplikasi sederhana bernama TwoActivities: layar pertama berisi kolom teks dan sebuah tombol, lalu saat tombol ditekan, teks yang ditulis akan dikirim dan ditampilkan di layar kedua.

Tutorial ini ditulis mengikuti kondisi terkini. Kode memakai Kotlin sebagai bahasa utama karena itu bahasa resmi yang direkomendasikan Google untuk pengembangan Android. Kalau kamu lebih nyaman dengan Java, polanya persis sama, hanya sintaksnya berbeda, jadi anggap saja contoh Kotlin di bawah sebagai panduan logikanya.

Ilustrasi dua layar ponsel Android yang saling bertukar pesan di dapur Kompor Kode

Alat dan bahan

Siapkan Android Studio versi terbaru, saat artikel ini ditulis versi stabilnya adalah Quail 4 (2026.1.4), lengkap dengan Android SDK dan satu emulator (atau HP fisik untuk testing). Saat membuat project baru, atur minimum SDK ke API 26 (Android 8.0). Angka ini realistis untuk tahun ini karena sudah mencakup hampir semua perangkat aktif, dan kamu tidak perlu lagi pusing mengurus perangkat jadul seperti di zaman API 15. Target SDK biarkan mengikuti bawaan template terbaru.

Langkah 1: buat project baru

Buka Android Studio, pilih New Project, lalu pilih template Empty Views Activity. Isi nama aplikasi TwoActivities, pastikan bahasanya Kotlin, minimum SDK API 26, lalu klik Finish. Template ini otomatis membuatkan MainActivity beserta layoutnya, jadi layar pertama sudah setengah jadi.

Langkah 2: susun layout layar pertama

Buka res/layout/activity_main.xml dan ganti isinya dengan layout berikut. Kita memakai ConstraintLayout karena ini layout bawaan template modern yang fleksibel untuk mengatur posisi tiap komponen.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="24dp">

    <TextView
        android:id="@+id/teks_judul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/judul_utama"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/teks_petunjuk"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/petunjuk"
        app:layout_constraintTop_toBottomOf="@id/teks_judul"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <EditText
        android:id="@+id/edit_pesan"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/hint_pesan"
        android:inputType="text"
        app:layout_constraintTop_toBottomOf="@id/teks_petunjuk"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/tombol_kirim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/kirim"
        app:layout_constraintTop_toBottomOf="@id/edit_pesan"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Susunannya sederhana: dua TextView untuk judul dan petunjuk, satu EditText tempat pengguna menulis pesan, dan satu Button di bawahnya. Perhatikan tiap komponen punya id unik, karena id inilah yang dipakai kode Kotlin untuk menemukan komponen tersebut.

Langkah 3: siapkan teks dan ukuran di resource

Praktik yang baik di Android adalah tidak menulis teks langsung di layout, melainkan menyimpannya di res/values/strings.xml agar mudah diterjemahkan dan diubah:

<string name="judul_utama">Layar Pertama</string>
<string name="petunjuk">Tulis pesan, lalu tekan tombol kirim.</string>
<string name="hint_pesan">Tulis pesan di sini</string>
<string name="kirim">Kirim</string>
<string name="judul_kedua">Layar Kedua</string>

Kalau butuh ukuran yang dipakai berulang, file res/values/dimens.xml masih tersedia di Android Studio modern untuk menyimpan nilai seperti ukuran teks atau margin.

Langkah 4: buat layout layar kedua

Klik kanan folder res/layout, pilih New, Layout Resource File, beri nama activity_second. Isi dengan tampilan yang mirip layar pertama, tapi kali ini hanya butuh satu TextView besar untuk menampilkan pesan yang dikirim:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="24dp">

    <TextView
        android:id="@+id/teks_judul_kedua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/judul_kedua"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/teks_terima"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        app:layout_constraintTop_toBottomOf="@id/teks_judul_kedua"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Langkah 5: buat SecondActivity dan daftarkan di manifest

Klik kanan package aplikasi di folder java, pilih New, Kotlin Class/File, beri nama SecondActivity. Karena dibuat manual (bukan lewat wizard), Activity baru ini harus didaftarkan di AndroidManifest.xml agar dikenali sistem:

<activity
    android:name=".SecondActivity"
    android:exported="false" />

Tulis di dalam tag application, sejajar dengan deklarasi MainActivity yang sudah ada.

Langkah 6: kirim pesan dari MainActivity

Inilah bagian intinya. Buka MainActivity.kt dan tulis kodenya seperti ini:

package com.komporkode.twoactivities

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    companion object {
        const val EXTRA_PESAN = "com.komporkode.twoactivities.PESAN"
    }

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

        val editPesan = findViewById<EditText>(R.id.edit_pesan)
        val tombolKirim = findViewById<Button>(R.id.tombol_kirim)

        tombolKirim.setOnClickListener {
            val pesan = editPesan.text.toString()
            val intent = Intent(this, SecondActivity::class.java)
            intent.putExtra(EXTRA_PESAN, pesan)
            startActivity(intent)
        }
    }
}

Ada tiga hal penting di sini. Pertama, Intent adalah objek yang dipakai Android untuk meminta sesuatu ke sistem, dalam hal ini meminta membuka Activity lain secara eksplisit. Kedua, putExtra menempelkan data (teks dari EditText) ke Intent tersebut dengan sebuah kunci bernama EXTRA_PESAN. Ketiga, startActivity mengeksekusi permintaan itu sehingga layar kedua terbuka.

Ilustrasi amplop hijau Android yang membawa data sebagai konsep Intent antar Activity

Bayangkan Intent seperti amplop surat: di sampulnya tertulis alamat tujuan (SecondActivity), di dalamnya ada suratnya (data pesan). Sistem Android bertugas mengantar amplop itu ke alamat yang tepat.

Langkah 7: terima pesan di SecondActivity

Sekarang buka SecondActivity.kt dan tulis kode penerimanya:

package com.komporkode.twoactivities

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

class SecondActivity : AppCompatActivity() {

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

        val teksTerima = findViewById<TextView>(R.id.teks_terima)
        val pesan = intent.getStringExtra(MainActivity.EXTRA_PESAN)
        teksTerima.text = pesan
    }
}

Setiap Activity punya properti intent yang berisi Intent yang membukanya. Dengan getStringExtra dan kunci yang sama persis, pesan yang dikirim dari layar pertama bisa dibaca lalu ditampilkan di TextView.

Ilustrasi tangan menekan tombol kirim pada layar ponsel untuk membuka layar kedua

Langkah 8: jalankan dan uji

Tekan tombol Run (ikon segitiga hijau) dan pilih emulator atau HP yang terhubung. Ketik sesuatu di kolom teks, tekan tombol kirim, dan layar kedua akan terbuka menampilkan persis teks yang kamu tulis. Kalau teksnya muncul dengan benar, selamat, aplikasi TwoActivities-mu sudah jadi.

Troubleshooting: kalau aplikasinya error

Tiga masalah paling sering muncul di resep ini dan cara mengatasinya:

  • Aplikasi force close saat tombol ditekan. Kemungkinan besar SecondActivity lupa didaftarkan di AndroidManifest.xml. Cek kembali langkah 5, pastikan tag activity-nya ada di dalam tag application.
  • Teks tidak muncul di layar kedua. Pastikan kunci yang dipakai di putExtra dan getStringExtra persis sama. Itu sebabnya kunci disimpan sebagai konstanta EXTRA_PESAN, supaya tidak salah ketik.
  • findViewById mengembalikan null. Artinya id yang dicari tidak ada di layout yang sedang dipakai. Pastikan kamu memanggil setContentView dengan layout yang benar sebelum mencari komponen, dan id di XML sama persis dengan yang ditulis di kode.

Satu tambahan kecil: pengguna bisa saja menekan tombol kirim tanpa menulis apa-apa. Kalau mau rapi, tambahkan validasi sederhana seperti if (pesan.isBlank()) return@setOnClickListener sebelum membuat Intent, supaya pesan kosong tidak ikut terkirim.

Catatan pola modern: Activity Result API

Contoh di atas memakai startActivity satu arah, dan itu masih sepenuhnya valid sampai sekarang. Tapi kalau suatu saat kamu butuh layar kedua mengembalikan data ke layar pertama (misalnya layar pilih kontak yang mengembalikan nama terpilih), cara lamanya startActivityForResult sudah ditinggalkan. Pola modernnya memakai Activity Result API: daftarkan registerForActivityResult dengan kontrak ActivityResultContracts.StartActivityForResult(), lalu di Activity tujuan panggil setResult dan finish(). Hasilnya akan mendarat di callback yang kamu daftarkan, lebih rapi dan aman terhadap lifecycle.

Penutup

Dari resep ini kamu sudah mempraktikkan fondasi navigasi Android: membuat dua Activity, menyusun layout XML dengan ConstraintLayout, mengirim data lewat Intent dan putExtra, lalu membacanya kembali dengan getStringExtra. Pola kirim terima data ini akan terus muncul di aplikasi yang lebih besar, misalnya membuka halaman detail produk sambil membawa ID produk, atau membuka halaman profil sambil membawa nama pengguna. Kuasai pola sederhananya dulu, sisanya tinggal variasi.