Android Layout

Versi 1.0

1. Mengenal Layout

Layout merupakan salah satu komponen user interface pada aplikasi Android yang berperan sebagai suatu grup yang terstruktur dari beberapa komponen user interface (view). Layout ini menggabungkan beberapa view seperti Button dan Text Fields atau yang lain yang disusun menjadi sebuah halaman aplikasi Android. Layout ada dua yaitu Linear Layout dan Relative Layout.

1.1. Linear Layout
Linear Layout adalah layout yang menggabungkan view dalam satu urutan secara vertikal atau horizontal. Linear Layout dibuat dengan elemen xlm <Linearlayout>. Urutan dari LinearLayout didefinisikan pada atribut android:orientation dengan value vertical atau horizontal. Contoh Linear Layout adalah sebagai berikut.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
1.2. Relative Layout
Relative Layout adalah layout yang menyusun view-view di dalamnya sebagai view anak secara relatif. Penyusunan view-view anak, dilakukan secara relatif terhadap sesama view anak atau relatif terhadap view induk. Relative Layout lebih fleksibel digunakan untuk membuat halaman user interface dibandingkan dengan Linear Layout.
Pengaturan posisi view yang relatif terhadap view lain, antara lain menggunakan atribut berikut ini:

  • android:layout_toRightOf
  • android:layout_toLeftOf
  • android:layout_below
  • android:layout_above

Pengaturan posisi view yang relatif terhadap view induk, antara lain menggunakan atribut berikut ini:

  • android:layout_alignParentTop
  • android:layout_alignParentBottom
  • android:layout_centerVertical
  • android:layout_centerHorizontal

Contoh penggunaan Relative Layout :

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

    <EditText
        android:id="@+id/input1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/input2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/input1"
        android:layout_toLeftOf="@+id/button1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/input1" />

    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1" />

</RelativeLayout>

2. Menampilkan Layout

Layout ditampailkan pada aplikasi dengan memanggil setContentView() di dalam fungsi onCreate() dengan memberikan parameter layout yang akan ditampilkan. Misalnya kita tampilkan Linear Layout dari contoh pada poin 1.1. di atas yang telah kita simpan pada file xml linear_layout.xml pada folder layout,  maka code dari fungsi onCreate() adalah sebagai berikut :
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
1
Untuk menampilkan Relative Layout pada contoh poin 2.2. di atas yang telah kita simpan pada file xml relative_layout.xml pada folder layout, maka code dari fungsi onCreate() adalah sebagai berikut :
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relative_layout);
    }
2
Iklan

Android Button

Versi 1.0

1. Mengenal Button

Button adalah perangkat user interface pada Android yang berupa tombol. Button merupakan salah satu hal wajib pada aplikasi Android. Karena banyak aktivitas pada aplikasi Android yang membutuhkan Button untuk mengeksekusinya, seperti Login, Logout, Pencarian, atau Menu. Button dapat berisi tulisan, gambar, atau kombinasi keduanya.

1.1. Button Text
Button Text adalah Button dengan tulisan yang dapat dibuat dengan elemen <Button> seperti berikut ini.
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pencarian" />

3

1.2. Image Button
Image Button adalah Button yang dengan tampilan sebuah gambar/image yang dapat dibuat dengan ImageButton. Gambar yang kita jadikan sebagai tombol dapat kita atur sesuai keinginan kita. Misalnya kita akan membuat tombol pencarian dengan memberikan gambar kaca pembesar seperti ini.
button_search
Tombol kita beri nama button_search.png dan kita letakkan pada folder res/drawable-hdpi pada project seperti ini.
1
ImageButton dapat dibuat dengan element <ImageButton> seperti berikut ini.
    <ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_search" />
2

Atribut android:src digunakan untuk mengambil file gambar pada ImageButton. ImageButton mengambil gambar yang bernama button_search.png pada folder drawable.

1.3 Button dengan Text dan Image
Button dengan Text dan Image bisa kita buat dengan elemen <Button> yang memakai atribut android:drawableLeft seperti berikut ini.
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pencarian"
        android:drawableLeft="@drawable/button_search" />

4

Atribut android:drawableLeft mengambil file gambar bernama button_search.png pada folder drawable seperti pada ImageButton.

2. Event Handling Pada Button

Ketika pengguna menekan Button, maka Button menerima event yang bernama on-click. Event ini bisa kita tangkap untuk menentukan reaksi apa yang timbul akibat Button yang ditekan. Misalnya kita buat tombol yang akan menampilkan suatu pesan setelah tombol tersebut ditekan. Kita buat dulu xml-nya seperti di bawah ini dan simpan pada file dengan nama button_event.xml pada folder layout.
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Klik aja"
        android:drawableLeft="@drawable/love" />
