Contoh Program Android Merubah Background

Mari kita buat contoh program Android yang sangat umum bagi pemula: mengubah warna background aplikasi dengan menekan tombol. Ini adalah cara yang bagus untuk memahami dasar-dasar interaksi pengguna dan manipulasi tampilan (UI).

Kita akan menggunakan Android Studio dengan bahasa pemrograman Kotlin, yang merupakan bahasa modern dan direkomendasikan oleh Google untuk pengembangan Android.

Tutorial Android Pemula: Membuat Aplikasi Pengubah Warna Background

Halo, developer! Kali ini kita akan membuat aplikasi Android pertama kita yang sederhana namun fundamental. Aplikasi ini akan memiliki beberapa tombol, dan ketika salah satu tombol ditekan, warna latar belakang layar akan berubah.

Yuk, kita mulai!

Langkah 1: Siapkan Proyek Baru di Android Studio

Buka Android Studio.
Pilih “New Project”.
Pilih template “Empty Views Activity” dan klik “Next”.
Konfigurasi proyekmu:
- Name: Aplikasi Pengubah Background (atau nama lain yang kamu suka)
- Package name: (biasanya otomatis terisi)
- Save location: Pilih folder tempat kamu ingin menyimpan proyek.
- Language: Pastikan kamu memilih Kotlin.
- Minimum SDK: Biarkan default saja (biasanya sekitar API 24).
Klik “Finish”. Android Studio akan menyiapkan proyekmu.

Langkah 2: Mendesain Tampilan (Layout XML)

Sekarang kita akan mendesain antarmuka pengguna (UI). Kita akan menambahkan beberapa tombol ke dalam file layout.

Buka file app/res/layout/activity_main.xml.
Secara default, kamu mungkin akan melihat TextView dengan tulisan “Hello World!”. Hapus saja TextView tersebut.
Kita akan menggunakan LinearLayout agar tombol-tombol tersusun rapi secara vertikal.

Ganti seluruh isi file activity_main.xml dengan kode di bawah ini:

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pilih Warna Background"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_marginBottom="32dp"/>

    <Button
        android:id="@+id/btnMerah"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Merah"
        android:layout_marginBottom="8dp"/>

    <Button
        android:id="@+id/btnHijau"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hijau"
        android:layout_marginBottom="8dp"/>

    <Button
        android:id="@+id/btnBiru"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Biru"
        android:layout_marginBottom="8dp"/>

    <Button
        android:id="@+id/btnReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"
        android:layout_marginTop="24dp"/>

</LinearLayout>

Penjelasan Kode XML:

LinearLayout: Wadah utama yang menyusun elemen di dalamnya secara vertikal (android:orientation="vertical").
android:id="@+id/...": Ini adalah identitas unik untuk setiap elemen. Kita akan menggunakan ID ini di kode Kotlin untuk mengenali elemen mana yang dimaksud.
Button: Elemen tombol yang bisa diklik oleh pengguna.
TextView: Elemen untuk menampilkan teks.

Langkah 3: Menambahkan Logika pada Kode Kotlin

Sekarang saatnya memberikan “nyawa” pada tombol-tombol yang sudah kita buat.

Buka file app/java/nama.paket.kamu/MainActivity.kt.
Di dalam kelas MainActivity, kita akan menghubungkan elemen dari XML dan menambahkan aksi (listener) pada setiap tombol.

Ganti isi file MainActivity.kt dengan kode berikut:

Kotlin

package com.example.aplikasipengubahbackground // Sesuaikan dengan package name kamu

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.LinearLayout

class MainActivity : AppCompatActivity() {

    // Deklarasikan variabel untuk menampung view
    private lateinit var mainLayout: LinearLayout
    private lateinit var tombolMerah: Button
    private lateinit var tombolHijau: Button
    private lateinit var tombolBiru: Button
    private lateinit var tombolReset: Button

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

        // Hubungkan variabel dengan view di XML menggunakan ID-nya
        mainLayout = findViewById(R.id.main_layout)
        tombolMerah = findViewById(R.id.btnMerah)
        tombolHijau = findViewById(R.id.btnHijau)
        tombolBiru = findViewById(R.id.btnBiru)
        tombolReset = findViewById(R.id.btnReset)

        // Atur listener untuk setiap tombol
        tombolMerah.setOnClickListener {
            // Aksi ketika tombol merah diklik
            mainLayout.setBackgroundColor(Color.RED)
        }

        tombolHijau.setOnClickListener {
            // Aksi ketika tombol hijau diklik
            mainLayout.setBackgroundColor(Color.GREEN)
        }

        tombolBiru.setOnClickListener {
            // Aksi ketika tombol biru diklik
            mainLayout.setBackgroundColor(Color.BLUE)
        }

        tombolReset.setOnClickListener {
            // Aksi ketika tombol reset diklik
            mainLayout.setBackgroundColor(Color.WHITE)
        }
    }
}

Penjelasan Kode Kotlin:

findViewById(R.id....): Ini adalah fungsi untuk mencari dan mendapatkan referensi ke sebuah view (seperti Button atau LinearLayout) yang ada di file layout XML berdasarkan ID-nya.
setOnClickListener: Ini adalah sebuah listener yang akan “mendengarkan” event klik pada sebuah tombol. Blok kode di dalam {} akan dieksekusi setiap kali tombol tersebut diklik.
mainLayout.setBackgroundColor(...): Perintah ini digunakan untuk mengubah warna latar belakang dari mainLayout.
Color.RED, Color.GREEN, dll.: Ini adalah konstanta warna yang sudah disediakan oleh Android.

Langkah 4: Jalankan Aplikasi

Sekarang semuanya sudah siap!

Pilih target untuk menjalankan aplikasi, bisa berupa Emulator (perangkat virtual) atau perangkat Android fisik yang sudah terhubung ke komputermu.
Klik tombol Run ‘app’ (ikon segitiga hijau) di bagian atas Android Studio.

Tunggu beberapa saat hingga aplikasi ter-install dan berjalan. Kamu akan melihat tampilan dengan empat tombol. Coba klik masing-masing tombol dan lihat latar belakangnya berubah warna!

Selamat! Kamu baru saja berhasil membuat aplikasi Android fungsional pertamamu. Dari sini, kamu bisa bereksperimen lebih jauh, misalnya dengan menambahkan lebih banyak warna atau mengubah properti lain selain warna background. Sources