Android: Pengenalan Layout

Ketika membuat suatu halaman dalam aplikasi Android, diperlukan tata letak komponen yang rapi sehingga tampilan aplikasi yang dibuat terlihat cantik. Ada beberapa tata letak atau layout yang bisa digunakan di Android, yaitu Linear Layout, Relative Layout, Table Layout, dan Tab Layout. Penggunaan berbagai macam layout tersebut selain Tab Layout akan didemokan dalam satu aplikasi yang diberi nama ‘HiLayout’.

Sebagai tahap awal, buatlah project Android ‘HiLayout’. Silakan diisi dengan detail project sebagai berikut.

Project name : HiLayout
Application name : hiLayout
Package name : alh.apps
Create Activity : HiLayout
Build Target : Android 2.2
Min SDK Version : 8

Jika project sudah sukses dibuat, kita akan temukan file HiLayout.java dalam folder src/alh.apps dan file main.xml dalam folder res/layout di bagian Package Explorer. Untuk keperluan demo layout, file main.xml tidak digunakan. Sebagai gantinya, kita akan membuat file xml baru, satu file untuk satu demo layout.

Linear Layout

LinearLayout adalah layout yang menampilkan elemen-elemen view dalam arah linear, vertikal atau pun horizontal. Ini adalah layout paling sederhana di Android. Mari lihat implementasinya di Android.

Buat file xml baru dengan nama linearlayout.xml. Caranya, klik kanan di folder res/layout di project ‘HiLayout’. Pada menu pop-up yang muncul, pilih New > Android XML File. Selanjutnya, silakan isikan nama file XML dengan linerlayout.xml.

Gambar 1. Pembuatan File XML

Jika sudah diisi dan tidak ada pesan error, klik Finish. Default-nya, file linearlayout.xml yang dibuat akan berisi sebagai berikut. File xml tersebut tidak berisi elemen view apapun di dalamnya.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>

</LinearLayout>

Nah, sekarang ubah isinya menjadi berikut ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

<TextView
android:text=”innovation for Indonesia..”
android:background=”#4c0000″
android:textSize=”10pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>

<TextView
android:text=”turn on our dreams!”
android:textSize=”13pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>

<Button
android:text=”ya!”
android:layout_marginTop=”30pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>

</LinearLayout>

Bisa kita lihat, tampilan yang dibuat akan memiliki tampilan teks (TextView) dan tombol (Button). Ukuran teks diatur melalui atribut android:textSize. Salah satu teks juga diberi warna background (latar belakang) dengan kode warna #4c0000 melalui atribut android:background.

Sekarang buka file HiLayout.java. Default-nya, isi file adalah sebagai berikut.

package alh.apps;

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

public class HiLayout extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Lakukan perubahan kecil pada method onCreate() sehingga kode berubah menjadi berikut.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.linearlayout);
}

Saat ini tampilan aplikasi sudah mengacu ke linearlayout.xml yang berada di folder res/layout. Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.Read More »

Advertisements

Swii Writer Here!

Alhamdulillah, after so long, finally i can publish one of my apps. I named this app Swii Writer, a java application. I idly built this app when i learned java programming language. I used SciTe text editor application for Swii Writer development. :mrgreen:

Image 1. Swii Writer

Swii Writer is simple text editor app for writing information what you like. It is featured with file management, editing, and formatting. Moreover, i then add cryptography touch to this app toRead More »

Ayo Berbagi Ilmu Programming di Blog WordPress.com dengan Syntax Highlighter!

Ikatlah ilmu dengan menuliskannya.

Kata-kata ajaib ini tampaknya bisa memotivasi kita untuk berbagi ilmu dengan menulis di blog gratisan semacam wordpress. Selain bermanfaat bagi orang lain, juga bisa meningkatkan traffic blog dan menambah amal kebaikan kita. 😀

Untuk kamu yang ingin berbagi mengenai ilmu programming dan ingin menuliskannya di blog wordpress.com, ada fitur menarik yang harus dicoba. Namanya syntax highlighter.

Syntax highlighter sebenarnya merupakan aplikasi open source yang dikembangkan melalui JavaScript buatan Alex Gorbatchev dengan lisensi GNU Lesser General Public License. Saat ini, aplikasi ini sudah terintegrasi di engine wordpress sehingga kita bisa langsung menggunakannya. Tanpa syntax highlighter didalamnya, penulisan kode programming di blog wordpress menjadi sulit.

Berikut adalah hasil penggunaan syntax highlighter.

public class HiWorld
{
	public static void main(String[] args)
	{
		//welcome in java programming
		System.out.println("hi world...:)");
	}
}

Bagaimana? bagus, kan? 😀
Untuk mendapatkan tampilan seperti di atas, kita bisa melakukan penulisan Read More »