Android Studio: Membuat User Interface Sederhana

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.

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.

Two other attributes, android:layout_width and android:layout_height, are required for all views in order to specify their size.

Because the LinearLayout is the root view in the layout, it should fill the entire screen area that's available to the app by setting the width and height to "match_parent". This value declares that the view should expand its width or height to match the width or height of the parent view.

For more information about layout properties, see the Layout guide.

Referensi

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