Beranda
Android

Belajar Android : Membuat Aplikasi Scroll Text Sederhana

Tutorial membuat aplikasi ScrollText sederhana dengan ScrollView di Android Studio. Tampilkan teks panjang yang bisa digulir, lengkap dengan kode.
Ilustrasi robot koki membaca HP dengan gulungan kertas panjang yang terurai dari layar

Masalah Klasik: Teks Kepotong Layar

Di artikel sebelumnya kita membuat aplikasi Hello Toast dengan satu TextView dan satu Button yang muat di satu layar. Sekarang bayangkan kamu mau menampilkan artikel panjang, lirik lagu, atau resep masakan yang isinya beberapa paragraf. TextView-nya tidak akan muat, dan teks yang kepotong begitu saja tidak bisa dibaca pengguna.

Solusinya adalah ScrollView: sebuah wadah khusus yang membuat isinya bisa digulir ke atas dan ke bawah dengan gestur usap jari. Ini fondasi untuk aplikasi pembaca artikel, berita, atau ebook sederhana. Tutorial aslinya ditulis tahun 2018 dengan target API 15 dan langkah drag-and-drop yang sudah usang. Artikel ini versi yang ditulis ulang total untuk tahun 2026: Kotlin, minSdk yang realistis, dan XML yang ditulis langsung supaya kamu paham strukturnya.

Langkah 1: Buat Project Baru Bernama ScrollText

Buka Android Studio (seri Quail, 2026.1 atau yang lebih baru), pilih New Project, lalu pilih template Empty Views Activity. Isi formulirnya:

  • Name: ScrollText
  • Package name: com.namakamu.scrolltext (ganti namakamu dengan nama atau domain milikmu)
  • Language: Kotlin
  • Minimum SDK: API 26 (Android 8.0, Oreo)

Klik Finish dan tunggu Gradle sync selesai. Kalau kamu mengikuti artikel Hello Toast sebelumnya, langkah ini pasti sudah terasa familiar. Seperti biasa, kalau kamu lebih nyaman dengan Java, ganti Language menjadi Java, langkah XML-nya tetap sama persis.

Langkah 2: Pahami Dulu Cara Kerja ScrollView

Ilustrasi konsep ScrollView, robot kecil berselancar di atas halaman yang bergulir

Sebelum menulis kode, pahami satu aturan emas ScrollView: dia hanya boleh punya satu anak langsung. Tidak boleh dua, tidak boleh tiga. Satu saja. Karena itu pola yang umum dipakai adalah ScrollView membungkus satu LinearLayout vertikal, lalu semua TextView, gambar, dan komponen lain ditaruh di dalam LinearLayout tersebut.

Analoginya seperti jendela kereta: ScrollView adalah bingkai jendelanya (ukurannya tetap sebesar layar), sedangkan LinearLayout di dalamnya adalah pemandangan panjang yang bergerak saat kereta berjalan. Pengguna mengusap layar, isinya bergeser, bingkainya diam.

Langkah 3: Tulis Layout XML-nya

Buka app/src/main/res/layout/activity_main.xml, hapus isi bawaannya, lalu ganti dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvJudul"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/judul_artikel"
            android:textSize="22sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvSubjudul"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@string/subjudul_artikel"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tvIsi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="@string/isi_artikel"
            android:textSize="15sp"
            android:lineSpacingExtra="4dp" />

    </LinearLayout>

</ScrollView>

Ada tiga atribut yang perlu kamu perhatikan. android:fillViewport="true" membuat isi ScrollView mengisi penuh layar kalau kontennya pendek, jadi tidak ada ruang kosong yang aneh. android:layout_height="wrap_content" pada LinearLayout adalah kuncinya: tingginya mengikuti isi, bukan mengikuti layar, sehingga ScrollView tahu ada bagian yang harus bisa digulir. Dan android:lineSpacingExtra="4dp" memberi napas antarbaris supaya teks panjang nyaman dibaca.

Langkah 4: Isi Teksnya di strings.xml

Seperti biasa, teks tidak ditulis langsung di layout melainkan disimpan di res/values/strings.xml. Buka file itu dan tambahkan:

<resources>
    <string name="app_name">ScrollText</string>
    <string name="judul_artikel">Sejarah Singkat Android</string>
    <string name="subjudul_artikel">Dari startup kecil sampai jadi sistem operasi HP paling populer di dunia</string>
    <string name="isi_artikel">Android lahir dari sebuah startup bernama Android Inc. yang didirikan tahun 2003 dan diakuisisi Google tahun 2005.\n\nVersi komersial pertamanya, Android 1.0, meluncur tahun 2008 bersama HP HTC Dream. Sejak itu Android berkembang pesat: setiap versi membawa perbaikan besar, dari dukungan layar sentuh yang makin mulus sampai toko aplikasi Google Play.\n\nTahun 2017, Google menjadikan Kotlin sebagai bahasa resmi Android. Sejak saat itu, hampir semua dokumentasi dan template baru memakai Kotlin sebagai bahasa utama.\n\nHari ini Android dipakai miliaran perangkat di seluruh dunia, dari HP murah sampai HP lipat. Dan aplikasi sederhana yang sedang kamu buat ini memakai fondasi yang sama dengan aplikasi-aplikasi besar itu: layout XML dan kode Kotlin.</string>
</resources>

Perhatikan tanda \n\n di dalam teks. Itu adalah cara membuat paragraf baru di dalam satu string XML. Tanpa itu, semua kalimat akan menempel jadi satu paragraf raksasa.

