Membuat User Interface di Android - Hallo sahabat Kumpulan Aplikasi Android Tercanggih Pilihan Yang Paling Berguna, Pada Artikel yang anda baca kali ini dengan judul Membuat User Interface di Android, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat User Interface di Android
link : Membuat User Interface di Android

Membuat User Interface di Android

Menurut saya, hal yang paling rumit dalam proses pembangunan sebuah aplikasi android adalah pengaturan,  struktur user interface(UI). Berhasil atau tidaknya sebuah proyek pembangunan aplikasi adalah sangat tergantung pada proses penyusunan UI yang cukup berlogika baik untuk developer sendiri maupun untuk pengguna. Tanpa struktur inteface yang solid maka pembangunan sebuah software akan terbengkelai bahkan tak akan pernah selesai. Saya sendiri punya setumpuk aplikasi yang telah mulai di bangun tapi tak satupun yang selesai, Mudah2an ketika pensiun nanti baru ada banyak waktu untuk menyelesaikan-nya. Saya hanya dapat menyelesaikan aplikasi kecil seperti yang akan saya tunjuk-kan disini

Berikut adalah sebuah aplikasi yang saya rombak dari awal hingga akhir. Aplikasi ini sangat sederhana sehingga tidak butuh orang pintar untuk membuatnya, orang seperti sayapun bisa. Alasan utama mengapa saya paham dengan aplikasi sederhana ini karena UI-nya hanya sedikit dan pendek. Aplikasi inipun sudah banyak bergentayangan di internet, ada yang di download secara gratis adapula yang harus di beli. Aplikasi ini digunakan untuk kakulasi berapa persen tip yang harus di berikan kepada pelayan restaurant dan di gunakan untuk menghitung pembayaran bill restaurant yang perlu di bagi rata atau di share pembayaran-nya oleh peserta yang ikut makan sehingga tidak membebankan pembayaran hanya satu orang saja..(jangan nebeng terus yah).
Untuk memperlancar proses belajar maka saya telah memasang aplikasi ini di android market, silahkan di download disini, untuk melihat secara langsung bagaimana sebuah aplikasi android di buat dari awal sejak menulis kode sampai akhirnya di download ke HP ke seluruh dunia (mimpi doloh...) sehingga artikel ini tak akan nampak hanya asal ngomong tanpa bukti yang jelas. Aplikasi inipun sangat sederhana tapi proses pembuatan semua aplikasi hampir sama, dari yang sederhana sampai ke aplikasi yang sangat mewah. Saya harapkan agar dapat menggairahkan developer2 muda, sehingga di masa yang akan datang Indonesia tidak saja menjadi konsumer software tapi juga bisa menjadi producer(mimpi lageee...).
Setelah aplikasinya di masuk-kan ke hand phone maka akan terlihat seperti gambar berikut:

Setelah berdebat sengit antara aku, saya dan diri sendiri akhirnya sepakat untuk menggunakan UI seperti pada gambar di atas. Design UI boleh di design se-indah atau se-jelek mungkin tergantung persetujuan semua pihak atau tergantung UI mana yang di sukai pasar.
Sebelum menulis kode XML untuk membangun interface, perhatikan se-jeli mungkin... lagi dan lagi... semua obyek(object) yang ada di interface, gagal memperhatikan obyek2 yang  di perlukan maka 100% proyek pembangunan aplikasi akan gagal pula.

Pada gambar di atas terdapat 14 object hadir menempatkan posisinya di layar. Ke 14 object tersebut adalah amat sangat perlu untuk di cermati. Dapatkah anda melihat 14 object tsb?... pada gambar di atas terlihat dari atas ke bawah ada 7 baris, setiap baris ada 2 object yaitu object bagian kiri dan object bagian kanan. Masing2 object tentunya memiliki fungsi dan tanggung jawab masing2. Misalnya, tombol "Hitung" di gunakan untuk menghitung dan ia di buat dari widget android bernama <Button>, sedangkan tulisan 'Besarnya Bill....Rp' dan beberapa tulisan lainya adalah di buat dari widget yang bernama <TextView> di sebut TextView karena memang gunanya hanya untuk memperlihatkan text atau hanya memperlihatkan tulisan pada layar mobile devices. Di lain pihak, di pojok kanan atas layar terlihat 3 object yang nampak seperti tombol juga tapi ketiganya bukan tombol melainkan tempat untuk menempatkan text, di buat dari widget yang bernama (EditText) kerjanya untuk pegang text yang mau di edit karena memang di dalam ketiga tombol itu akan sering di edit text-nya setiap kali kita mau buat kalkulasi baru.

Mari kita bangun interfacenya pakai XML. saya memutuskan untuk menggunakan design linear layout yaitu design yang menggunakan line by line patern. Masing2 developer memiliki alasan sendiri untuk memakai design patern yang di sukainya. Pada proyek ini saya pakai linear layout karena memang bentuk interface yang akan di hasilkan adalah baris demi baris.

