[ANDROID] MEMBUAT TAMPILAN LOGIN DENGAN ANDROID STUDIO

15.32 Android 4 Comments

Backshare.us - tampilan login merupakan tampilan yang pertama kali akan berhadapan dengan user ketika user membuka aplikasi yang kita buat. tampilan login sederhananya hanya terdiri dari beberapa entitas / inputan. Yang biasa digunakan yaitu Username dan Password. berikut adalah gambarang mengenai tampilan login yang akan kita buat nantinya.

gambar 1. Mock up Wireframe Login Activity

baiklah, jika telah ada gambaran untuk membuat tampilan seperti diatas, hal yang pertama yang kita lakukan adalah buka aplikasi Android Studio yang ada di komputer kamu. Jika kamu belum memilikinya, coba install android studio terlebih dahulu.

gambar 2. Launch Android Studio

membutuhkan waktu yang cukup lama untuk membuka aplikasi Android Studio ini, hal itu bergantung pada besar RAM yang ada makai. berikut tampilannya.

Gambar 3. Android Studio saat loading

kemudian untuk membuat tampilan login sederhana ini, kita harus membuat project baru di Android Studio. dengan langkah - langkah berikut. Pilih File,  sorot New, klik New Project. 

Gambar 4. Buat Project Baru di Android Studio

selanjutnya kasih nama project Aplikasi yang diinginkan. Saya memberikan di Application Name : Login Backshare, Company Domain : backshare.us, Project Location : C:\Users\TAUFIK\LoginBackshare, Package Name : us.backshare.loginbackshare, kemudian tekan Next. lebih jelasnya lihat gambar berikut

Gambar 5. Mengisi attribute aplikasi

kemudian pilih minumun SDK target, pilih API 18 : Android 4.3 (Jelly Bean) . ini artinya aplikasi kita hanya bisa di jalankan di Android Jelly Bean dan Android yang terbaru sekarang. kemudian pilih Next untuk melanjutkan.

Gambar 6. Pilih Minumum SDK target

Pilih Blank Activity , lalu tekan Next. 

Gambar 7. Blank Activity

Seterusnya berikan nama pada Activity program. seperti contoh.
Activity Name : LoginActivity (ini akan menjadi class pada file java dengan nama file LoginActivity.java)
Layout Name : activity_login (ini akan menjadi file layout untuk tampilan login di layar program, nama file yang dihasilkan adalah activity_login.xml)
Title Name : LoginActivity (untuk memberikan nama pada program yang dibuat)
Menu Resource Name : menu_login (untuk membuat menu option seperti setting yang biasanya ada di sebelah kanan atas program android. file yang dihasilkan adalah menu_login.xml di directory /res/menu)
Lalu kemudia klik Finish

Gambar 8. Penamaan Activity

Berikut penampakan layar project di android studio anda.
disebelah kiri ada tampilan dari struktur directory project,
di tengah ada layar buat code program,
dipaling kanan ada tampilan handphone untuk review design yang dihasilkan dari code yang telah dibuat.

Gambar 9. Project Screen Android Studio

Setelah langkah - langkah diatas selesai, sekarang kita lanjutkan ke pross pengodingan. buka file activity_login.xml, tuliskan code berikut.

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"    
android:layout_width="match_parent"    
android:layout_height="match_parent"    
android:orientation="vertical">

<EditText        
android:id="@+id/username"        
android:layout_width="match_parent"        
android:layout_height="wrap_content"        
android:hint="Username"        
android:inputType="text" />

<EditText 
android:layout_width="match_parent"        
android:layout_height="wrap_content"        
android:hint="Password"        
android:inputType="textPassword" />

<Button        
android:layout_width="match_parent"        
android:layout_height="wrap_content"        
android:text="Login" />
</LinearLayout>

maka akan menghasilkan tampilan seperti pada gambar berikut ini.

Gambar 10. Tampilan Login 1

selanjutnya tambahkan foto kedalam aplikasi dengan acara mengcopy paste file gambar yang akan digunakan ke directory /app/res/drawable

Gambar 11. Copy Paste file gambar ke drawable

ketikan code berikut diatas EditText username.

<ImageView    android:id="@+id/image"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:src="@drawable/backshare" />

hasil reviewnya. seperti berikut:

Gambar 12. hasil memasukan foto ke aplikasi

agar tidak terlalu rapat antara isi layar dengan content yang ada di aplikasi, maka kita berikan attribute android:layout_margin="10dp" di Tag LinearLayout, maka akan menghasilkan tampilan seperti beirkut:

Gambar 13. menambahkan margin_layout pada aplikasi

bagaimana mudahkan? setelah mempelajari code xml diatas, pasti kamu akan lebih tertarik lagi untuk mempelajari bagaimana cara menghidupkan aplikasi ini, agar bukan sekedar tampilan statis saja.
hal tersebut akan saya bahas di artikel selanjutnya.

berikut code versi lengkapnya.

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android"    

android:layout_width="match_parent"    

android:layout_height="match_parent"    

android:layout_margin="10dp"    

android:orientation="vertical">

<ImageView        

android:id="@+id/image"        

android:layout_width="match_parent"        

android:layout_height="wrap_content"        

android:src="@drawable/backshare" />
    

<EditText        

android:id="@+id/username"        

android:layout_width="match_parent"        

android:layout_height="wrap_content"        

android:hint="Username"        

android:inputType="text" />
    

<EditText        

android:layout_width="match_parent"        

android:layout_height="wrap_content"        

android:hint="Password"        

android:inputType="textPassword" />

<Button        

android:layout_width="match_parent"        

android:layout_height="wrap_content"       

android:text="Login" />

</LinearLayout>