Pendahuluan
Saat anda mendesain halaman GUI Android tidak menutup kemungkinan halaman tersebut lebih panjang dari layar layout android. Apalagi informasi yang ingin di suguhkan ke user lebih banyak. Sepert list data dan lainnya. Tentu hal ini akan membuat beberapa desain akan hilang karena panjang atau lebar dari tampilan smarphone tidak mencukupi. Jadi informasi yang akan di sampaikan tidak akan utuh.
Mengatasi masalah di atas Android menyediakan sebuah komponen yang dapat menampilkan keseluruhan informasi tersebut. Metode tersebut dikenal dengan Scroll. Artinya layar smarphone dapat kita geser ke atas atau kebawah, kesamping kir atau kesamping kanan. Komponen yang di sediakan oleh Android Studio bernama ScrollView. Komponen ini memungkinkan user untuk melihat informasi secara utuh dengan cara menggeser layout pada perangkat android. Tentu bagi pengguna setia android bukan hal asing dalam geser menggeser.😂..
Memahami Penggunaan ScrollView
Mari kita mulai dengan memahami penggunaan dari komponen ScrollView tersebut. Ada 2 jenis scrollView di android, yaitu menggeser layar secara horizontal dan menggeser layar secara vertikal. Kedua metode ini yang akan kita bahas.
Vertical ScrollView
Vertical scrollView merupakan halaman layout yang bisa di scroll oleh user keatas dan kebawah. Bentuk penulisannya scroll ini seperti berikut:
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp">
//Komponen diletakkan disini
</ScrollView>
Oke, tampa banyak berbasa dan berbasi, kita mulai saja misi rahasia kita ini. Silahkan buat projek baru di Android Studio. Setelah projek dibuat anda masuk ke halaman activity_main.xml. Tambahkan komponen ScrollView seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent">
//Komponen diletakkan disini
</ScrollView>
</android.support.constraint.ConstraintLayout>
ScrollView memiliki Tag pembuka dan penutup. Sedangkan komponen yang akan di scroll diletakkan di antara tag ScrollView tersebut. Sekarang kita akan menambahkan komponen ke dalam scrollView. Namun kita perlu tambahkan sebuah layout LinearLayout. Layout ini kita letakkan di dalam ScrollView. Bentuk penulisan LinearLayout dapat anda perhatikan seperti berikut:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
Penambahan layout ini bukanlah wajib. anda bisa saja tidak menambahkannya. Tentunya penambahan layout agar desain lebih menarik dan tertata lagi.
Copy lah sebuah gambar dari Drive anda dan pastekan pada root app=>res=> drawable. Disini kita ambil gambar dengan nama logo.png. Selanjutnya buatlah komponen ImageView di dalam LinearLayout:.
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/logo"/>
Setelah itu kita tambahkan komponen TextView dan kita letakkan di bawah komponen ImageView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Makna Logo Beringin"
android:layout_marginTop="100dp"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_marginTop="20dp"
android:text="beringin merupakan sejenis pohon yang banyak hidup di daerah tropis. Batang besar dengan daun rimbun serta untaian akar yang tumbuh di dahannya.\n
Pohon beringin memiliki usia yang panjang bahkan sampai beratus tahun lamanya. Ukuran diameter pohon ini beragam-ragam tergantung kepada usianya.\n
Pohon beringin di zaman dahulu khususnya di daerah pedalaman Minangkabau Sumatera Barat digunakan sebagai penangkal petir. Maka tak heran pohon ini dijumpai ditengah perkampungan.\n
Biasanya masayaratak menanam pohon tersebut disamping Rumah Gadang (Rumah Adat Minangkabau
"/>
Berikut code lengkapnya
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/logo"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Makna Logo Beringin"
android:layout_marginTop="100dp"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_marginTop="20dp"
android:text="beringin merupakan sejenis pohon yang banyak hidup di daerah tropis. Batang besar dengan daun rimbun serta untaian akar yang tumbuh di dahannya.\n
Pohon beringin memiliki usia yang panjang bahkan sampai beratus tahun lamanya. Ukuran diameter pohon ini beragam-ragam tergantung kepada usianya.\n
Pohon beringin di zaman dahulu khususnya di daerah pedalaman Minangkabau Sumatera Barat digunakan sebagai penangkal petir. Maka tak heran pohon ini dijumpai ditengah perkampungan.\n
Biasanya masayaratak menanam pohon tersebut disamping Rumah Gadang (Rumah Adat Minangkabau
"/>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Sekarang jalankan program. Coba geser halaman dari atas ke bawah atau sebaliknya.
Horizontal Scroll
Jenis yang ke dua dari ScrollView adalah jenis horizontal Scroll. Horizontal Scroll merupakan komponen yang memberikan efek penggeseran layar dari samping kira ke sampai kanan atau sebaliknya. Bentuk penulisan dari Horizontal Scroll dapat di lihat seperti berikut:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="200dp">
//Komponen diletakkan disini
</HorizontalScrollView>
Nah, sekarang tambahkan komponen LinearLayout dengan attribut orientasinya bernilai horizontal. Perhatikan code berikut
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
Tambahkan beberapa komponen lain. Berikut desain lengkapnya:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/sate" />
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Makna Logo Beringin"
android:layout_marginTop="100dp"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_marginTop="20dp"
android:text="beringin merupakan sejenis pohon yang banyak hidup di daerah tropis. Batang besar dengan daun rimbun serta untaian akar yang tumbuh di dahannya.\n
Pohon beringin memiliki usia yang panjang bahkan sampai beratus tahun lamanya. Ukuran diameter pohon ini beragam-ragam tergantung kepada usianya.\n
Pohon beringin di zaman dahulu khususnya di daerah pedalaman Minangkabau Sumatera Barat digunakan sebagai penangkal petir. Maka tak heran pohon ini dijumpai ditengah perkampungan.\n
Biasanya masayaratak menanam pohon tersebut disamping Rumah Gadang (Rumah Adat Minangkabau
"/>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Latihan
Agar lebih memahami tentang scrollview silahkan buat projek berdasarkan gambar berikut:
