Membuat User Interface Dasar Pada Aplikasi Android

Pada tutorial Programming Android kali ini kita akan sama-sama mempelajari tentang User Interface (UI) pada aplikasi android. Secara umum arsitektur user interface pada aplikasi android adalah user interface yang meliputi activity dan user interface yang terdiri dari komponen.
Semua yang berhubungan dengan user interface biasanya berada pada lokasi res/layout/filename.xml dimana coding java untuk memanggilnya yang kita kenal dengan R.layout.filename.

Dalam tutorial User Interface (UI) ini kita akan menggunakan file AndroidManifest.xml. Di dalam file ini berisi semua pendefinisian hal-hal yang dibutuhkan oleh aplikasi android kita. File AndroidManifest.xml ini diperlukan oleh setiap aplikasi android, file ini berada di folder root aplikasi, file ini mendeskripsikan variabel global dari paket aplikasi yang kita gunakan, file ini juga berfungsi untuk menderskripsikan resource apa saja yang akan digunakan oleh project seperti koneksi internet, sms, mengakses gps, dll. Anda bisa mempelajari lebih detail definisi-definisi yang ada pada AndroidManifest.xml disini.
Untuk memudahkan dalam mempelajarinya, kita akan langsung mencoba membuat aplikasi user interface sederhana yang akan dibagi dalam beberapa tahap. Untuk yang masih kurang paham bagaimana langkah-langkah memulai suatu project, bisa dibaca di artikel Membuat Program Hello Android.

User Interface 1

Buat project android seperti berikut:
Application Name                    : UIandroid1
Project Name                           : UIandroid1
Package Name                         : com.android.uiandroid1
Minimum Required SDK       : Andoid 2.2
Target SDK                              : Android 4.2
Yang lain biarkan default.
Ganti Activity Name menjadi UIandroid1 dan Layout Name menjadi activity_uiandroid1.
Buka root folder src/com.android.uiandroid1/UIandroid1.java

package com.android.uiandroid1;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu


public class UIandroid1 extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_uiandroid1);
    }
}

UIandroid1.java diatas berarti hanya menampilkan isi dari activity_uiandroid.xml, hal ini ditunjukan dengan coding setContentView(R.layout.activity_uiandroid.xml), itu berarti user interface dihandle sepenuhnya di activity_uiandroid.xml.

Buka root folder res/layout/activity_uiandroid.xml tuliskan coding seperti berikut

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"
    tools:context=".UIandroid1" >
    <TextView 
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Halo.. Ini aplikasi user interface pertamaku.." />
    <Button 
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button" />
</LinearLayout>

Didalam activity_uiandroid.xml ini terdiri dari dua komponen yaitu TextView dan Button. TexView dengan nama variabel id/text serta Button dengan nama variabel id/button, dimana kedua komponen itu ditampilkan dengan layout wrap_content. Tampilan wrap_content akan membuat layout untuk elemen tersebut selebar dan setinggi tulisan dari elemen tersebut, jika kita isi dengan fill_parent maka akan membuat tulisan mengisi layar secara penuh (layar yang tersedia space untuk elemen tersebut).

Buka AndroidManifest pada root folder bin/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.uiandroid1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.android.uiandroid1.UIandroid1"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

package=”com.android.uiandroid1” adalah definisi package dari aplikasi yang kita buat. Ada dua buah intent yang umumnya wajib dimiliki oleh aplikasi android yaitu:
action android:name="android.intent.action.MAIN" dan category android:name="android.intent.category.LAUNCHER"
Didalam file diatas kita dapat melihat definisi minimum SDK android yang bisa digunakan untuk mengeksekusi aplikasi, seperti yang kita buat pada awal project.
Sekarang running aplikasi, maka akan menghasilkan seperti berikut:

User Interface 2

