Pemakaian RelativeLayout Pada XML Pemrograman Android

Pada contoh sebelumnya yang digunakan yaitu LinearLayout untuk XML, seperti contoh berikut ini :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

</LinearLayout>

LinearLayout ini mengakibatkan tampilan textview, button, edittext, ataupun yang lainnya susah untuk diatus sesuai dengan keinginan kita. Jika kita ingin mengatur bentuk seperti yang kita inginkan, seperti gambar dibawah ini :

Maka kita harus menggunakan RelativeLayout.

<RelativeLayout 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"
    tools:context=".MainVolKubus" >

</RelativeLayout>

Ok, silahkan anda membuat project baru.

Untuk tampilan awal project biasanya akan muncul Hello Word di tengah tengah layar. Tampilan tersebut bisa langsung anda hapus saja. Dan pada Layout memang sudah terbentuk RelativeLayout.

Silahkan anda rancang seperti layout berikut :

Pada perancangan tersebut, tinggal Click+DRAG+letakkan ke tempat seperti pada gambar.
Mudah bukan?

Nah pada Layout activity_main_vol_kubus.xml, rubah, ID, TEXT pada UI yang ada di layout, secara garis besar penamaannya seperti gambar dibawah ini

Lihat listing xml berikut ini :

<RelativeLayout 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"
    tools:context=".MainVolKubus" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="24dp"
        android:text="Menghitung Volume Kubus"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="36dp"
        android:text="Sisi" />

    <EditText
        android:id="@+id/esisi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignParentRight="true"
        android:ems="10" />

    <EditText
        android:id="@+id/evolume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/esisi"
        android:layout_marginTop="14dp"
        android:ems="10" />

    <Button
        android:id="@+id/btnhitung"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/evolume"
        android:layout_below="@+id/evolume"
        android:onClick="myClickHandler"
        android:text="Hitung" />

    <Button
        android:id="@+id/btnhapus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btnhitung"
        android:layout_alignBottom="@+id/btnhitung"
        android:layout_alignRight="@+id/textView1"
        android:onClick="myClickHandler"
        android:text="Hapus" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/evolume"
        android:layout_alignBottom="@+id/evolume"
        android:layout_alignLeft="@+id/textView2"
        android:text="Volume" />

</RelativeLayout>

NOTES yang di rubah, ID nya dan TEXT saja, yang saya BOLD kan saja.

Nah, setelah dirubah coba click Graphical nya.

Lihat gambar diatas, apakah seperti itu di layout anda? JANGAN TAKUT, hal ini karna yang kita rubah hanya ID dan TEXT saja. Untuk mengaturnya kembali, ya tinggal tarik seperti kita buat awal sebelumnya, ATUR POSISI kembali. Sehingga seperti gambar dibawah ini :
























Kemudian buat dan modifikasi program Java nya seperti berikut ini :

package com.example.hitungvkubus;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.EditText;

public class MainVolKubus extends Activity {
    private EditText eSisi, eVolume ;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_vol_kubus);
    }

    public void myClickHandler(View v){
        eSisi= (EditText) findViewById(R.id.esisi) ;
        eVolume= (EditText) findViewById(R.id.evolume) ;
        switch (v.getId()){
        case R.id.btnhitung:
                try{
                    int sisi= Integer.parseInt(eSisi.getText().toString()) ;
                    double luas = sisi * sisi * sisi ;   
                    eVolume.setText(String.valueOf(luas)) ;
                   
                }catch (Exception e) {
                    e.printStackTrace() ;
                }
                break ;
               
        case R.id.btnhapus:
            eSisi.setText("") ;
            eVolume.setText("") ;
            break ;
        }
               
    }

}

Jalankan aplikasi android anda, dan hasilnya seperti berikut ini :

Kalau di click hapus akan seperti gambar berikut, tampilan akan bersih.

Bila dijalankan pada HP Android seperti tampilan di bawah ini :

Silahkan download program pemakaian relative layout pada XML pemrograman android berikut ini : Pemakaian relativelayout pada xml pemrograman android.