Tutorial Penggunaan Layout

Selamat Pagi Pecinta Android.

Pada pemrograman android, pengaturan layout dasar akan sangat sering dilakukan melalui file XML (Extended Markup Language) yang nantinya akan diakses/dipanggil melalui class Java sebagai file utama pemrograman aplikasi yang dibuat.
Pada posting kali ini saya akan mencoba berbagi tentang penggunaan EditText, TextView dan Button pada pemrograman android dengan menggunakan file XML.

Langsung saja kita akan memulai tutorial ini,
1. Buat Project Baru New -> Android Project

2.Kita akan merubah Main.xml di Res->Layout->Main.xml . Untuk lebih mempermudah mencarinya lihat gambar dibawah ini :

3. Secara default file main.xml akan berisi script seperti ini:

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

4. Pada MainActivity, biasanya system akan langsung menuliskan script dasar seperti diatas. LinearLayout adalah salah satu bentuk Layout pada Android. Dengan menggunakan dasar Layout ini maka dasar aplikasi kita akan bersifat statis/fixed sehingga tidak bisa digerakkan/scroll.

Komponen TextView sendiri merupakan komponen yang akan menampilkan text. Dalam script ini maka yang ditampilkan adalah string dengan nama:hello pada file strings.xml. Untuk tutorial ini kita akan menghilangkan text tersebut dan mengosongkan karena kita akan menampilkan TextView berdasarkan inputan dari user. Kemudian rubah strukturnya sebagai berikut:

<TextView 
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:id="@+id/txtHasil"
       android:gravity="center_horizontal"
    />

Untuk menerima inputan, maka yang digunakan adalah EditText. Sebenarnya ada cara lain namun untuk dasar kita akan menggunakan EditText. Adapun script untuk membuatnya adalah sebagai berikut:

<EditText
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txtInput"
    android:layout_gravity="center_horizontal"
    />

Karena penempatan layout pada XML sifatnya tersusun dari atas ke bawah, maka letakkan EditText di atas TextView. Selanjutnya kita masukkan komponen Button sehingga susunan XML akan seperti ini:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    >        <EditText    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:id="@+id/txtInput"    android:layout_gravity="center_horizontal"    />        <Button    android:layout_width="150px"     android:layout_height="wrap_content"     android:id="@+id/btnInput"    android:layout_gravity="center_horizontal"    android:text="Tampilkan"    />        <TextView      android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:id="@+id/txtHasil"    android:gravity="center_horizontal"    /></LinearLayout>

5. Setelah selesai melakukan editing pada file XML, selanjutnya kita berpindah ke file java yaitu MainActivity.java. Secara default file ini akan berisi script sebagai berikut:

package com.selukbelukandroid.tutoriallayout;import android.app.Activity;import android.os.Bundle;public class main extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);    }}

 6. Kemudian untuk bisa mengakses komponen di file XML, kita terlebih dahulu mendeklarasikan komponen tersebut seperti ini:

public class main extends Activity {EditText inputUser;Button tombolInput;TextView tampilanHasil;

 7. Selanjutnya inisialisasi object tersebut didalam public void onCreate() seperti ini:

@Override
       public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        inputUser = (EditText)findViewById(R.id.txtInput);
        tombolInput = (Button)findViewById(R.id.btnInput);
        tampilanHasil = (TextView)findViewById(R.id.txtHasil);
       
    }

8. Kemudian karena kita akan menggunakan tombol/komponen Button maka kita harus mengimplementasi class OnClickListener seperti ini:

public class main extends Activity implements OnClickListener{}

9. Langkah selanjutnya kita perlu untuk mengimplementasi Button yang kita buat agar Button tersebut menerima aksi ketika ditekan. Caranya seperti ini:

tombolInput.setOnClickListener(this);

 10. Setelah diimplementasikan. Berikutnya kita akan membuat sebuah method untuk menangani aksi ketika Button di klik. Jika anda perhatikan, bahwa saat implementasi pada langkah ke 8, baris tersebut tertulis mengalami error. Itu dikarenakan belum adanya method ini.

@Override   public void onClick(View v) {      switch (v.getId()) {      case R.id.btnInput:      tampilanHasil.setText("Anda meng-inputkan : " +inputUser.getText().toString());         break;      default:         break;      }   }

11. Tampilan Full dari Main.xml adalah :

package com.selukbelukandroid.tutoriallayout;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import android.widget.TextView;public class main extends Activity implements OnClickListener{     EditText inputUser;   Button tombolInput;   TextView tampilanHasil;      /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                inputUser = (EditText)findViewById(R.id.txtInput);        tombolInput = (Button)findViewById(R.id.btnInput);        tampilanHasil = (TextView)findViewById(R.id.txtHasil);                tombolInput.setOnClickListener(this);            }   @Override   public void onClick(View v) {      switch (v.getId()) {      case R.id.btnInput:         tampilanHasil.setText("Anda meng-inputkan : "+inputUser.getText().toString());         break;      default:         break;      }   }}

12. Jika anda menuliskan dengan benar, seharusnya error pada langkah ke-9 tadi sudah hilang. Berikutnya anda bisa menjalankan program ini dengan hasil sebagai berikut:

  Selamat Mencoba :D