Halo sobat josikie. Tutorial ini adalah tutorial membuat desain Login Sederhana Aplikasi menggunakan Android Studio. Kita akan membuatnya di activity_main.xml.
Baca juga : Dasar Pemrograman Java 3
Halaman login pada aplikasi membutuhkan posisi view yang tepat pada desainnya. Root view yang kita pakai antara lain RelativeLayout. Sedikit penjelasan untuk root view dan view yang akan kita pakai. RelativeLayout adalah sebagian root view dari desain xml Android.
RelativeLayout kita gunakan sebagai rootview yang pertama. RelativeLayout adalah root view yang memperbolehkan view – view anggotanya saling berelative satu sama lain. Kita menggunakan RelativeLayout untuk root view bersarang. Bersarang? Root view bersarang adalah root view yang memiliki root view lagi didalamnya. Selanjutnya adalah penjelasan untuk view – view yang kita pakai dari view pertama sampai akhir.
Kita menggunakan CircleImageView untuk menampilkan ikon logo login berbentuk lingkaran. Agar bisa menggunakan CircleImageView, kita harus menambahkan kode = implementation ‘de.hdodenhof:circlrimageview:3.0.0’ di bagian build.gradle (Module:app) bagian dependencies. Intinya CircleImageView hanya kita gunakan ketika kita membutuhkan tampilan berbentuk bulat. Bisa logo maupun foto.
Kemudian kita menggunakan TextView. TextView adalah view pada desain xml Android yang berguna untuk menampilkan teks atau kata – kata. Pada desain login sederhana ini, kita menggunakan 5 TextView. Selain TextView, ada juga EditText. EditText berguna ketika kita ingin desain yang mampu memasukkan input berupa teks, huruf, angka, maupun karakter. Lalu ada Button. Button adalah view berbentuk tombol. Fungsinya memang agar desain kita memiliki tombol yang dapat di klik. Terakhir ada CheckBox yang berguna bagi pengguna untuk memilih pilihan dengan cara memberikan centang pada kotak kecil. Oke sedikit penjelasan telah selesai dan mari kita lanjut ngodingnya…
Pertama tentu buka Android Studio lalu buat project baru
Pilih Empty Activity lalu klik next
Isi kotak Name dengan My Login. Package Name isi com.example.android.mylogin, kotak Save Location isi dengan sesuai tempat dimana kamu menyimpan project Android Studio. Language tentu pilih Java dan Minimum API Level pilih API 22 : Android 5.1(Lollipop). Setelah itu klik finish.
Sesudah project terbuka silahkan pilih klik app yang disebelah kiri lalu pilih res kemudian klik layout lalu pilih activity_main.xml.
Kemudian copy kan kode di bawah ini pada activity_main.xml, pastikan hanya ada kode dibawah ini pada activity_main.xml. Sebelum mengcopy hapus dulu kode – kode yang ada di activity_main.xml. Abaikan dulu jika ada merah – merahnya (error), itu karena kita belum membuat string.
Langkah selanjutnya buka app -> res -> values -> colors.xml seperti gambar di bawah ini :
Ganti seluruh kode di colors.xml sehingga tampak seperti kode pada gambar di atas. Berikut kodenya :
Setelah itu buka app -> res -> values -> strings.xml, seperti di bawah ini :
Ganti seluruh kode di strings.xml sehingga tampak seperti kode pada gambar di atas. Berikut kodenya untuk di copy :
Langkah selanjutnya adalah untuk ikon login. Buka Gradle Scripts -> build.gradle (Module:app). Tambahkan kode dibawah ini pda bagian dependencies pada build.gradle (Module:app) :
Kemudian klik sync now yaitu yang dilingkari pada gambar di bawah ini :
Download gambar ikon disini. Setelah terdownload copy gambar tersebut. Kembali ke project My Login. Buka app -> res seperti gambar di bawah ini :
Klik kanan pada drawable lalu pilih paste. Seperti di bawah ini :
Jika keluar pop up Choose Destination Directory pilih yang pertama lalu klik ok, seperti di bawah ini :
Beri nama pada kotak New Name lalu klik ok. Seperti gambar di bawah ini :
Untuk merubah nama judul bar. Silahkan buka app -> java -> com.example.android.mylogin lalu copy kode di bawah ini. Taruh di bawah setContentView(R.layout.activity_main) :
Coba jalankan projectnya, jika ada error mohon dicek apakah kode pada Android Studio punya kamu sudah sama atau belum dengan tutorial di atas. Atau silahkan download full project MyLogin disini.
Berikut demo Aplikasinya, josikie sediakan :
Baca juga : Operating System Terbaru Android 10 dan Android Pie
Tutorial Desain Login Sederhana sudah selesai. Terimakasih dan semoga bermanfaat:)