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.

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

Menambahkan Text Field

Seperti semua View object, kita perlu mendefinsikan atribut XML tertentu untuk menspesifikasikan property EditText object.

• Di file activity_my.xml , dalam elemen <LinearLayout> , definisikan elemen <EditText> dengan id attribut di set ke @+id/edit_message.
• Definisikan atribut layout_width dan layout_height sebagai wrap_content.
• Definisikan hint atribut sebagai string object dengan nama edit_message.

Elemen <EditText> harusnya sebagai berikut:

res/layout/activity_my.xml

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

Disini kita menambahkan atribut <EditText> :

android:id

Ini memberikan pengenal unik untuk tampilan, yang dapat Anda gunakan untuk referensi objek dari kode app anda, seperti membaca dan memanipulasi objek.

Tanda "at" (@) dibutuhkan jika kita mereferensi ke objek resource dari XML. Ini dilanjutkan dengan type resource (dalam hal ini id), sebuah slash, kemudian nama resource (edit_message).

Tanda plus (+) sebelum type resource dibutuhkan jika kita mendefinisikan resource ID untuk pertama kali. Jika kita compile app, tool SDK akan menggunakan nama ID untuk meng-create resource ID baru dalam file project gen/R.java kita yang akan mereferensi ke elemen EditText . Dengan resource ID di declare sekali dengan cara ini, referensi lainnya ke ID tidak perlu menggunakan tanda plus (+). Penggunaan tanda plus hanya di perlukan jika menspesifikasikan resource ID baru tapi tidak perlu untuk resource yang concrete seperti string atau layout. Baca lebih lanjut tentang resource object.

android:layout_width dan android:layout_height

Daripada menggunakan ukuran tertentu untuk width dan height, nilai "wrap_content" menentukan bahwa view harus secukupnya sesuai dengan view content. Jika kita menggunakan "match_parent", maka elemen EditText akan mengisi seluruh layar, karena dia akan mencocokan ukuran dari parent LinearLayout.

android:hint

Ini adalah default string yang akan di display jika text field kosong. Kita tidak menggunakan hard-coded string, nilai "@string/edit_message" mereferensi kepada string resource yang didefinisikan di file yang berbeda. Karena ini me-referensi kepada sebuah concrete resource (bukan sekedar sebuah identifier), dia tidak membutuhkan tanda plus. Akan tetapi, karena kita belum mendefinisikan string resource, kita akan melihat error compiler. Kita akan memperbaikinya di bagian selanjutnya dengan cara mendefinisikan string.

Catatan: string resource mempunyai nama yang sama dengan elemen ID: edit_message. Akan tetapi, referensi ke resource selalu di batasi oleh resource type (seperti id atau string), oleh karenanya penggunaan nama yang sama tidak menyebabkan tabrakan.

Resource Object

Sebuah resource object adalah sebuah nama unik integer yang berasosiasi dengan app resource, seperti sebuah bitmap, file layout atau string.

Setiap resource mempunyai resource object-nya yang di definisikan di file project gen/R.java. Kita dapat menggunakan nama object di R class untuk me-referensi resource yang kita gunakan, misalnya kita perlu men-spesifikasi sebuah string untuk atribut android:hint . Kita juga dapat membuat resource ID sembarang yang dapat di asosiasikan dengan sebuah view menggunakan atribut android:id , yang memungkinkan kita untuk melakukan referebsi view tersebut dari program lain.

SDK tool akan membuat file R.java setiap kali kita mengcompile app. Jangan mengubah file tersebut dengan tangan.

Menambahkan String Resource

By default, your Android project includes a string resource file at res/values/strings.xml. Here, you'll add a new string named "edit_message" and set the value to "Enter a message."

• In Android Studio, from the res/values directory, open strings.xml.
• Add a line for a string named "edit_message" with the value, "Enter a message".
• Add a line for a string named "button_send" with the value, "Send". You'll create the button that uses this string in the next section.
• Remove the line for the "hello world" string.

The result for strings.xml looks like this:

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

For text in the user interface, always specify each string as a resource. String resources allow you to manage all UI text in a single location, which makes the text easier to find and update. Externalizing the strings also allows you to localize your app to different languages by providing alternative definitions for each string resource.

For more information about using string resources to localize your app for other languages, see the Supporting Different Devices class.

Add a Button

• In Android Studio, from the res/layout directory, edit the activity_my.xml file.
• Within the <LinearLayout> element, define a <Button> element immediately following the <EditText> element.
• Set the button's width and height attributes to "wrap_content" so the button is only as big as necessary to fit the button's text label.
• Define the button's text label with the android:text attribute; set its value to the button_send string resource you defined in the previous section.

Your <LinearLayout> should look 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" >
      <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
      <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Note: This button doesn't need the android:id attribute, because it won't be referenced from the activity code.

The layout is currently designed so that both the EditText and Button widgets are only as big as necessary to fit their content, as shown in figure 2.

Figure 2. The EditText and Button widgets have their widths set to "wrap_content".

This works fine for the button, but not as well for the text field, because the user might type something longer. It would be nice to fill the unused screen width with the text field. You can do this inside a LinearLayout with the weight property, which you can specify using the android:layout_weight attribute.

The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views. This works kind of like the amount of ingredients in a drink recipe: "2 parts soda, 1 part syrup" means two-thirds of the drink is soda. For example, if you give one view a weight of 2 and another one a weight of 1, the sum is 3, so the first view fills 2/3 of the remaining space and the second view fills the rest. If you add a third view and give it a weight of 1, then the first view (with weight of 2) now gets 1/2 the remaining space, while the remaining two each get 1/4.

The default weight for all views is 0, so if you specify any weight value greater than 0 to only one view, then that view fills whatever space remains after all views are given the space they require.

Referensi

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