Tampilan Form Sebuah Aplikasi Menggunakan Android Studio

pada tanggal
Hello This is My 2nd Posting !

Okay bagi yang sudah melihat postingan pertama saya, pasti sudah mengerti dong bagaimana caranya membuat sebuah Project baru pada Android Studio? 
Jika sudah paham, untuk postingan kedua ini, saya akan membuat sebuah tampilan form dilengkapi dengan Button dan Alert yang akan keluar jika button tersebut ditekan.

Well Project kali ini, saya beri nama Bengkel. Penamaan Project sesuai dengan keinginan masing-masing ya teman. Beginilah tampilan awal Bengkel pada Android Studio :


Kali ini akan bermain sedikit coding pada action button. Langsung saja ke cara-cara membuat tampilan form sebuah aplikasi dengan button dan alert.
1. Pertama, mari kita coba untuk membuat satu button saja. Caranya adalah dengan memilih Button dalam activity_main.xml. Drag ke dalam layar ponsel yang ditampilkan Android Studio.

Button bisa diberi nama sesuai dengan keinginan. Kali ini, buttonnya saya beri nama "Save" dengan tujuan bisa digunakan untuk menyimpan data dari pemakai. Tetapi hal tersebut, akan saya berikan untuk next postingan, jadi harap menunggu postingan saya selanjutnyaa ^^

Tampilannya akan seperti pada gambar dibawah ini untuk Button "Save".
Gambar di atas merupakan tampilan Design pada tab activity_main.xml. Arahkan pada Text activity_main.xml
Jadi, kita bisa mengedit tampilan interface menggunakan Design (drag and drop) atau Text (coding).

 2. Beralih ke Text. Dalam Text terdapat beberapa jenis widget dan text fields yang digunakan. Kita juga bisa mengedit lewat Design, tapi kita akan bermain sedikit code. Berikut adalah isi dari tampilan form :

Gambar di atas digunakan untuk tampilan dasar sebuah aplikasi.

  • Nama
  • Alamat

  • Merk Mobil/Motor
  • Keluhan Anda

  • Nomor yang Bisa Dihubungi

  • Button Save
  • Button Back
  • Copyright

Pada dasarnya code diatas hampir sama, sehingga penjelasannya adalah sebagai berikut :
  • TextView digunakan untuk menampilkan Text pada layar ponsel (seperti postingan pertama), sedangkan EditText digunakan jika user harus menuliskan sesuatu pada text fields yang sudah disediakan. Setiap widget maupun text fields perlu diberikan id, dikarenakan sebagai penanda bahwa id tersebut ada dan bisa digunakan untuk coding (jika diperlukan)
  • android:background → digunakan untuk memberikan warna background tampilan (baik untuk layar utama maupun button)
  • android:layout_width → digunakan untuk mengatur lebar dari sebuah widget.
    • match_parent : digunakan untuk menyesuaikan lebar dan tinggi tampilan, sama dengan ukuran lebar dan tinggi dari layar ponsel yang Anda miliki
    • wrap_content : digunakan untuk menyesuaikan lebar dan tinggi tampilan sesuai dengan objek yang ada di dalamnya.
  • android:layout_height → digunakan untuk mengatur tinggi dari sebuah widget 
  • android:paddingBottom → digunakan untuk mengatur jarak bawah dari sebuah konten
  • android:paddingLeft → digunakan untuk mengatur jarak kiri dari sebuah konten
  • android:paddingRight → digunakan untuk mengatur jarak kanan dari sebuah konten
  • android:paddingTop → digunakan untuk mengatur jarak atas dari sebuah konten
  • android:text → digunakan untuk menampilkan tulisan pada Android. Sehingga apa yang kita tulis pada syntax ini akan tampil pada layar. Misal android:text="NAMA", maka akan tampil NAMA pada Android.
  • android:id → digunakan untuk memberi identitas pada sebuah konten secara unique.
  • android:textSize → digunakan untuk memberikan ukuran pada sebuah teks
  • android:textStyle → digunakan untuk memberikan gaya tulisan sebuah teks (bold, italic, normal)
  • android:hint → digunakan untuk menampilkan tulisan pada field pengisian form, seperti sebuah bantuan kepada pemakai untuk menginputkan suatu hal, 
  • android:layout_below → digunakan untuk meletakkan sebuah konten berada di bawah konten tertentu.
  • android:layout_alignParentStart → digunakan untuk menyesuaikan align sesuai dengan parent jika true, jika false maka tidak sesuai dengan parent
  • android:checked → digunakan pada sebuah button untuk mencentang. Apabila bernilai false maka tidak akan dicentang, jika bernilai true maka akan dicentang
  • android:textColor → digunakan untuk memberikan warna tulisan sebuah konten.
  • android:inputType → digunakan untuk mendefinisikan tipe inputan. inputType pada aplikasi ini digunakan pada input Nomor HP
  • android:ems → digunakan sebagai panjang input
  • android:layout_marginBottom → digunakan untuk membatasi bagian bawah sebuah konten.
  • android:layout_alignParentBottom → digunakan untuk meletakkan sebuah konten berada pada bagian bawah layar dari keseluruhan layout.
  • android:layout_alignEnd → digunakan untuk meletakkan sebuah konten berada dibawah konten yang lain.
  • android:layout_alignTop → digunakan untuk meletakkan sebuah konten yang sebaris dengan konten lain tetapi berada di sebelah kiri dari konten lain tersebut. 
  • android:layout_toEndOf → digunakan untuk menjelaskan bahwa akhir atau dibawah konten tersebut ada konten yang lain.
  • android:layout_alignParentEnd → digunakan untuk meletakkan sebuah konten pada bagian akhir dari layar, terletak paling bawah. Syntax ini memiliki fungsi yang sama dengan ParentBottom.
  • android:textAlignment → digunakan untuk meratakan tulisan (center, left, right)
  • android:layout_above → digunakan untuk meletakkan sebuah konten berada diatas konten yang lain. 
