Android Studio: Membuat User Interface Sederhana

From OnnoWiki
Jump to navigation Jump to search

Sumber: https://developer.android.com/training/basics/firstapp/building-ui.html


Pada bagian ini, kita akan belajar membuat layout di XML termasuk kolom text dan tombol. Pada bagian selanjutnya, kita akan belajar bagaimana agar aplikasi yang kita kembangkan meresponds ke tombol yang di tekas dengan mengirimkan isi dari kolom text ke activity yang lain.

Graphical User Interface (GUI) di app Android dibangun mengunakan hirarki dari object View dan ViewGroup. Object View biasanya UI widget seperti tombol atau kolom text. Object ViewGroup biasanya container visa yang terlihat yang mendefinisikan bagaimana child view di layout, seperti berbentuk grid atau daftar vertikal.

Android memberikan vocabulary XML yang berhubungan dengan subclass dari View dan ViewGroup sehingga kita dapat mendefinisikan UI kita di XML menggunakan hirarki dari elemen UI.

Layout adalah subclass dari ViewGroup. Dalam latihan ini, kita akan bekerja dengan LinearLayout.

Viewgroup.png


Membuat Linear Layout

  • Di Android Studio, dari directory res/layout , buka activity_my.xml . Template BlankActivity yang dipilih saat kita membuat project ini termasuk di dalamnya file activity_my.xml dengan root view RelativeLayout dan child view TextView .
  • Di Preview pane, klik Hide icon untuk menutup Preview pane.
  • Di Android Studio, ketika kita membuka layout file, kita pertama kali akan di perlihatkan Preview pane. Klik elements di pane ini dan buka tool WYSIWYG tools di Design pane. Pada kesempatan ini, kita akan bekerja langsung dengan XML.
  • Delete elemen <TextView> .
  • Ubah elemen <RelativeLayout> ke <LinearLayout>.
  • Tambahkan atribut android:orientation set ke "horizontal".
  • Buang atribut android:padding dan tools:context .

Hasilnya sebagai berikut: 

res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout adalah view group (subclass dan ViewGroup) yang akan me-layout child view baik orientasi vertical atau horizontal, seperti yang di spesifikasikan di atribut android:orientation . Setiap child dari LinearLayout akan muncul di layar sesuai dengan urutan dia muncul di XML.

Dua atribut lain, android:layout_width dan android:layout_height, dibutuhkan untuk semua views untuk menentukan size mereka.

Karena LinearLayout adalah root view di layout, dia harus mengisi seluruh area screen yang tersedia agar apps dengan cara menset width (lebar) dan height (tinggi) ke "match_parent". Nilai ini mendeklarasikan bahwa view harus memperlebar width atau height untuk mencocokan dengan width atau height dari parent view.

Untuk informasi lebih lanjut tentang layout properties, ada baiknya membaca Android Studio: Layout Layar

Referensi

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Android_Studio:_Membuat_User_Interface_Sederhana&oldid=42939"