Hai ketemu lagi dengan mini tips dicoding. Kali ini kita akan membagikan satu tips yang berhubungan dengan Layout Scrollview.
Kalian pernah ga coba membuat layout sedemikian rupa agar semua konten masuk dengan sempurna? Tapi ketika di jalankan di device, tampilan layout kalian menjadi berantakan. Contoh kasus nya seperti ini :
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangNah tampilan di preview Android Studio sih aman-aman saja.
Ketika di run di device lain yang tidak sesuai dengan preview di Android Studionya …
Kok jadi kepotong gitu ya? Hmm.. ada yang salah kah dengan kodenya?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="app.learn.dhahedda.myapplication1.MainActivity" android:weightSum="1"> <TextView android:text="Air Terjun Embun Pelangi" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView8" android:textSize="24sp" android:textColor="?attr/colorControlNormal" android:textAlignment="center" android:textStyle="normal|bold" android:paddingBottom="20dp"/> <TextView android:text="LOKASI " android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Wisata Majalengka" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView7" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp"/> <TextView android:text="ALAMAT" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView6" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Desa Sukadana, Kecamatan Argapura, Kabupaten Majalengka" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView9" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp" /> <TextView android:text="DESKRIPSI" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView5" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Curug Embun Pelangi dan disebut penduduk sekitar sebagai Curug Ibun, terletak di Desa Sukadana, Kecamatan Argapura, Kabupaten Majalengka. Untuk menuju ke lokasi air terjun ini cukup mudah, karena terletak kurang lebih 3 kilometer dari pusat kota. Untuk menuju ke lokasi air terjun, pengunjung harus berjalan melewati ladang sayur-mayur warga dan menuruni tangga yang cukup curam. Dinamakan Curug Embun Pelangi karena embun yang tercipta dari jatuhnya air sungai terkena cahaya mahtahari sehingga terlihat pelangi di sekitar air terjun. Selain melihat air terjun, pengunjung dapat menikmati panorama tebing batu yang mengapit sungai Cilongkrang." android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView10" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp"/> </LinearLayout> |
Oke kalau itu masalahnya tips nya sangat mudah, semudah “membungkus” permen. Caranya “bungkus” tampilan aplikasi kalian dengan sesuatu yang scroll-able. Disini kita pakai ScrollView. Struktur dari ScrollView bisa dilihat di bawah ini :
|
1 2 3 4 5 |
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> . . . </ScrollView> |
Kita coba bungkus layout tampilan kita dengan ScrollView, hasilnya akan seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="app.learn.dhahedda.myapplication1.MainActivity" android:weightSum="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Air Terjun Embun Pelangi" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView8" android:textSize="24sp" android:textColor="?attr/colorControlNormal" android:textAlignment="center" android:textStyle="normal|bold" android:paddingBottom="20dp"/> <TextView android:text="LOKASI " android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Wisata Majalengka" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView7" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp"/> <TextView android:text="ALAMAT" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView6" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Desa Sukadana, Kecamatan Argapura, Kabupaten Majalengka" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView9" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp" /> <TextView android:text="DESKRIPSI" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView5" android:textSize="20sp" android:textColor="@color/colorPrimaryDark" /> <TextView android:text="Curug Embun Pelangi dan disebut penduduk sekitar sebagai Curug Ibun, terletak di Desa Sukadana, Kecamatan Argapura, Kabupaten Majalengka. Untuk menuju ke lokasi air terjun ini cukup mudah, karena terletak kurang lebih 3 kilometer dari pusat kota. Untuk menuju ke lokasi air terjun, pengunjung harus berjalan melewati ladang sayur-mayur warga dan menuruni tangga yang cukup curam. Dinamakan Curug Embun Pelangi karena embun yang tercipta dari jatuhnya air sungai terkena cahaya mahtahari sehingga terlihat pelangi di sekitar air terjun. Selain melihat air terjun, pengunjung dapat menikmati panorama tebing batu yang mengapit sungai Cilongkrang." android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView10" android:textSize="20sp" android:textColor="?attr/colorControlNormal" android:paddingBottom="15dp"/> </LinearLayout> </ScrollView> |
Kalau sudah kita bungkus, coba kita jalankan lagi.
Gimana hasilnya? Sudah sesuai kan 🙂
Oh iya note, ScrollView hanya bisa membungkus satu object, jadi kalau kalian ingin menambahkan beberapa object yang ingin kalian masukan ke dalam ScrollView, kalian harus membungkusnya lagi dengan sesuatu layout, singkatntya seperti membungkus permen dalam permen.
Ingin belajar lebih tentang Android? Yuk langsung cek Dicoding Academy Belajar Membangun Aplikasi Android Native (www.dicoding.com/academies/26) , materi nya dibuat oleh Google Developer Expert di Indonesia.
Oke Selamat mencoba, Semoga bermanfaat !
Tunggu tips kami selanjutnya 🙂
