thegeesradio: Tutorial Android | Membuat Tombol 'Masuk'

Selamat Malam Gees Mania!

Malam ini Gee ingin berbagi pengetahuan membuat aplikasi Android sederhana. Malam ini kita belajar sekaligus-gus-gus... Karena di modul/tutorial ini kita akan membuat Tombol Masuk ke halaman baru di Eclipse :) Nah, untuk mewujudkannya kita harus jadi bisa sekalian belajar layouting dan juga sedikit ngoding pake fungsi java.

Dikit kok, nyante ajah. Buat yang ga demen ngoding rumit-rumit kayak saya dijamin deh bakalan ngarti! ^___^

Mulai. Lets RUN the Eclipse & Enjoy!

Pertama-tama buka Eclipse di tempat kalian meng-extrac-nya. Kalo Gee nyimpennya di direktori C. Tinggal klik aja deh! Klik-nya yang icon bulet warna ungu-kebiruan itu ya! =)

Untuk beberapa kasus, kadang muncul tampilan seperti di bawah ini. Tapi jangan panik, lakukan langkah seperti yang Gee jelaskan pada gambar.

Ini adalah workspace Anda di Eclipse. Untuk memulai project baru di Android klik File - New - Other - Android Project. Kalo gambar di bawah nggak kelihatan bisa di perbesar dengan cara klik langsung di gambar.

Setelah itu akan muncul dialog seperti di bawah ini. Isi sesuai yang saya contohkan seperti gambar di bawah. Kalau gambarnya kurang jelas bisa diperbesar dengan cara mengklik langsung pada gambar.

Nah, ini dia yang ditunggu-tunggu. Ini adalah tamoilan project baru Anda yang masih polos alias belum di apa-apain. Project yang barusan anda bikin ada disebelah kiri workspace, yaitu 'Belajar Android'. Sekarang kita beajar bikin aplikasi yuk! Kita bikin Aplikasi tombol 'Masuk' di Android. Sebelumnya kita perlu editing dulu layout-nya. Mari belajar Android dari hal yang lucu-lucu. Klik 'main.xml' untuk melihat dan mengedit tampilan di folder res - layout - main.xml. Klik gambar untuk melihat gambar secara jelas.

Setelah itu akan muncul tampilan di bawah ini. Drag n drop 'Button' di sebelah kirim lembaran hitam. Lembaran hitam itu ceritanya adlah tampilan yang akan terlihat nanti saat Anda menanamkan aplikasi yang Anda buat di Android.

Setelah itu klik main.xml yang ada di bawah layar hitam. Ada kan? Pasti ada donk! Hehe. Klik dan akan muncul tampilan seperti di bawah ini. Nh, edit lah sesuai yang saya contohkan pada gambar di bawah. Klik untuk memperbesar dan memperjelas tampilan gambar.

Penasaran dengan hasil utak-atik kita? Kita cek yuk jadinya kayak gimana. Nah, sekarang klik RUN di bar atas Eclipse, tombolnya warna hijau. Kalau susah nemunya tinggal pencet CTRL+F11 ajah di keyboard Anda. keluar deh, sebuah dialog seperti gambar di bawah. Pilih 'Android Project' setelah itu 'Ok'.

Jeng-jeng-jeng!! Keluar deah emulator Android yang kita tungu-tunggu. Bagi beberapa kasus terutama buat yang pertama kali nyoba emulator Android ngelaunch nya kadang suka lama. Bisa sampe 5 menit. jadi sabar aja yah. Kasih estimasi waktu nunggu sekitar 5 - 7 menit. Lebih dari itu ada 2 indikasi, yang pertama memang emulatornya nggak bisa di launch atau komputer Anda emang nggak kuat buat ngejalanin emulator. Soalnya Eclipse nya ajah udah berat euy!

Coba deh, Anda klik tombol 'Masuk' yang di atas. Nggak ada yang terjadi kan? Itu karena kita belum membuat halaman keduanya dan juga belum men-setting tombol 'Masuk'nya. Nah, sekarang kita bikin halaman 2 buat dijadiin halaman 'yang muncul' saat kita nge-klik tombol 'Masuk' yang telah kita buat. Caranya klik kanan di 'belajar.android' yang ada di root folder 'scr', lalu 'New - Class'.

Setelah itu akan muncul dialog-dialo seperti di bawah ini. Nama package-nya isi dengan 'halaman2' dan Superclass-nya di browse, saat itu-lah akan muncul satu buah dialog lagi. Nah, pada tombol search yang ada di dialog yang baru muncul itu ketikka 'android.app.Activity' lalu 'Ok'. Nanti Superclass pada dialog yang pertama akan menjadi 'android.app.Activity'. Untuk lebih jelasnya bisa lihat gambar di bawah ini,

Setelah itu maka Class baru yang bernama 'halaman2' akan terwujudkan! Hehe.

Tapi Class ini belum punya interface-nya. Kasihan kan dia, Gees Mania. Kan kalo Class 'utama' punya interface yaitu main.xml, nah Class 'halaman2' juga harus punya donk! ^___^ Sekarang kita lalukan klik kanan pada root 'layout' pilih 'New - Android XML File'.

Setelah itu akan muncul tampilan 'layout' yang masih kosong. Drop n drag 'Text View' ke layout tersebut.

Lalu klik 'halaman2.xml' yang ada di bawah halaman hitam itu, lalu ubah kode menjadi seperti di bawah ini.

Lalu setelah itu klik 'Android Manifest' dan lakukan seperti yang dicontohkan pada gambar di bawah ini.

Setelah itu kembali ke halaman2.java dan tambahkan kode seperti yang ada pada gambar di bawah ini! Klik pada gambar untuk memperbesar dan memperjelas tampilan gambar.

Setelah itu klik utama.java, dan tambahkan kode seperti yang ada di gambar yang ada di bawah ini. Klik pada gambar untuk memperbesar dan memperjelas tampilan gambar.

Lalu kita kembali lagi ke main.xml sang pasangannya utama.java, dan tambahkan kode di bawah ini! =)
Untuk memperjelas tampilan gambar klik langsung pada gambar.