Pada code tersebut ada atribut android:id=“@+id/button_1”. Atribut inilah yang dipakai untuk mengenali Button satu dengan lainnya. Button tersebut memiliki id yang bernama button_1. Selain xml, kita juga harus membuat code pemrograman di bawah ini. Buka class MainActivity.java, hapus fungsi onCreate() dan ganti dengan code di bawah ini.
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // menampilkan Button dengan event handler
        setContentView(R.layout.button_event);

        // Event handler pada Button
        Button button = (Button) findViewById(R.id.button_1);
        button.setOnClickListener(new View.OnClickListener() {		
                @Override
		public void onClick(View arg0) {
			Toast.makeText(MainActivity.this, 
					"Love will find you if you try", 
					Toast.LENGTH_LONG).show();
		}
	});
    }
Code tersebut mengambil object Button dari xml yang memiliki id bernama button_1. Fungsi setOnClickListener dari object Button yaitu menerima event klick yang kemudian diolah oleh fungsi onClick. Di dalam fungsi onClick inilah kita dapat menentukan reaksi yang timbul akibat Button yang diklick atau ditekan. Bila xml dan code diatas kita jalankan, maka akan menghasilkan tombol dan pesan yang tampil sesaat setelah tombol ditekan, seperti ini.
5
Yap, “Love will find you if you try” hadir sebagai penutup materi kali ini. Jadi buat yang lagi belajar bikin aplikasi Android dan masih jomblo, jangan menyerah, coba dan coba terus maka kamu akan berhasil membuat aplikasi Androidmu sekaligus mendapatkan cintamu. See you … 🙂

Android Text Fields

Versi 1.0

1. Mengenal Text Fields

Text Fields adalah salah satu bagian dari user interface Android yang digunakan untuk menulis data/informasi yang diinputkan oleh pengguna aplikasi. Text Fields dibuat dengan elemen <EditText> pada xlm layout. Untuk membuat Text Fields, kita buat dulu project Android baru, buka folder res/layout dan buka file activity_main.xml. Bagi yang belum mengerti cara membuat project Android, bisa mampir dulu di artikel ini . Hapus semua isi xml tersebut, dan tulis code xml di bawah ini.
    <EditText xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

Jalankan project tersebut, Text Fields akan tampil seperti berikut ini.

1

2. Tipe Input pada Text Fields

Text Fields memiliki beberapa tipe input seperti angka, password, atau email. Tipe input pada Text Fields ini berpengaruh pada karakter apa saja yang diijinkan untuk tampil pada Text Fields dan berpengaruh pula pada tampilan keyboard virtual pada device yang menampilkan karakter yang sering digunakan pada tipe input, seperti tipe input textEmailAddress maka keyboard virtual akan menampilkan karakter ‘@’ pada salah satu tombolnya. Tipe input ini bisa diberikan pada Text Fields dengan memberikan atribut android:inputType pada elemen <EditText> seperti berikut.
    <EditText xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width= "fill_parent"
        android:layout_height= "wrap_content"
        android:inputType= "textEmailAddress" />
Berikut ini tipe-tipe input pada Text Fields :
  • “text” : Karakter keyboard normal
  • “textEmailAddress” : Karakter keyboard nomal dengan karakter ‘@’ pada salh satu tombolnya
  • “textUri” : Karakter keyboard nomal dengan karakter ‘/’ pada salh satu tombolnya
  • “number” : Karakter angka pada Text Fields dan keyboard
  • “phone” : Keyboard seperti keypad telpon
  • “textCapSentences” : Karakter keyboard normal dengan huruf besar pada setiap awal kalimat.
  • “textCapWords” : Karakter keyboard normal dengan huruf besar pada setiap kata. Cocok digunakan untuk judul atau nama.
  • “textAutoCorrect” : Karakter keyboard normal yang mengoreksi kata-kata yang salah (kata dalam Bahasa Inggris).
  • “textPassword” : Karakter normal keyboard dengan karakter yang disembunyikan dalam titik.
  • “textMultiLine” : Karakter normal keyboard untuk tulisan yang panjang dengan memperbolehkan ganti baris.
Tipe-tipe pada Text Fields ini dapat digunakan secara bersamaan, seperti pada Text Fields untuk membuat deskripsi seperti berikut.
    <EditText
        android:id="@+id/description"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapSentences|textAutoCorrect|textMultiLine" />

3. Membuat Petunjuk Pada Text Fields

Petunjuk pada Text Fields digunakan untuk memberi tahu pengguna dalam mengisi Text Fields, seperti pengisian email dan password pada form login. Petunjuk bisa diberikan kepada Text Fields dengan memberikan atribut android:hint pada element seperti berikut ini.
    <EditText xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height= "wrap_content"
        android:hint= "password"
        android:inputType= "textPassword" />
2