Demi flexiblelity saya akan membungkus semua baris(linear)  dalam satu LinearLayout sehingga di dalam satu LinearLayout ada banyak LinearLayout yang lain
Kode XML berikut adalah LinearLayout Utama yang akan membungkus semua LinearLayout lain yang berada di dalam-nya

Kode di atas boleh di katakan hanya untuk membuka layar kosong karena belum ada isinya, ia hanya menyatakan bahwa semua yang ada di dalamnya akan menunjukan interface yang berorientasi 'vertikal' sedangkan 'fill_parent' maksudnya agar semua isi yang terkandung akan memenuhi ruang yang di sediakan(apapun alasan-nya, jangan lari atau sembunyi di luar layar)

Kode berikut untuk baris pertama pada layar

Saya sengaja menggunakan kata aduhai yang amat keren sebagai judul artikel ini "Strategi" alamak saya sendiri jadi takut membacanya (di kampung saya istilahnya 'mlaju legit'). Strategi yang saya maksudkan di sini adalah bekerja lebih keras, menulis lebih banyak kode yang kadang melebihi yang di butuhkan oleh aplikasi yang kita bangun, coba perhatikan pada kode XML di atas, ada banyak sekali kodenya hanya untuk satu baris pertama yang akan muncul di layar? itupun belum seberapa karena pada kode di atas ada @string yang berarti isi baris @string adalah berada  pada halaman lain yang bernama strings.xml, nanti kita akan kesana untuk membuat halaman strings.xml.
Di dalam kode di atas terdapat 2 object untuk memenuhi kebutuhan baris pertama pada layar HP. Object bagian kiri saya beri nama 'tulisanBerapaJumlah' yang di buat dari widget bernama <TextView> , menggunakan TextView karena memang kerjanya hanya untuk view text atau hanya untuk menunjuk-kan teks pada layar HP, sedangkan object di bagian kanan saya kasih nama 'tulisBerapaJumlah' dan di buat dari widget yang bernama <EditText>, menggunakan EditText karena memang kerjanya untuk ganti atau edit text lihat perbedaan-nya? tulisan adalah kata benda karena sudah di tulis  namun tulis masih perlu di tulis lagi dalam hal ini di edit... bingung? coba lihat lagi di layar pada gambar HP di atas. Tulisan yang bagian kiri seperti  'Besarnya Bill....Rp' sudah di tulis, itu sebabnya saya sebut tulisan... nanti semuanya akan lebih jelas ketika kita sampai pada menulis kode java.
@id pada kode di atas adalah logika yang akan di pakai oleh java untuk mengidentifikasi baris pertama pada layar. @id/linearLayout1 adalah nama UI untuk baris pertama, Semua object dengantanda @id akan secara otomatis ter registrasi pada java resource yang secara otomatis pula di beri nama R.java Semua kepentingan logika java akan berada di dalam R.java untuk kepentingan java logic, di himbau untuk tidak merubah isi R.java kecuali kalau sudah berpengalaman untuk itu.
Nama-nama id terserah developer, saya pakai nama default @id/linearLayout1 karena malas ketik (malas penyakit bawaan saya). Sedangkan 'wrap_content' adalah memberikan ruang untuk object sesuai kebutuhan-nya atau sesuai ukuran object itu sendiri (jangan melebar atau meninggi, walau ada ruangan untuk itu), wrap_content adalah saudara sepupunya fill_parent .

Kode xml berikut untuk baris ke 2 berapa % tip-nya

Perhatikan lagi, 'tulisanBerapaPersen' terbuat dari <TextView> sedangkan 'tulisBerapaPersen' di buat dari <EditText> karena text-nya akan selalu di edit sesuai dengan besar/kecilnya persentase tip yang akan di berikan. Lihat "@+id/tulisanBerapaPersen" dan "@+id/tulisBerapaPersen" adalah identitas dari kedua object tersebut agar di kenal java.
"@string/tulisanBerapaPersen" maksudnya lihat isi dari 'tulisanBerapaPersen' di strings.xml (semuanya akan lebih jelas ketika kita membuka halaman strings.xml)

Berikut untuk baris ke 3 yaitu menunjuk-kan jumlah orang yang ikut membayar

Yang berikut adalah untuk kedua tombol 'Hitung' dan tombol 'Ulang' keduanya terbuat dari widget <Button>

Kode xml berikut adalah untuk menulis tip yang akan di berikan dan tempat muncul jumlah tip yang akan muncul di bagian kanan layar

Perhatikan kode di atas kedua object "tulisJumlahTip" dan "tunjukJumlahTip" addalah terbuat dari widget <TextView>  karena memang keduanya hanya bekerja untuk menunjuk-kan text pada layar telephone.

