Dalam latihan ini kita akan membuat layout di dalam file XML yang berisi 'text field' dan 'button'. Dalam latihan berikutnya, app kita akan merespon ketika 'button' di klik dengan mengirimkan isi 'text field' ke 'activity' yang lain.
GUI (graphical user interface) untuk app Android dibuat dengan menggunakan hirarki object-object 'View' dan 'ViewGroup'. Object-object 'View' biasanya adalah widget-widget UI seperti 'button' atau 'textfield'. Object-object 'ViewGroup' adalah kontainer 'view' yang tidak terlihat tetapi yang menentukan bagaimana berbagai 'view' ditampilkan, misalnya dengan cara grid atau vertikal.
Android memiliki perbendaharaan kata XML yang berhubungan dengan berbagai subclass 'View' dan 'ViewGroup', jadi kita bisa membuat UI kita di dalam XML dengan menggunakan hirarki elemen-elemen UI.
Kumpulan berbagai macam layout adalah dari berbagai subclass dari 'ViewGroup'. Di latihan ini, kita akan membuat 'LinearLayout'.
 |
| Ilustrasi bagaimana object-object 'ViewGroup' membentuk cabang-cabang di layout dan berisi object-object 'View' |
Membuat Linear Layout
1. Di jendela "Project" Android Studio, buka "app > res > layout > activity_main.xml".
File XML ini adalah yang mendefinisikan layout 'activity' kita. File ini berisi 'text view' yang masih default, yaitu "Hello World".
2. Ketika kita membuka file layout, akan ditampilkan terlebih dahulu 'design editor' di 'Layout Editor'. Pada latihan ini kita akan langsung membuat dengan file XML, jadi klik tab "Text" di bagian bawah jendela untuk berpindah ke mode 'text editor'.
3. Hapus semuanya dan masukkan XML berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<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 satu group dari 'view' (subclass dari 'ViewGroup') yang menampilkan berbagai 'view' anak baik secara vertikal maupun horizontal, yang ditentukan oleh atribut 'android:orientation'. Masing-masing 'view' anak dari 'LinearLayout' tampil di layar sesuai dengan urutan di XML.
Dua atribut lainnya, 'android:layout_width' dan 'android:layout_height', diperlukan oleh semua 'view' untuk menentukan ukurannya.
Karena 'LinearLayout' adalah 'root view' di dalam layout ini, jadi 'LinearLayout' akan mengisi seluruh area layar app dengan men-set 'width' dan 'height' dengan "match_parent". Dengan diisi nilai ini berarti bahwa 'view' akan mengikuti ukuran lebar dan tinggi 'view' dari induknya.
Untuk informasi lebih detil tentang berbagai properti layout, bisa di lihat di link ini: https://developer.android.com/guide/topics/ui/declaring-layout.html
Menambahkan 'Text Field'
Pada file 'activity_main.xml', di dalam elemen <LinearLayout>, tambahkan elemen <EditText> berikut:
<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" />
</LinearLayout>
Jangan khawatir tentang error yang muncul di '@string/edit_message' ; kita akan membetulkan sebentar lagi.
Berikut adalah deskripsi atribut-atribut di dalam <EditText> yang kita tambahkan:
'android:id'
Ini memberikan identifier yang unique untuk 'view' tersebut, yang bisa kita gunakan untuk mengacu object ini dari kode app yang kita tulis, misalnya untuk membaca dan memodifikasi object (kita akan lihat di latihan berikutnya).
Tanda at (@) diperlukan ketika kita mengacu ke 'resource object' apapun dari XML. Kemudian diikuti dengan jenis resource-nya (dalam hal ini adalah id), kemudian diikuti tanda slash dan kemudian namanya (yaitu, edit_message).
Tanda plus (+) yang berada pada di depan jenis resource, diperlukan hanya bila kita sedang mendefinisikan resource ID untuk pertama kali. Ketika kita men-compile app, tool-tool SDK akan menggunakan nama ID untuk membuat resource ID yang baru di dalam file R.java di project kita yang mengacu ke elemen 'EditText'. Dengan resource ID yang dinyatakan sekali dengan cara ini, pengacuan lainnya ke ID tidak perlu tanda plus lagi. Menggunakan tanda plus diperlukan hanya bila menentukan resource ID yang baru dan tidak diperlukan untuk berbagai resources yang konkret (sudah ada) seperti 'strings' atau 'layouts'.
catatan:
Resource object adalah suatu nama integer yang unique yang terasosiasi dengan satu resource dari app kita, misalnya bitmap, file layout, atau string.
Setiap resource terhubung dengan resource object yang didefinisikan dalam file R.java dalam project kita. Kita bisa menggunakan nama-nama object di dalam class R untuk mengacu ke berbagai recources, misalnya ketika kita perlu untuk menentukan suatu 'string value' untuk atribut 'android:hint'. Kita juga bisa membuat berbagai resource ID sembarang yang kita kaitkan dengan suatu 'view' dengan menggunakan atribut 'android:id', yang membolehkan kita untuk mengacu 'view' tersebut dari kode yang lain.
Tool-tool SDK akan membuat file R.java setiap kali kita men-compile app kita. Jangan pernah memodifikasi file ini.
Untuk mengetahui lebih detil bisa membaca pedoman tentang "Providing Resource" di: https://developer.android.com/guide/topics/resources/providing-resources.html
'android:layout_width' dan 'android:layout_height'
Daripada menggunakan ukuran tertentu untuk 'width' dan 'height', nilai yang berisi "wrap_content" menentukan bahwa 'view' seharusnya hanya sebesar yang diperlukan supaya pas dengan konten yang ada di 'view'. Andaikan kita menggunakan "match_parent", maka elemen "EditText" akan mengisi layar, karena itu berarti akan menyesuaikan dengan ukuran induknya yaitu "LinearLayout". Untuk informasi lebih lanjut bisa dibaca di link ini: https://developer.android.com/guide/topics/ui/declaring-layout.html
'android:hint'
Ini adalah 'string' default yang tampil ketika 'text field' kosong. Daripada menggunakan string yang kita kode-kan sebagai nilainya, nilai "@string/edit_message" akan mengacu ke 'string resource' yang didefinisikan di file terpisah. Karena ini mengacu ke resource yang konkret (sudah ada) (bukan hanya identifier), tidak diperlukan tanda plus. Tetapi, karena kita belum mendefinisikan 'string resource', kita akan melihat 'compiler error' pada awalnya. Kita akan membetulkannya di latihan berikutnya tentang mendefinisikan 'string'.
catatan:
'String resource' ini memiliki nama yang sama dengan element ID:edit_message. Tetapi cara pengacuan ke 'resources' selalu digunakan jenis rsource (misalnya id atau string), jadi menggunakan nama yang sama tidak akan menyebabkan konflik.
Menambahkan 'String Resources'
Secara default, project Android kita akan memasukkan satu file 'string resource' di "res > values > strings.xml". Disini kita akan menambahkan dua 'string' baru.
1. Dari jendela "Project", buka "res > values > strings.xml".
2. Tambahkan dua 'string' sehingga file kita akan tampak seperti berikut:
<?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>
</resources>
Untuk teks di UI, selalu tetapkan masing-masing string sebagai satu resource. 'String resources' membuat kita mudah mengelola semua teks UI pada satu lokasi, sehingga teks lebih mudah ditemukan dan di-update. Dengan membuat beberapa string eksternal juga membuat kita mudah me-lokal-kan app kita ke banyak bahasa-bahasa lainnya. (Lihat class "Supporting Different Devices" di link: https://developer.android.com/training/basics/supporting-devices/index.html).
Menambahkan 'Button'
Kembali lagi ke file 'activity_main.xml' dan tambahkan button setelah <EditText>. File kita akan tampak seperti ini:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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>
catatan:
'Button' ini tidak memerlukan atribut 'android:id', karena tidak akan diacu dari kode 'activity'.
Layout kita saat ini di-desain sehingga baik widget-widget 'EditText' dan 'Button' hanya akan tampil sebesar yang diperlukan supaya pas dengan kontennya seperti gambar berikut ini:
 |
| Widget 'EditText' dan 'Button' di-set ke "wrap_content" |
Nilai 'weight' adalah angka yang menentukan jumlah ruang yang tersisa yang diambil masing-masing 'view', relatif terhadap jumlah yang diambil 'view' sebelahnya. Pekerjaan ini mirip dengan jumlah ramuan resep minuman: "2 bagian soda, 1 bagian sirup" yang artinya adalah 2/3 minuman tersebut adalah soda. Misalnya bila kita memberi satu 'view' dengan 'weight' 2 dan satu lainnya dengan 'weight' 1, jumlahnya adalah 3, jadi 'view' yang pertama akan mengisi 2/3 dari ruang yang tersisa dan 'view' kedua akan mengisi sisanya. Bila kita menambahkan 'view' ketiga dan memberinya 'weight' 1, maka 'view' pertama sekarang menjadi 1/2 dari ruang yang tersisa, sementara dua 'view' sisanya masing-masing menjadi 1/4.
'Weight' default untuk semua 'view' adalah 0, jadi bila kita menetapkan nilai 'weight' berapapun yang lebih besar dari 0 ke satu 'view', maka 'view' tersebut akan mengisi ruang manapun yang tersisa setelah semua 'view' diberi tempat sesuai yang diperlukan.
Membuat Kotak Input Mengisi Penuh Lebar Layar Yang Tersisa
Pada file 'activity_main.xml', modifikasilah <EditText> sehingga atribut-atributnya tampak seperti ini:
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
Dengan men-set 'width' ke nol (0dp) akan meningkatkan performa karena dengan menggunakan "wrap_content" pada 'width' membuat sistem menghitung 'width' terlebih dahulu yang pada akhirnya tidak relevan karena nilai 'weight' memerlukan penghitungan 'width' lainnya untuk memenuhi ruang yang tersisa.
 |
| Widget 'EditText' diberi semua semua layout weight sehingga memenuhi ruang layar yang tersisa |
File layout 'activity_main.xml' kita seharusnya tampak seperti di bawah ini:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
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>
Menjalankan App
Untuk mengetahui tampilan app kita di emulator silahkan klik "Run" di toolbar.
Untuk menambahkan 'behavior' pada app kita misalnya merespon 'button' dan memulai 'activity' yang lain akan kita lanjutkan pada latihan berikutnya.
 |
| Tampilan App di Emulator Nexus 6 API 23 |
license: Common Creative 2.5
No comments:
Post a Comment