Haloo semuanya , bagaimana nih puasanya ? semoga masih aman-aman saja ya, atau apa ada yang udah budi alias buka diam-diam ? haha jangan sampai deh ya,nah disini yuk mari kita belajar lagi dengan aplikasi android studio, kali ini kita akan membahas tentang bagaimana cara membuat tampilan login di android studio nih, karena kan biasanya aplikasi-aplikasi mobile di android ataupun ios lainnya jika menggunakan suatu aplikasi seperti aplikasi bank, aplikasi komik, dan aplikasi-aplikasi yang lainnya, nah aplikasi tersebut biasanya pasti menggunakan dan harus login dulu kan ? nahhh disinilah kita akan belajar bagaimana untuk membuat tampilan login tersebut , yukk di simak baik-baik ya.
1.New Project
Pertama-tama kamu bisa memulai dengan membuat new project dulu yaa,caranya yaitu klik pojok kiri atas pilih file ,new project pilih aja templatenya yang empty template yaa, untuk judulnya kamu bisa bikin sesuka kamu , lalu untuk minimum SDK nya pilih yang API 25:Android 7.1.1 (Nougat) Language nya java , lalu Finish.
2.Layout,New,XML,Layout Xml File
Nah setelah dibuat new projectnya, kita bikin template baru di bagian layoutnya ,caranya buka bagian res di pojok kiri,nah setelah itu klik kanan di bagian layout, lalu new, setelah itu cari kebawahnya XML, setelah itu XML file.
kamu bikin new template layoutnya dulu seperti dibawah ini ya.
nah untuk filenya kita bikin aja pada layout file name nya itu login ya, untuk ketentuannya nama filenya ini tidak boleh kapital atua huruf besar, dan tidak boleh pake spasi, jadi huruf kecil semua , jika ingin bikin 2 kata atau lebih bisa menggunakan underscore(_), oke disini kita bikin aja login, dan di root tagnya tetap aja linearlayout gak usah di ganti ya setelah itu tekan finish.
3.Memulai Editing di login.xml
Nahh udah jadi nih template untuk kita mengedit tampilannya, nah di template login.xml inilah kita bakalan mengedit-edit tampilan login yang akan kita bikin ya, yuk sekarang kita mulai. Disini kita menggunakan template LinearLayout ya, untuk templatenya itu ada 3 macam yaitu LinearLayout,RelativeLayout, dan ConstrainLayout . Untuk LinearLayout ini lebih ke tertata rapih dan agak kaku bisa di bilang level 1 deh ya, untuk RelativeLayout itu sedikit fleksibel dan bisa di tarik gambar-gambarnya namun masih dalam jangkauan terbatas dan syarat tertentu termasuk level 2,
Untuk ConstrainLayout memungkinkan Anda membuat tata letak yang kompleks dan besar dengan hierarki tampilan datar (tidak ada kelompok tampilan bertingkat).Constrain itu lebih mudah untuk di gunakan dimana bisa digeser-geser gambarnya dan lebih fleksibel termasuk level 3. Namun yang sering kita gunakan yaitu LinearLayout dan RelativeLayout karena lebih bisa kita tata secara rapih.Nah kodingan yang akan kamu buat itu harus di antara LinearLayout ini ya yaitu di tengah-tengahnya.
nah di tampilan atasnya atau bagian keseluruhannya kita bikin seperti di gambar ya, jika kamu ingin merubah warna backgroundnya kamu bisa ketik background lalu enter, setelah itu kamu bisa mengikuti kode warna backgroundnya ,namun untuk cara yang mudahnya kamu bisa ketik dan pancing dulu kodingan warnanya dengan cara ketik #123456 , nah setelah itu warna defaultnya akan menjadi biru gelap, jika sudah seperti ini kodingan warnanya aktif , kamu bisa klik kotak kecil di kiri background itu untuk mengatur warnanya sesuai kesukaan kamu. setelah itu kita bikin orientation nya , orientation itu berfungsi untuk mengarahkan kemana sih tampilannya berlanjut, horizontal jika ingin ke samping , vertical jika ingin kebawah, nah untuk aplikasi android kan biasanya kebawah tuh, jadi kita bakalan sering menggunakan vertical ya. Setelah itu gunakan Padding 50dp yang berguna untuk memberikan jarak antara border luar dengan aplikasinya , biar gak dempet banget lah gtu.
okeeh untuk tampilan background dan settingan keselruhan backgroundnya sudah ya, sekarang yuk kita masuk ke memasukkan komponen gambar button dan text lainnya.
Disini kita ingin menggunakan circleimageview, dimana berguna agar foto kita itu jadi berbentuk bulat atau bundaran , karena pada tampilan default biasanya foto yang kita masukkan itu jadi petak doang, jadi kita bikin lingkaran agar terlihat keren dong ya.caranya yaitu kita menggunakan tag <de.hdodenhof.circleimageview.CircleImageView
namun tag ini tidak bisa langsung di gunakan , kita harus memasukkan dulu kelibrary nya agar bisa digunakan, yuk sekarang kita masuk ke gimana cara masukkan tag nya .
4.Memasukkan Library CircleImageView
caranya kamu klik file di pojok kiri atas, lalu project structure ,setelah itu pilih dependencies pilih yang all dependencies setelah itu klik tombol plus (+) terus library dependencies dan app nah di kolom searchnya kamu ketik circleimageview , lalu klik search , dan muncul deh itu de.hdo nya , kamu klik itu dan tekan ok lalu ok , tunggu proses inputannya selesai ,dan jadi deh circleimage nya bisa kita gunakan.
nah selesai dan jadi deh untuk cara menggunakan circleimageview nya sekarang kita lanjutin kodingannya.
dibawah de.hdo itu kita bikin layout_width itu lebarnya , dan layout_height itu panjangnya , disini kita bikin aja 150dp dua duanya biar secukup besar fotonya,untuk memanggil gambarnya ketik aja src terus enter , setelah itu ketik @drawable/cat2 , karena nama file foto mimin itu cat2 . Oiya untuk melihat tampilan desain dan kodingan kamu bisa klik split di pojok kanan atas ya , dan juga untuk memasukkan gambarnya juga mudah kok , kamu bisa cari file foto kamu di explorer kamu , setelah itu tinggal copy aja, dan klik kanan di drawable yang ada di pojok kiri , lalu paste dan enter aja, untuk nama file juga sama ya tidak boleh huruf besar dan tidak boleh spasi, jika melanggar peraturan itu maka bakalan error nantinya.
5.EditText
sekarang kita masuk ke EditText, EditText ini berfungsi untuk text yang bisa kita isi nantinya, nah untuk width nya pilih match karena ingin fullkan ke samping, dan heightnya itu wrap_content agar tingginya menyesuaikan dari textnya ya, kita masukkan margintop nya itu 20dp biar agak berjarak lah dari gambar yang di atasnya,kita kasih sizenya deh 25dp biar agak gede dan mudah di baca, juga masukkin textstyle nya itu bold biar lebih jelas , masukkan hint untuk menampilkan variabel apa yang akan di tampilkan , karena ingin nampilkan Username nih ,jadi ketik Username , setelah itu arahkan mouse di luar petik dua (") dari hint , dan klik lampu pijar kuning di kiri dan klik extract string setelah itu enter ,maka hint tersebut akan jadi string agar mudah di panggil nantinya, masukkan id juga idnya disini mimin bikin etusername , id ini juga berfungsi agar nanti lebih mudah memanggilnya ketika sudah masuk ke kodingan javanya.
6.Memanggil Icon Username
Disini kita menggunakan icon akun gitu ya biar tampilan loginnya lebih real gitu, kita gunakan drawablestart untuk memanggil iconnya , disini yuk kita panggil atau bikin dulu iconnya, caranya yaitu klik kanan di drawable lalu new , lalu klik vector asset.
setelah muncul tab seperti di atas , kamu klik bagian clip art , dan cari deh gambar yang sesuai, disini mimin bikin aja di searchnya itu "person" lalu pilih icon itu , dan jadi icon seperti di atas, lalu ganti namenya jadi icpassword , setelah itu next dan finish dan taraa jadi deh iconnya tinggal panggil aja di drawablestart karena kita ingin menaruh gambarnya diawal atau sebelah kiri.
Oke sekarang kita lanjut bikin tab passwordnya menggunakan template EditText lagi ya karena textnya nanti bakalan kita isi.
untuk di bagian passwordnya itu tidak beda jauh dari username,disini kita bisa menggunakan icon mata yang biasanya di password itu untuk melihat password kita yaitu menggunakan drawableEnd, lalu gunakan inputType agar text passwordnya terhidden gtu.
Lanjut kita bikin buttonnya yang bisa di klik nantinya , lalu juga textview untuk membuat forget password dan juga create a new Accountnya. Ikuti saja seperti di gambar ya.
Nah udah selesai dan jadi deh tampilan login yang kita buat, untuk ingin mengganti warna dari buttonnya kamu bisa ke template values di pojok kiri, terus pilih colors, lalu klik aja warna yang ungu di pojok kiri dari isi colors itu, dan ganti aja warnanya sesuai kemauan kamu , disini mimin ganti warna merah aja.
Setelah kita selesai mengedit tampilan yang bagus dan rapih di login.xml nya , sekarang kita panggil di MainActivity nya, xml mana yang ingin kita panggil jika tidak kita rubah maka error dong jadinya atau malah cuman hello word doang haha.
Pada bagian setContentView(R.layout.activity_main); kamu ganti bagian activity_main nya jadi login ya ,karena kita mau manggil layout login.xml nya, dan udah tinggal run dan jadi deh .
YEAYYYYYYY Akhirnya jadiiii, nah setelah di run bisa kannn, dan begitulah hasilnya jadi cakep bangett dan rapi ya kan, kamu bisa tuh isi pada bagian usernamenya terserah kamu, dan passwordnya juga pasti bakalan ke hide gitu, dan udah jadi akhirnya project tampilan login kita.
Selamatt kamu udah berhasil bikin project tampilan login pertama kamu nih, wahh alhamdulillah yah berhasil dengan mulus heheh , dan begitulah caranya tutorial membuat tampilan login di android studio ya, semoga bermanfaat.
(L.Ahm)
Minggu,10 April 2022
=========================================================================
komponen android studio dan fungsinya membuat intent di android studio get text from edittext android contoh coding android studio activity android studio adalah cara menggunakan android studio text box in android studio cara membuat aplikasi di android studio login and register ui design in android cara membuat login di android studio dengan database mysql how to create admin and user login in android studio membuat login android studio simple login page in android studio source code simple login app in android studio 2022 login fragment android studio password in android studio cara bikin tampilan login android studio
0 Comments