Berikut adalah dua baris terakhir untuk 'Jumlah Total' dan 'Per Orang' yang berisikan 4 objects. Sama seperti jumlah tip di atas ke 4 object berikut adalah terbuat dari <TextView> juga

Kalau membangun aplikasi pakai Eclipse, maka secara otomatis file antarmuka di atas akan di beri nama main.xml. Walau demikian kita bisa merubah nama file tersebut sesuai dengan logika kita sendiri. Android sengaja menamakan file tersebut main.xml karena file itu adalah file utama(main)yang akan di panggil dari kode java untuk komputasi dan logika kerja dari aplikasi ini.
Secara keseluruhan file main.xml di atas akan menjadi lengkap seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<linearlayout 
android:layout_height="fill_parent" 
android:layout_width="fill_parent" 
android:orientation="vertical" 
xmlns:android="http://schemas.android.com/apk/res/android">
    
    <linearlayout 
android:id="@+id/linearLayout1" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisanBerapaJumlah" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisanBerapaJumlah" 
android:textsize="20sp">
    </textview>
    <edittext 
android:id="@+id/tulisBerapaJumlah" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent" 
android:text="@string/tulisBerapaJumlah">
    </edittext>
</linearlayout>

    <linearlayout 
android:id="@+id/linearLayout2" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisanBerapaPersen" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisanBerapaPersen" 
android:textsize="20sp">
    </textview>
    <edittext 
android:id="@+id/tulisBerapaPersen" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent" 
android:text="@string/tulisBerapaPersen">
    </edittext>
</linearlayout>

    <linearlayout 
android:id="@+id/linearLayout3" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisanBerapaOrang" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisanBerapaOrang" 
android:textsize="20sp">
    </textview>
    <edittext 
android:id="@+id/tulisBerapaOrang" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent" 
android:text="@string/tulisBerapaOrang">
    </edittext>
</linearlayout>

    <linearlayout 
android:id="@+id/linearLayout4" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent">
    <button 
android:id="@+id/tombolHitung" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
android:layout_width="wrap_content" 
android:text="@string/tombolHitung" 
android:textsize="20sp">
    </button>
    <button 
android:id="@+id/tombolHitungUlang" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
android:layout_width="wrap_content" 
android:text="@string/tombolHitungUlang" 
android:textsize="20sp">
    </button>
</linearlayout>

    <linearlayout 
android:id="@+id/linearLayout5" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisJumlahTip" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisJumlahTip">
    </textview>
    <textview 
android:id="@+id/tunjukJumlahTip" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="wrap_content" 
android:text="" android:textcolor="#99FF33" 
android:textstyle="bold">
    </textview>
</linearlayout>

    <linearlayout 
android:id="@+id/linearLayout6" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisanJumlahTotal" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisanJumlahTotal">
    </textview>
    <textview 
android:id="@+id/tunjukJumlahTotal" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="wrap_content" android:text="" 
android:textcolor="#99FF33" 
android:textstyle="bold">
    </textview>
</linearlayout>
<linearlayout 
android:id="@+id/linearLayout7" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="fill_parent">
    <textview 
android:id="@+id/tulisanPerOrang" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="@string/tulisanPerOrang">
    </textview>
    <textview 
android:id="@+id/tunjukBerapaPerOrang" 
android:layout_height="wrap_content" 
android:layout_marginleft="10sp" 
android:layout_width="wrap_content" android:text="" 
android:textcolor="#99FF33" 
android:textstyle="bold">
    </textview>
</linearlayout>
</linearlayout>

Untuk melengkapi design UI ini maka sebelum membuat komputasi java, kita selesaikan dulu halaman pelengkap yang bernama strings.xml yang di butuhkan oleh main.xml melalui @strings/

    
    Tip Persentase 
    Besarnya Bill....Rp
    0
    Tipnya Berapa..%
    0
     Berapa Orang......
    0
    Hitung
    Ulang
    Jumlah Tip = 
    Jumlah Total = 
    Per Orang = 

Sampai di sini bentuk UI dan proses menamakan objects yang akan kita butuhkan dalam proses dan cara kerja aplikasi ini sudah selesai. Berikutnya Kita akan membuat sebuah class java yang berguna untuk menterjemahkan kepada komputer tentang apa yang ingin di capai dari aplikasi ini. Silahkan klik di sini untuk melihat class java.

 Summary:
Untuk membuat kalkulator seperti pada gambar di atas di butuhkan 2 file xml  dan 1 file java yaitu

• main.xml (lihat contoh di atas) 
• strings.xml (lihat di atas) dan
• MesinHitung.java (klik disini)

Demikianlah Artikel Membuat User Interface di Android

Sekianlah artikel Membuat User Interface di Android kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat User Interface di Android dengan alamat link https://aplikasijalantikus.blogspot.com/2011/10/membuat-user-interface-di-android.html

Tweet