Pengenalan Layouting Lanjutan (Framelayout, Listview, Gridview, Constrainlayout) pada Android Studio
FRAMELAYOUT
A. Teori
FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih Viewchild, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android:layout_gravity digunakan untuk menemukan ViewChild.
Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlumenambahkan tag <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contohberikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada buttonpertama, seperti berikut ini:Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalianatur sendiri, kalian dapat menggunakan beberapa atribut
Berikut adalah atribut pentingkhusus untuk FrameLayout :
· android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UIpada elemen UI lainnya.
· android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemenUI pada elemen UI lainnya.
· android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI padaelemen UI lainnya.
· android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UIpada elemen UI lainnya.
· android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah,center, center horizontal dan center vertical.
B. Praktik 1
1.
Pertama jalankan aplikasi IDE Android Studio, caranya :
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
Mengonfigurasi projek
2 . Atau bisa dengan mengedit source codeactivity_main.xml nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
C. Praktik 2
1.
Disini kita akan bermain layout , dimana setiap text akan berada di tengah,
samping , atas maupun bawah . Pertama jalankan aplikasi IDE Android Studio,
caranya :
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
Mengonfigurasi projek
2 . Atau bisa dengan mengedit source code activity_main.xmlnya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
LISTVIEW
A. Teori
“Sebenarnya materi ini sudah sepat kita bahas di modul sebelumnya tp tak mengapa kita bahas
lagi karena materi ini masih berhubungan dengan materi Layouting yang sedang kita
palajari di modul ini”
ListView adalah salah satu widget
yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list,
nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah
Array atau Database yang sudah ditentukan. ListView pada saat ini sudah
tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena
lebih custom dan juga dapat mengatur tampilan layoutnya.Walaupun begitu,
ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item
yang sederhana pada aplikasi mereka.
B. Praktik
1.
Pertama jalankan aplikasi IDE Android Studio, caranya :
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
Mengonfigurasi projek
2 . Atau bisa dengan mengedit source codeactivity_main.xml nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini
3. Buka dan ubah script MainActivity.java menjadi seperti code di bawah ini
4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
GRIDVIEW
A. Teori
GridView
adalah salah satu container, yang digunakan untuk menampilkankonten View,
konten View dalam GridView akan tersusun bentuk kotak-kotak sepertisebuah rak
lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisancoding
beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yangditampilkan
secara Grid atau Kotak-kotak.
Penjelasan
pada atribut-atribut yang digunakan:
·
android:columnWidth
: Menentukan lebar tetap pada masing-masing kolom.
·
android:gravity
: Menentukan gravitasi di dalam setiap sel.
·
android:verticalSpacing
: Mendefinisikan default jarak vertikal antar baris.
·
android:stretchMode
: Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang
kosong, jika ada.
·
android:horizontalSpacing
: Mendefinisikan default jarak horisontal antara kolom.
·
android:numColumns
: Menentukan berapa kolom yang akan ditampilkan.
B. Praktik
1.
Pertama jalankan aplikasi IDE Android Studio, caranya :
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
Mengonfigurasi projek
2 . Atau bisa dengan mengedit source codeactivity_main.xml nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini
3. Buka dan ubah script MainActivity.java menjadi seperti code di bawah ini
5. Siapkan sebuah Icon / gambar yang
akan kita gunakan untuk element ImageView lalucopy ke dalam folder Drawable
seperti gambar di bawah ini , bisa di downlod disini
6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
CONSTRAINLAYOUT
A. Teori
Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relativelayout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya.Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design modedidalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraintyaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection sourceyang dapat ditarik ke parent atau ke objek lain.
Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiapsisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb.
Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi ataumenghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_belowatau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraintsebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan viewlainnya sesuai harapan kita.
B. Praktik
1.
Pertama jalankan aplikasi IDE Android Studio, caranya :
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
Mengonfigurasi projek
2 . Atau bisa dengan mengedit source codeactivity_main.xml nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script dibawah ini
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
sekian Tutorial dari saya, semoga bermanfaat :)
Komentar
Posting Komentar