Belajar Layouting / UI pada Android Studio Versi Terbaru

 Belajar Layouting / UI pada Android Studio Versi Terbaru

belajar android studio

Kali ini kita akan belajar tata letak pada studio android yang bertujuan untuk membuat tampilan tata letak untuk penempatan teks, gambar dan tombol-tombol tertentu pada halaman kerja kita. dengan menggunakan linear layout, relative layout dan constraint layout.

Dan pada android studio itu sendiri ada 3 jenis layouting / UI pada aplikasi android studio tapi sebelum itu jika kalian belum mempunyai aplikasi android studio silahkan download aplikasinya dulu  disini .

tutorial-layouting-android-studio
Tutorial-layouting-android-studio

Nah jika temen-temen belum tahu cara mengistall aplikasi android studio, karena untuk menginstallnya juga agak membutuhkan banyak step dan penjelasan tertentu maka silahkan melihat cara menginstal android studio pada windows disini yaa.

Ok deh sobat, kalau sobat udah punya aplikasi android studio di laptop atau pc kalian, kita langsung saja buat Layouting pada android studio, di sini saya memakai android studio versi terbaru ya sob.

Paling tidak kita bakal membahas 3 (tiga) jenis Layouting pada pertemuaan kali ini yaitu :

1. Linear Layout

Linear layout adalah kelompok tampilan yang menyejajarkan semua turunan dalam satu arah, baik vertikal maupun horizontal. Sobat Andi bisa menetapkan arah tata letak dengan atribut android:orientation. jadi kunci untuk membuat tampilan linear ada pada orientasinya yaitu orientasi vertikal maupun horizontal.

Nah pada gambar di bawah ini saya memakai orientasi vertikal pada objek gambar sampai editText password sedangkan pada objek Button saya memakai orientasi horizontal.

Linear-layouting
Contoh tampilan linear layout.

untuk buat tampilan seperti diatas, silahkan sobat masukkan codingan dibawah ini di file activity_main.xml di package layout di project sobat sekalian.

2. Relatif Tata Letak

Layout ini merupakan layout yang berfungsi untuk mengatur tata letak komponen atau widget aplikasi android dengan cara relative (secara bebas) tidak hanya vertikal atau horisontal saja seperti pada Linear Layout.

Jika tadi pada linear layout kita membutuhkan orientasi sebagai kunci buat membentuk tampilannya maka beda hal nya dengan relative layout karena kunci buat meletakkan sesuatu pada halaman tampilannya kita membutuhkan atribut “id” yang akan menjadi titik acuan kita meletakkanya di mana saja.

Relative-layouting
Contoh tampilan relative layout.

untuk membuat tampilan seperti diatas, silahkan sobat membuat file xml baru dengan nama  relative_layout.xml  kemudian nama codingan dibawah ini.

3. Constraint Layout

adalah sebuah ViewGroup yang dapat kita gunakan untuk menyusun View kita. layouting yang satu ini adalah suatu hal yang baru di android studio, adapun cara membuat tampilan layouting ini yaitu kita hanya melakukan drag objek yang ingin kita pakai di halaman aktivitas kita.

Tapi sobat Andi, kunci agar tampilan kita lebih maksimal di constraint layouting ini yaitu kita harus mengikatnya dulu ke bagian tepian halaman aktivitas kita dengan cara mengklik lingkaran pada objek sehingga muncul tanda panah kemudian tarik ke tepian, lakukan ini pada setiap sisi lingkaran pada objek yaa sobat Andi.

Constraint-layouting
Contoh tampilan constraint layout.

Karena kita hanya menarik objek yang kita inginkan di halaman kerja kita maka secara otomatis codingannya akan muncul. ingat sobat Andi kita membuat ini di bagian Desain yaa.

Ok, mungkin itu saja yaa yang bisa saya share pada kalian pada postingan kali ini, tetap semangat ya sob belajarnya karena ada hadiah buat kalian yang rajin dan ikhlat menuntut ilmu yaitu

Motivasi-belajar-android-studio-layouting

Pada postingan berikutnya kita bakalan belajar tentang  Message pada Android Studio . nantikan yaa Sobat Andi 🙂

untuk selengkapnya silahkan kunjungi web kami di https://blog.idn.id/

Related post