Tampilan dari code-code diatas adalah sebagai berikut :

3. Langkah ketiga adalah mengedit bagian MainActivity.java, dalam code ini digunakan untuk memberikan aksi tertentu pada sebuah konten. Kali ini, saya akan memberikan aksi pada button Save saja, untuk button lainnya tunggu saja next posting ^^
Berikut adalah tampilan dari MainActivity.java


Penjelasan code adalah sebagai berikut : 
  • Beberapa import diatas digunakan supaya semua perintah yang ada pada main class bisa berjalan. 
    • android.os.Bundle → digunakan untuk membaca data
    • android.view.View → digunakan untuk menampilkan apa yang sudah kita buat dan akan ditampilkan pada ponsel sehingga perlu menggunakan import ini.
    • android.widget.Button → digunakan untuk mengaktifkan fungsi Button.
    • android.widget.Toast → import yang digunakan untuk menampilkan sebuah pesan setelah user melakukan aksi tertentu, misal menekannya.
  • Sehingga semua yang ada pada MainActivity.java akan mengatur apa saja yang bisa dilakukan sebuah konten.
4. Pengaturan form dan button sudah selesai dilakukan, selanjutnya adalah running aplikasi. Pada postingan pertama kita sudah running aplikasi menggunakan Run → Run 'app', maka pada kesempatan ini akan dicoba cara lain yaitu dengan Build APK (membuat file APK aplikasi yang sudah dibuat pada Android Studio dan bisa diinstall manual pada ponsel). Caranya yaitu Build → Build APK lalu tunggu prosesnya hingga selesai.


Jika sudah selesai, akan ada pesan seperti berikut ini :

5. Show in Explore. File APK tersebut diberi nama secara otomatis, yaitu "app-debug.apk". Kemudian copy file tersebut ke ponsel Anda. 



6. Jalankan pada ponsel Anda. 

Buka file tersebut, sehingga muncul seperti gambar dibawah ini :
Pilih Instal

7. Tunggu instalasi aplikasi, jika muncul warning mengenai "Play Protect tidak mengenali developer dari aplikasi ini" maka yang harus dilakukan adalah pilih "Tetap Instal"
Sehingga instalasi aplikasi akan berlanjut dan berhasil di install.

Nah, dibawah ini adalah tampilan aplikasi Bengkel pada ponsel yang kita miliki.
Contoh pengisian data aplikasi dan pengecekan button apakah berjalan sesuai dengan keinginan atau tidak :
Pesan yang keluar setelah memilih button Save sudah sesuai dengan apa yang terdapat pada Sourcecode. 

YEAY ! Tampilan form aplikasi sudah berhasil dibuat. Pada form ini belum ada tindakan apa-apa, jadi hanya tampilan dan pesan begitu saja. Belum bisa melakukan check-uncheck pada RadioButton, karenaa hal tersebut akan dilakukan pada next posting saya. Wait for it! 😄


SELAMAT MENCOBA
Belajar dimulai dari hal kecil dan sederhana ❤




Komentar

Posting Komentar