Langkah 5: Kode Kotlin-nya (Hampir Tidak Perlu Diubah)

Kabar baiknya, untuk aplikasi semurni ini kamu hampir tidak perlu menyentuh kode Kotlin. Template bawaan MainActivity.kt sudah cukup:

package com.namakamu.scrolltext

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

class MainActivity : AppCompatActivity() {

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

ScrollView bekerja sepenuhnya di level layout, tidak butuh logika tambahan. Ini contoh bagus bahwa tidak semua fitur Android butuh kode: memilih komponen layout yang tepat sering kali sudah menyelesaikan masalah.

Langkah 6: Jalankan dan Coba Gulir

Ilustrasi buku terbuka yang berubah menjadi smartphone dengan pita kertas berputar

Klik tombol Run hijau, pilih HP fisik atau emulator seperti biasa. Saat aplikasi terbuka, kamu akan melihat judul, subjudul, dan awal isi artikel. Sekarang usap layar ke atas dengan jari (atau seret dengan mouse di emulator). Isinya bergulir mulus ke bawah, persis seperti membaca artikel di aplikasi berita.

Kalau teksnya tidak bisa digulir, cek dua hal: pastikan android:layout_height pada LinearLayout adalah wrap_content (bukan match_parent), dan pastikan isi teksnya memang lebih panjang dari layar. ScrollView yang isinya muat di satu layar memang tidak menunjukkan efek apa-apa, dan itu perilaku yang benar.

Tips tambahan: coba putar HP ke mode landscape. Karena layout kita memakai match_parent dan wrap_content dengan benar, tampilannya tetap rapi tanpa kode tambahan. Aplikasi yang responsif bukan hasil sulap, melainkan hasil layout yang ditulis dengan disiplin sejak awal.

Kesalahan Umum yang Sering Terjadi

  • Menaruh dua anak langsung di dalam ScrollView: aplikasi akan crash saat dibuka. Ingat aturan emasnya: satu anak saja, bungkus sisanya dengan LinearLayout.
  • LinearLayout memakai match_parent untuk height: tingginya jadi terkunci sebesar layar dan tidak ada yang bisa digulir. Harus wrap_content.
  • Menaruh ScrollView di dalam ScrollView lain: gestur gulirnya akan berebut dan hasilnya tidak nyaman. Kalau butuh daftar yang kompleks, pelajari RecyclerView sebagai langkah berikutnya.
  • Lupa fillViewport: kalau konten pendek, tampilannya terlihat menggantung di atas dengan ruang kosong di bawah. Tambahkan android:fillViewport="true".

Kapan Pakai ScrollView, Kapan Pakai yang Lain?

ScrollView itu enak untuk konten yang pendek dan jumlahnya pasti: satu artikel, satu formulir pendaftaran, satu halaman profil. Tapi dia punya batas. ScrollView me-render semua isinya sekaligus ke memori, jadi kalau kamu memaksa memasukkan ratusan item (misalnya daftar produk atau daftar chat), HP kentang akan tersedak dan aplikasinya jadi lambat.

Untuk daftar panjang yang datanya bisa bertambah, Android punya komponen yang lebih pintar bernama RecyclerView. Bedanya, RecyclerView hanya me-render item yang sedang terlihat di layar dan mendaur ulang tampilannya saat kamu menggulir. Itu sebabnya aplikasi seperti WhatsApp atau Tokopedia bisa menampilkan ribuan chat dan produk tanpa lag. Aturannya praktis: konten statis dan pendek pakai ScrollView, daftar dinamis dan panjang pakai RecyclerView. Keduanya wajib kamu kuasai, dan ScrollView adalah pintu masuk yang tepat sebelum naik ke RecyclerView.

Bonus: ScrollView Horizontal

Secara bawaan ScrollView menggulir ke atas dan bawah. Kalau kamu butuh gulir ke kiri dan kanan, misalnya untuk galeri foto atau deretan kartu, ganti ScrollView menjadi HorizontalScrollView dan ubah orientasi LinearLayout di dalamnya menjadi horizontal:

<HorizontalScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- taruh ImageView atau CardView di sini -->

    </LinearLayout>

</HorizontalScrollView>

Perhatikan polanya dibalik: sekarang layout_width yang memakai wrap_content supaya konten bisa melebar ke samping, sedangkan tingginya mengikuti layar. Satu pola, dua arah, tinggal pilih sesuai kebutuhan desainmu.

Tantangan Buat Kamu

  1. Tambahkan sebuah ImageView di antara subjudul dan isi artikel, lalu tampilkan gambar dari folder drawable. Sekarang aplikasimu punya ilustrasi seperti artikel sungguhan.
  2. Ubah ukuran dan warna judul lewat textSize dan textColor, lalu rasakan bagaimana sedikit polesan visual mengubah kesan aplikasi.
  3. Ganti isi isi_artikel dengan tulisanmu sendiri, misalnya resep masakan favoritmu. Selamat, kamu baru saja membuat aplikasi resep versi paling sederhana.

Dengan ScrollView, kamu sekarang punya pola dasar untuk semua aplikasi berbasis bacaan: artikel, lirik, panduan, sampai dokumentasi offline. Di artikel berikutnya kita akan menggabungkan pelajaran hari ini dengan tombol dan input, supaya aplikasi bacaanmu bisa interaktif, bukan sekadar pajangan teks.