Form Pada Android

Pada tutorial kali ini akan membuat form atau UI(User Interface) di android, mulai dari TextView, EditText, Button, Spinner(DropDown List), dll

Pada tutorial ini menggunakan Eclipse 3.7 dan Android 2.2

Buat project android beri nama UIAndroid, untuk mengetahui bagaimana membuat project android ada pada tutorial sebelumnya (Memulai Project Android).

Buka main.xml dan modifikasi menjadi sebagai berikut

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/textView" >
    </TextView>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onButtonClicked"
        android:padding="10dp"
        android:text="@string/button" >
    </Button>

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

    <EditText
        android:id="@+id/passwordText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" 
        android:hint="@string/password">
    </EditText>
    
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    </Spinner>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onCheckboxClicked"
        android:text="@string/checkItOut" >
    </CheckBox>

    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/radioRed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onRadioButtonClicked"
            android:text="@string/red" >
        </RadioButton>

        <RadioButton
            android:id="@+id/radioBlue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onRadioButtonClicked"
            android:text="@string/red" >
        </RadioButton>
    </RadioGroup>

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onToggleClicked"
        android:textOff="@string/vibrateOff"
        android:textOn="@string/vibrateOn" >
    </ToggleButton>

</LinearLayout>

Pada code diatas terdapat fill_parent dan wrap_content pada component attribute layout_width atau layout_height.
fill_parent - menjelaskan bahwa component ini akan mengikuti panjang dari parentnya atau mengisi ruang yang tersisa dari si parent
wrap_content - menjelaskan bahwa component yang akan ditampilkan berdasarkan besaran dari dirinya sendiri misalkan dari isi text
android:hint="@string/editText" Text hint pada Edit text, isinya mengacu pada file strings.xml pada folder res/values

Secara umum, menentukan lebar dan tinggi tata letak menggunakan unit seperti piksel tidak dianjurkan. Sebaliknya, menggunakan pengukuran relatif seperti density-independent pixel units (dp), wrap_content, atau fill_parent, adalah yang lebih baik, karena membantu memastikan bahwa aplikasi akan ditampilkan dengan benar di berbagai ukuran layar perangkat

Text View
UIAndroid
Button
Edit Text
Password
Check it out
Merah
Biru
Vibrate off
Vibrate on    

Dan sekarang pada bagian javanya, buka file UIAndroidActivity.java modifikasi filenya

package com.samz.uiandroid;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnKeyListener;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.ToggleButton;

public class UIAndroidActivity extends Activity {

 private Spinner spinner;
 private EditText editText;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  editTextAction();
  addItemsOnSpinner();
 }

 // button click
 public void onButtonClicked(View v) {
  Toast.makeText(UIAndroidActivity.this, "Button clicked",
    Toast.LENGTH_SHORT).show();
 }

 // edit text
 public void editTextAction() {
  editText = (EditText) findViewById(R.id.editText);
  editText.setOnKeyListener(new OnKeyListener() {
   public boolean onKey(View v, int keyCode, KeyEvent event) {
    // TODO Auto-generated method stub
    // Aksi jika tekan enter
    if ((event.getAction() == KeyEvent.ACTION_DOWN)
      && ((keyCode == KeyEvent.KEYCODE_ENTER))) {
     Toast.makeText(UIAndroidActivity.this, editText.getText(),
       Toast.LENGTH_SHORT).show();
     return true;
    }
    return false;
   }
  });

 }

 // Tambah item pada spinner
 public void addItemsOnSpinner() {
  spinner = (Spinner) findViewById(R.id.spinner);
  List<String> list = new ArrayList<String>();
  list.add("list 1");
  list.add("list 2");
  list.add("list 3");
  ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, list);
  dataAdapter
    .setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  spinner.setAdapter(dataAdapter);
 }

 // check box click
 public void onCheckboxClicked(View v) {
  if (((CheckBox) v).isChecked()) {
   Toast.makeText(UIAndroidActivity.this, "Selected",
     Toast.LENGTH_SHORT).show();
  } else {
   Toast.makeText(UIAndroidActivity.this, "Not selected",
     Toast.LENGTH_SHORT).show();
  }
 }

 // radio button click
 public void onRadioButtonClicked(View v) {
  RadioButton rb = (RadioButton) v;
  Toast.makeText(UIAndroidActivity.this, rb.getText(), Toast.LENGTH_SHORT)
    .show();
 }

 // toggle click
 public void onToggleClicked(View v) {
  if (((ToggleButton) v).isChecked()) {
   Toast.makeText(UIAndroidActivity.this, "Toggle on",
     Toast.LENGTH_SHORT).show();
  } else {
   Toast.makeText(UIAndroidActivity.this, "Toggle off",
     Toast.LENGTH_SHORT).show();
  }
 }

}

Selamat mencoba semoga bermanfaat.
Download source code disini

Reference
http://developer.android.com/resources/tutorials/views/hello-formstuff.html

Kunjungi situs kami di PT Samz Solution