sumber:

http://developer.android.com/training/basics/firstapp/building-ui.html#Weight

Membangun User Interface

Dalam materi ini, anda menciptakan layout dalam XML yang meliputi text field dan button.
dalam materi selanjutnya, aplikasi menanggapi saat button ditekan dengan mengirimkan
konten text field ke activity lain.

Graphical user interface dari aplikasi Android dibangun menggunakan hierarchy dari objek
View dan ViewGroup. Objek View berupa UI widgets seperti buttons atau text fields. Objek
ViewGroup adalah kontainer tidak terlihat yang mendefinisikan bagaimana child views
disusun, seperti dalam grid atau vertical list.

Android menyediakan XML vocabulary yang bersesuaian ke subclasses dari Viewdan

ViewGroupsehingga anda dapat mendefinisikan UI anda dalam XML menggunakan hierarchy
dari elemen UI.

Layouts adalah subclasses dari ViewGroup. Dalam latihan ini, anda akan bekerja dengan
LinearLayout.

Gambar 1. Ilustrasi objek ViewGroup membentuk cabang dalam layout dan berisi objek View lain.

Menciptakan Linear Layout

1. Dari direktori res/layout, buka file activity_main.xml.

Template blank Activity yang diciptakan dalam project ini dalam file activity_main.xml
dengan root view RelativeLayout dan child view TextView.

2. Hapus elemen <TextView>.

3. Ubah elemen <RelativeLayout>menjadi <LinearLayout>.
 4. Tambahkan atribut android:orientationdan diset ke "horizontal".
5. Hilangkan atribut android:padding dan atribut tools:context.

Hasil akhir menjadi seperti ini:

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 dariViewGroup) yang memberikan layout child
view dalam orientasi vertical atau horizontal, seperti halnya ditentukan dengan atribut
android:orientation. Setiap child dari LinearLayoutmuncul pada layar dengan urutan seperti
tertulis dalam XML.

Dua atribut lainnya, android:layout_widthdanandroid:layout_height, dibutuhkan untuk

seluruh views dalam rangka untuk menentukan ukurannya.

Karena LinearLayoutadalah root view dalam layout, maka ini akan mengisi seluruh area layar
yang tersedia dengan menseting width dan height menjadi "match_parent". Nilai ini
mendeklarasikan bahwa view akan meng-expand secara width atau height menjadi cocok
(sesuai) dengan width atau height dari parent view.

Menambahkan Text Field

1. Dalam file activity_main.xml, didalam elemen <LinearLayout>, definisikan
elemen<EditText>dengan atributiddiset menjadi @+id/edit_message.
2. Definisikan atribut layout_widthdan layout_heightdengan wrap_content.
3. Definisikan atribut hintsebagai objek string dinamai edit_message.

Elemen <EditText>akan terbaca seperti 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"/>

Di sini atribut-atribut<EditText>yang anda tambahkan:

android:id
 Pengenal unik digunakan untuk mengacu objek dari kode aplikasi, seperti untuk
membaca dan memanipulasi objek.

Tanda (@) dibutuhkan saat anda mengacu ke objek resource dari XML. Kemudian
diikuti dengan tipe resource (id dalam kasus ini), tanda slash, kemudian nama
resource (edit_message).

Resource Objects

Objek resource adalah nama integer unik yang berasosiasi dengan resource aplikasi,
misalnya bitmap, file layout, atau string.

Setiap resource mempunyai objek resource yang bersesuaian yang didefinisikan

dalam file gen/R.java. Anda dapat menggunakan nama-nama objek dalam kelas Runtuk
mengacu ke resources anda, seperti pada saat anda membutuhkan untuk
menentukan nilai string untuk atribut android:hint.

Tolls SDK membangkitkan file R.javapada saat proses kompilasi aplikasi. Anda tidak
akan pernah memodifikasi file ini langsung dengan tangan.

Tanda plus (+) sebelum tipe resource dibutuhkan hanya pada saat anda sedang
mendefinisikan resource ID saat pertama kali. Pada saat anda mengkompilasi app,
SDK tools menggunakan nama ID untuk menciptakan resource ID baru dalam file
project gen/R.javayang mengacu ke elemen EditText. With the resource ID declared
once this way, other references to the ID do not need the plus sign. Using the plus
sign is necessary only when specifying a new resource ID and not needed for
concrete resources such as strings or layouts.

android:layout_width and android:layout_height

Penggantinya anda menggunakan ukuran tertentu untuk width dan height, nilai
"wrap_content"menentukan bahwa view akan menjadi sebesar yang dibutuhkan
untuk memasukkan konten dari view. Jika anda isi dengan "match_parent", maka
elemenEditTextakan mengisi sepenuh layar, karena ini akan cocok dengan ukuran
parent LinearLayout.

android:hint

Adalah default string yang ditampilkan saat text field kosong. Sebagai ganti menggunakan
hard-coded string sebagai nilai, nilai "@string/edit_message"mengacu ke string
resource yang didefinisikan dalam file terpisah. Karena ini mengacu ke resource nyata (not
just an identifier), maka tidak dibutuhkan tanda plus.
 Note: This string resource has the same name as the element ID: edit_message.
However, references to resources are always scoped by the resource type (such as id
or string), so using the same name does not cause collisions.

Menambah String Resources

Project Android anda menyertakan file string resource pada res/values/strings.xml. Anda
tambahkan string baru dinamai "edit_message"dan set nilai menjadi "Enter a message."

1. Dari direktorires/values directory, buka strings.xml.

2. Tambahkan baris untuk string yang dinamai "edit_message"dengan nilai, "Enter a
message".
3. Tambahkan baris untuk string yang dinamai"button_send"dengan nilai, "Send".

You'll create the button that uses this string in the next section.

4. Hapus baris untuk string "hello world".

Hasil dari strings.xmlmenjadi seperti ini:

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.

Menambah Button

1. In Android Studio, from the res/layout directory, edit the activity_my.xml file.
 2. Within the <LinearLayout> element, define a <Button> element immediately
following the <EditText> element.
3. 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.
4. 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.

Membuat Input Box Fill dalam Selebar Layar

To fill the remaining space in your layout with the EditText element, do the following:

1. In the activity_my.xml file, assign the <EditText> element's layout_weight

attribute a value of 1.
2. Also, assign <EditText> element's layout_width attribute a value of 0dp.

res/layout/activity_my.xml

<EditText
android:layout_weight="1"
android:layout_width="0dp"
... />

To improve the layout efficiency when you specify the weight, you should change the
width of the EditText to be zero (0dp). Setting the width to zero improves layout
performance because using "wrap_content" as the width requires the system to
calculate a width that is ultimately irrelevant because the weight value requires
another width calculation to fill the remaining space.

Figure 3 shows the result when you assign all weight to the EditText element.

Figure 3. The EditText widget is given all the layout weight, so it fills the remaining
space in the LinearLayout.

Here’s how your complete activity_my.xmllayout file should now look:

res/layout/activity_my.xml

<?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">
<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 Aplikasi

This layout is applied by the default Activity class that the SDK tools generated when you
created the project. Run the app to see the results:

 In Android Studio, from the toolbar, click Run .

 Or from a command line, change directories to the root of your Android project and
execute:

ant debug
adb install bin/MyFirstApp-debug.apk

Continue to the next lesson to learn how to respond to button presses, read content from the
text field, start another activity, and more.