3. Komponen UI - Basic View

Yang akan kita pelajar pada artikel ini, yaitu :
* Cara menggunakan “Basic View” untuk mendesain UI
* Cara mendapatkan referensi objek yang kita tambahkan di xml
* Menambahkan event handler pada objek View

"Basic View" yang akan kita kenali yaitu :
1. TextView
2. EditText
3. Button
4. ImageButton
5. ImageView
6. Checkbox
7. ToggleButton
8. RadioButton
9. RadioGroup

a. Atribut
Untuk menentukan bagaimana objek View akan ditampilkan di layar maka kita perlu menambahkan atribut pada objek View.
Kita dapat menambahkan atribut pada tag xml.
Contoh : Mengatur atribut panjang dan tinggi suatu View dapat kita tentukan dengan menuliskan kode di bawah

    android:layout_width="match_parent"
    android:layout_height="wrap_content"

b. Identifier
Kita menggunakan atribut “id” pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Gunakan atribut id=”@+id/namaId” untuk menambahkan id pada objek View.

1. TextView
Textview dapat kita gunakan untuk menampilkan teks di layar. Baris kode xml di bawah merupakan atribut yang umum digunakan pada textView.



  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/myFirstText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:background="#e74c3c"
        android:textColor="#ecf0f1"
        android:textSize="20sp"
        android:text="Hello"/>

    <TextView
        android:id="@+id/mySecondText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1abc9c"
        android:textColor="#2c3e50"
        android:textSize="20sp"
        android:text="Ini teks kedua"/>
</LinearLayout>

2. EditText
Kita dapat menambahkan EditText dengan menuliskan kode xml berikut :

<EditText
    android:id="@+id/myTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:hint="Tuliskan sesuatu ..."/>

3. Button
Kita dapat menambahkan Button dengan menuliskan kode xml berikut :

<Button
    android:id="@+id/myButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:background="#2980b9"
    android:textColor="#FFFFFF"
    android:text="TOMBOL"/>

4. Image Button
Kita dapat menambahkan ImageButton dengan menambahkan kode xml berikut :

<ImageButton
    android:id="@+id/myImageButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>

5. ImageView
Kita dapat menambahkannya dengan menuliskan kode xml berikut :

 

<ImageView
    android:id="@+id/simpleImageView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#000"
    android:src="@drawable/lion"/>

6. Radiogroup, radiobutton, togglebutton, dan checkbox
Kita dapat menambahkannya dengan menuliskan kode xml berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RadioGroup
        android:id="@+id/myRadioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="first"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="second"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="third"/>
    </RadioGroup>

    <ToggleButton
        android:id="@+id/myToggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"/>

    <CheckBox
        android:id="@+id/myFirstCheckbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Autosave"/>

    <CheckBox
        android:id="@+id/mySecondCheckbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="?android:attr/starStyle"/>
    
</LinearLayout>

Cara mendapatkan referensi objek dan menambahkan event handler
Kita menggunakan atribut “id” pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Dan untuk menambahkan event handler klik pada tombol, gunakan interface setOnClickListener(...). Lihat potongan kode di bawah :

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/myButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="#2980b9"
        android:textColor="#FFFFFF"
        android:text="TOMBOL"/>
</LinearLayout>

Main Activity.java

setContentView(...);


// Mendapatkan referensi objek
Button button = (Button) findViewById(R.id.myButton);

// Menambahkan event handler ketika tombol diklik
button.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v){
        // Menampilkan pesan peringatan pada layar
        Toast.makeText(getApplicationContext(), "HELLO", Toast.LENGTH_LONG).show();
    }
});

Masih ada widget dan event handler lain yang bisa kita coba. Anda bisa mencoba semua komponen dan widget melalui component pallete pada Graphical Editor.

Jika ingin mempelajari lebih lanjut, silakan baca sumber materi pemrograman android di internet atau menggunakan buku di bawah :

Professional Android 4 Development (Reto Meier) : Chapter 4 Building User Interfaces, Lihat dari Halaman 132
Beginning Android Application Development (Wei Meng Lee) : Chapter 5 Designing Your User Interface with Views