Sebenarnya Anda bisa merubah-rubah tata letak tulisan dengan menambahkan beberapa coding pada TextView seperti berikut diantaranya android:layout_above, android:layout_alignBottom, android:layout_alignLeft, dll. Anda bisa melihat lebih lengkap di developer.android.com.
Namun pada contoh kali ini kita hanya akan mencoba menggunakan konsep Tabel untuk membuat text user interface menjadi teratur.
Ubah coding yang ada pada file activity_uiandroid1.xml menjadi seperti berikut:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"
    tools:context=".UIandroid1" >
	<TableRow>
		<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Elemen satu A" />

		<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Elemen satu B" />
	</TableRow>

	<TableRow>
		<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Elemen dua A" />
		
		<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Elemen dua B" />
	</TableRow>
</TableLayout>

Perubahan pada coding jelas terlihat pada TextView yang sekarang dibungkus dengan TableRow, dengan konsep tabel ini akan membuat teks menjadi lebih teratur. Jalankan aplikasi maka akan menampilkan seperti berikut:

User Interface 3

Pada contoh ketiga kita akan mencoba membuat tampilan form username dan password. Anda bisa membuat project dari awal atau mengubah file layout activity_uiandroid1.xml menjadi seperti berikut:

<ScrollView xmlns:android= "http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"
    tools:context=".UIandroid1" >

	<LinearLayout
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TextView
	android:text="Halaman Login"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"/>
	<TextView
	android:text="Username:"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"/>
	<EditText
	android:id="@+id/username"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:hint="username"/>
	<TextView
	android:text="Password:"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"/>
	<EditText
	android:id="@+id/password"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:inputType ="textPassword"
	android:hint="password"/>
	<Button
	android:id="@+id/loginbutton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Login"/>
	<TextView
	android:id="@+id/status"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:textStyle="normal"
	android:text="Masukan Username and Password"/>

	</LinearLayout>
</ScrollView>

Running aplikasi akan menampilkan seperti berikut:

User Interface 4

Pada contoh terakhir ini kita akan mencoba membuat UI checkbox dengan menambahkan beberapa perintah kali ini pada file java UIandroid1.java. Tambahkan coding berikut:

package com.android.uiandroid1;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.CheckBox;
import android.widget.CompoundButton;

public class UIandroid1 extends Activity
	implements CompoundButton.OnCheckedChangeListener {
		CheckBox cb;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_uiandroid1);
	}
	
	public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
		if (isChecked) {
			cb.setText("checkbox : checked");
		}
		else {
			cb.setText("checkbox : unchecked");
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.uiandroid1, menu);
		return true;
	}

}

Kemudian ubah juga file layout activity_uiandroid1.xml menjadi seperti berikut:

<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/check"
    android:layout_width="wrap_content"
	android:layout_height="wrap_content"
    android:text="checkbox : unchecked"
    tools:context=".UIandroid1" />

Running aplikasi dan hasilnya akan seperti berikut:

Perubahan atau penambahan komponen didalam layout sebenarnya tidak harus dilakukan dengan coding manual, akan tetapi bisa dilakukan dengan visual Graphical Layout dengan cara mendrag komponen-komponen yang ingin ditambahkan didalam layout. Dengan cara ini tentunya akan lebih memudahkan dan lebih menghemat waktu dalam mendesain layout.

Untuk menambah inspirasi Anda dalam mendesain layout, mungkin artikel kami bisa menjadi referensi, Anda bisa membaca pada artikel yang membahas tentang Tren Desain Aplikasi Mobile Tahun 2014
Sekian tutorial Android kali ini, source code pada tutorial ini bisa Anda download di akun Github kami disini. Semoga bermanfaat. #HappyCoding

You may also like...

2 Responses

  1. muhamad ridwan says:

    selamat sore min. artikel nya bagus banget ni 🙂
    bisa menghubungi saya lewat e_mail ?
    kalo bisa tolong ya min , saya ada project tntang android dan lumayan ada masalah hehehe
    di tunggu ya min

  1. May 12, 2015

    […] Pada tutorial Programming Android kali ini kita akan membuat Spinner View yang merupakan salah satu cabang dari User Interface (UI) yang sudah pernah kita buat pada tutorial Membuat User Interface Dasar Pada Aplikasi Android. […]

Leave a Reply

Your email address will not be published. Required fields are marked *