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.

   In Android Studio, when you open a layout file, you’re first shown the Preview pane. Clicking elements in this pane opens the WYSIWYG tools in the Design pane. For this lesson, you’re going to work directly with the XML.
   Delete the <TextView> element.
   Change the <RelativeLayout> element to <LinearLayout>.
   Add the android:orientation attribute and set it to "horizontal".
   Remove the android:padding attributes and the tools:context attribute. 

The result looks like this:

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 is a view group (a subclass of ViewGroup) that lays out child views in either a vertical or horizontal orientation, as specified by the android:orientation attribute. Each child of a LinearLayout appears on the screen in the order in which it appears in the 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