Tutorial Membuat Halaman Scroll di Android

 Pendahuluan

      Saat anda mendesain halaman GUI Android tidak menutup kemungkinan halaman tersebut lebih panjang dari layout android sendiri. Hal ini membuat beberapa desain akan hilang. Tentu ini akan membuat informasi yang ingin disampaikan tidak sempurna.

    Android menyediakan sebuah komponen 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

    Ada 2 jenis scrollView. Scroll secara horizontal dan scroll secara vertikal. 

Vertical ScrollView

    Vertical scrollView merupakan halaman layout yang bisa discroll 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 sepasang yang terdiri dari tag pembuka dan tag penutup. Sedangkan komponen yang akan di scroll diletakkan diantara kedua tag tersebut.

    Nah, sekarang kita akan mencoba menambahkan beberapa komponen didalam scrollview. Namun sebelumnya kita tambahkan terlebih dahulu sebuah layout. Layout ini kita letakkan didalam ScrollView. Yaitunya LinearLayout.

<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.

    Di dalam LinearLayout tambahkan beberapa imageView.

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/logo"/>

    

Setelah itu tambahkan komponen TextView dibawah 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>


Horizontal Scroll 

    Horizontal Scroll merupakan komponen yang memberikan efek terhadap layout sehingga layout bisa digeser kearah kiri atau kanan.

Berikut bentuk Tambahkan beberapa komponen seperti berikut:


Latihan

    Agar lebih memahami tentang scrollview silahkan buat projek berdasarkan gambar berikut:




Previous Post Next Post