Teknik Layouting User Interface Aplikasi Android

Tampilan atau User Interface aplikasi Android memang sangat penting sebagai interpretasi dan tolok ukur keren atau tidaknya aplikasi kita. User atau pemakai aplikasi sekarang tampaknya memang sudah pintar memilah mana aplikasi yang berkualitas dan tidak, biasanya mereka menilai dari tingkat keeleganan sebuah aplikasi Android.

Untuk masalah tampilan, Android memiliki bahasa pemrograman sendiri yang disebut XML. Basis utama user interface terletak disini. Oleh karena itu, penulis akan mencoba membagikan sebuah tutorial XML mengenai teknik pengaplikasian XML untuk aplikasi Android anda.

Penggunaan RelativeLayout

Dalam XML Android, kita mengenal RelativeLayout. Layout model ini memungkinkan kita untuk menentukan letak posisi dari sebuah objek secara fleksibel. Kita bisa meletakkan sebuah objek diberbagai posisi, tentunya masih dalam cakupan layar ponsel Android.

Untuk lebih memberikan efek teratur dan mudah dipahami, menggunakan relative layout sangat disarankan agar setiap objek diberi sebuah ID. Identitas masing-masing objek ini nantinya akan kita gunakan untuk menentukan dan memposisikan objek lain. Misalnya :

• Ada sebuah button yang akan diletakkan dibagian tengah layar dan posisinya paling atas, kita bisa memakai tag android:layout_alignParentTop dengan nilai ‘true‘, berikut adalah contohnya :

Button Parent Top

Script untuk peletakan gambar button adalah sebagai berikut :

<Button
        android_id="@+id/myButton"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerHorizontal="true"
        android_layout_centerVertical="true"
        android_layout_alignParentTop="true"
        android_background="@drawable/my_button" />

Bisa kita lihat dari source code, nama id dari button diatas adalah myButton. Pastikan tag button diatas terletak di dalam tag RelativeLayout. Penambahan id myButton akan kita pakai sebagai patokan objek lain yang akan diletakkan disamping atau bawah objek myButton.

• Kemudian kita akan meletakkan sebuah button lagi, dan letaknya persis dibawah objek myButton yang sudah kita buat diatas.

Button Below Objek

Source code untuk penambahan button pada posisi diatas adalah sebagai berikut :

    <!-- Button terletak dibawah button atas -->
    <Button
        android_id="@+id/myButtonDua"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_marginTop="10dp"
        android_layout_centerHorizontal="true"
        android_layout_below="@+id/myButton"
        android_background="@drawable/my_button" />

Tulis kode diatas tepat di bawah wrap tag kode myButton. Untuk objek kedua ini, penulis menamakannya dengan menambah id bernama myButtonDua. Pembaca bisa melihat script android:layout_below yang berisi id myButton, artinya objek yang baru saja kita buat akan berada persis di bagian bawah objek id yang ditunjuk.

Penggunaan LinearLayout

LinearLayout merupakan mode layout di pemrograman XML Android yang memiliki prinsip dasar horizontal dan vertical. Maksudnya adalah layout yang dihasilkan mengikuti orintasi yang didefinisikan pada tag layout. Layouting menggunakan mode Linearlayout akan sangat berguna jika pembaca ingin membuat form (misalnya registrasi atau tambah data).

Untuk lebih jelasnya coba tulis script berikut untuk membuat form sederhana :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical" >

    <TextView
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_paddingTop="5dp"
        android_text="Nama Anda"
        android_textColor="#37abc8"
        android_textStyle="bold" />

    <EditText
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_inputType="text" />

    <TextView
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_paddingTop="5dp"
        android_text="Alamat Anda"
        android_textColor="#37abc8"
        android_textSize="15dp"
        android_textStyle="bold" />

    <EditText
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_inputType="text" />

    <Button
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_gravity="center"
        android_padding="10dp"
        android_text="Simpan" />

</LinearLayout>

Dari source code di atas, akan menghasilkan tampilan berikut :

Linear Layout Android

Kita bisa melihat Linear Layout diatas memiliki orientasi vertical. Dan untuk membuat masing-masing objek textview dan editText berada berurutan kita menggunakan width layout yang berisi fill_parent. Fill parent dimaksudkan agar objek akan memenuhi panjang dari resolusi layar bidang baris.

Sekian tutorial layouting dari saya, tutorial selanjutnya akan saya bahas mengenai layouting menggunakan TableLayout yang tentunya dapat kita pakai juga untuk mempermudah pembuatan form maupun tabel pada aplikasi Android.