Kesan saya saat pertama kali mencoba merancang antarmuka aplikasi Android di Eclipse, rasanya tidak nyaman. Walaupun disediakan fasilitas drag and drop untuk mempermudah, namun kenyataanya justru mempersulit. Fasilitas ini lebih berguna untuk sekedar memasukkan komponen antarmuka/layout dan melihat hasil tampilan WYSIWYG dari XML.

Sebelum kembali mengandalkan XML, saya mencoba alternatif lain cara perancangan antarmukanya, berharap ada cara yang lebih intuitif.

  • Saya coba DroidDraw dan draw-9 patch yang disertakan dalam SDK Android. Begitu melihat tampilan antarmukanya, saya sudah pesimis. Nggak meyakinkan. Cuma sampai mencoba drag and drop beberapa komponen, lalu saya drop beneran. Saya lupakan, hehe…

Droid Draw

  • Saya coba web FluidUI yang menyediakan fungsi membuat mockup antarmuka aplikasi untuk berbagai mobile platform, mulai dari Android sampai iPad untuk berbagai ukuran layar. Dilengkapi library untuk berbagai versi Android untuk membantu komponen antarmuka yang misalnya baru ada di SDK Android versi tertentu.

    • Pros: Membantu membuat mockup  dengan cepat, disertai animasi transisi layar yang diinginkan. Cocok untuk desainer yang tidak mau menyentuh pemrograman sama sekali.
    • Cons: Tidak menghasilkan file layout XML sehingga tetap harus dibuat ulang dalam versi yang bisa dijalankan di Android (dua kali kerja). Selain itu, ukuran zoom tidak nyaman waktu saya coba merancang seukuran tablet 7’’ ke atas.
  • Saya coba framework yang menggunakan kombinasi HTML 5 dan Java Script untuk membuat aplikasi mobile yang sekali dibuat, dapat diubah menjadi native code untuk berbagai mobile platform dari mulai Symbian, Android, sampai iOS. Jadi sekali coding, 2-3 handset tercukupi, hehehe. Saya kepikiran bisa jadi merancang antarmuka dengan HTML dan Javascript akan lebih mudah daripada merancang XML. Ya, mirip merancang web biasa. Contoh: Phonegap, Appcelerator.

    • Pros: Cocok untuk yang membutuhkan keunggulan Write Once Run Anywhere, apalagi untuk programmer web yang sudah mahir Javascript dan HTML 5
    • Cons: Tetap harus bisa Javascript. Jadi, pilih mana, belajar Javasript dan library framewok atau langsung Android? Saya pilih yang kedua karena saya jadi tidak paham interface Android, lagipula keseluruhan fungsi lain, termasuk backend, mau tak mau harus dibuat dengan Javascript. Tim saya keberatan dengan hal ini karena tidak dapat menggunakan kode Java yang telah ada (reusable), belum lagi bila ada error yang ditemui (yang pasti akan ada), sulit untuk dipecahkan karena mayoritas lebih paham Java daripada Javascript.
      Anyway, melihat kepopuleran HTML 5 di jagat web, tidak ada salahnya untuk belajar Javascript ini lebih dalam.
  • Alternatif terakhir yang saya pikirkan adalah mengganti IDE Eclipse dengan Netbeans (nbandroid). Siapa tahu fasilitas perancangan GUInya lebih mudah. Oh ternyata plugin Android untuk Netbeans sudah lama tidak dikembangkan lagi. Versi terakhir sudah cukup lama, dan support  di luar sana pastilah akan sedikit mengingat minim pengguna. Versi Eclipse terus diperbarui sehingga lebih meyakinkan dan lebih mudah mencari bantuan, walau sekedar googling.
  • Akhirnya, dengan berat hati saya kembali ke Eclipse. Namun kali ini dengan keyakinan bahwa tidak ada pilihan lain. Harus bisa di Eclipse atau tidak sama sekali! Hasilnya, ternyata muncul pencerahan seperti di bawah ini.

Sesungguhnya yang perlu dikuasai di awal mempelajari antarmuka Android adalah memahami gaya layouting-nya. Itu dulu, karena layout adalah bahan bangunan paling dasar yang menyusun keseluruhan tampilan antarmuka. Pahami dulu cara masing-masing tipe layout mengatur komponen di dalamnya, lalu bisa terbayang kombinasi layout yang dibutuhkan untuk membuat rancangan sesuai kebutuhan.

Rule of Thumbs yang saya dapatkan dalam perancangan antarmuka Android:

  1. Bergantunglah pada XML, bukan fasilitas drag and drop berikut WYSIWYG nya.
  2. Gunakan Relative Layout sebagai layout parent dari keseluruhan komponen. Layout ini cukup fleksibel untuk diatur sedemikian rupa. Di bawah Relative Layout bisa dibangun bermacam kombinasi komponen dan sub layout dengan lebih mudah daripada jenis layout yang lain. 
  3. Gunakan Table Layout untuk layout standar form yang berisi pasangan judul field dan input fieldnya. Bisa disusun dengan satu row berisi judul dan field isiannya, maupun satu tabel berisi judul saja, tabel lain berisi field isian saja. Yang disebut belakangan lebih memudahkan pengaturan margin antara keduanya.
  4. Gunakan Scroll View untuk membuat layar yang terbatas dapat diisi oleh komponen yang panjang atau lebarnya melebihi ukuran layar. Tapi untuk merancangnya harus bisa mengedit layout XML nya karena layar WYSIWYG tidak dapat menampilkan komponen di luar batas ukurannya.

Jika sudah paham teknik layouting, kita bisa membuat rancangan antarmuka yang enak dilihat dengan beberapa kombinasi layout seperti yang saya coba berikut ini:

Login Screen

Relative Layout, Table Layout, Fragment, and Scroll View

Selamat belajar!

Picture: [DroidDraw], [Fluid UI], [Appcelerator]

Tagged with:
 

6 Responses to Belajar Merancang Antarmuka Android

  1. zulkadri says:

    mantap gan, bisa dishare untuk contoh, kirim ke email, makasih

  2. zulkadri says:

    Gan, kalo nampilin layar 2 di layout layar 1 gimana caranya gan mohon pencerahan

  3. Agung says:

    @zulkadri: maksudnya nampilin layar 2 di layout layar 1? 1 dan 2 ini mengacu ke apa?

  4. Syaifudin says:

    aplikasi apakah yang anda buat di atas?

  5. artikel keren, cek juga sob aplikasi akunting buatan anak Indonesia di kiper.co.id

  6. Munazar says:

    thanks, ilmunya sangat bermanfaat.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>