Membuat Design Login dan Register Aplikasi Android

 

Hampir semua aplikasi android memiliki form login atau form register untuk mengotentikasi pengguna. Dalam artikel ini saya akan mendemonstrasikan bagaimana merancang design login aplikasi android dan design form register (perhatikan bahwa tutorial berikut hanya lah merancang design aplikasi android - tidak ada koneksi database atau validasi pengguna).

Untuk melakukan desain login / pendaftaran saya menggabungkan beberapa layout android. Saya menggunakan Scroll View sebagai elemen induk. Fungsi Scroll View yaitu agar dapat di scroll ke  arah vertikal untuk menghindari objek yang tertutup  pada layar karena perbedaan dimensi ukuran di setiap handphone android. Di dalam scroll view saya ditempatkan Relative View. Alasan utama untuk menggunakan relatif View adalah agar footer selalu menempel di bagian bawah. Kemudian saya menggunakan Linear Layouts untuk menempatkan Header, Form dan Footer. Lihat diagram berikut untuk mendapatkan ide tentang tata letak yang saya gunakan.

 

Merancang Login Screen

    Pada tutorial ini fokus utama adalah untuk membuat halaman login android, halaman register dan navigasi / switching antara login dan register.

1 Buat proyek baru dengan klik File ⇒ New Android Project. Isi semua rincian dan nama aktivity Anda sebagai LoginActivity.
2 Setelah proyek dibuat, membuat activity class baru dalam direktori src proyek Anda dan namakan sebagai RegisterActivity.java (Klik kanan pada src/package ⇒ New ⇒ Class)
3 Sekarang kita perlu membuat layout untuk layar login. Di bawah res / layout, buat file xml baru dan beri nama sebagai login.xml
(Klik kanan pada res / layout ⇒ New ⇒ Android File XML)
4. Pada login.xml, isi kode nya adalah sebagai berikut :

Desain Header ( dengan Logo & Gradient Background )

Dalam layar login kami menggunakan header logo dan warna background gradient. Desain logo nya menggunakan dimensi yang berbeda untuk high-density( 72px height), medium density ( 48 px height) and low density (36px height).

5. Buat file xml baru di bawah res / layout dan beri nama sebagai header_gradient.xml dan ketik kode berikut:

6. Di login.xml, tambahkan kode berikut antara header dan comment :

Design Footer ( dengan background image ) Dalam layar login footer menggunakan background repeat image.

 

7. Buat file xml baru di res/layout dan beri nama sebagai footer_repeat.xml kemudian ketikkan kode berikut :

Merancang Login Form Form login berisi dua textfield dengan label dan tombol login. Dalam file login.xml Anda menambahkan kode berikut :

Kode Akhir untuk file login.xml adalah :

Merancang form pendaftaran / Register Form pendaftaran / register juga memiliki header dan footer yang sama, tetapi berbeda bentuk. Formulir pendaftaran berisi field seperti nama lengkap, email, password (jika diperlukan sandi). Berikut ini adalah kode untuk layar pendaftaran. 9. Buat file xml baru di res / layout folder dengan nama register.xml kemudian ketikkan kode berikut :

Berpindah dari layar Login ke layar Pendaftaran

10 Sekarang design interface sudah siap, tinggal memasukkan code java. Buka LoginActivity.java kemudian edit kode java nya. Dalam kode berikut ini, pertama kita membuat setting untuk layout login.xml. Kedua, kita membuat perintah jika Registration page link di klik, maka layout beralih dari layar LoginActivity ke RegisterActivity.

package com.androidhive.loginandregister;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
 
public class LoginActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // setting default screen to login.xml
        setContentView(R.layout.login);
 
        TextView registerScreen = (TextView) findViewById(R.id.link_to_register);
 
        // Listening to register new account link
        registerScreen.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View v) {
                // Switching to Register screen
                Intent i = new Intent(getApplicationContext(), RegisterActivity.class);
                startActivity(i);
            }
        });
    }
}

Berpindah dari layar Register ke Login layar 

11. Buka RegisterActivity.java Anda dan edit kode seperti dibawah ini. Script ini bertujuan untuk beralih kembali ke layar login hanya dengan memanggil perintah panggilan finish (). Jadi, perintah ini akan menutup layar pendaftaran, sehingga layar login akan ditampilkan kembali.

package com.androidhive.loginandregister;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
 
public class RegisterActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set View to register.xml
        setContentView(R.layout.register);
 
        TextView loginScreen = (TextView) findViewById(R.id.link_to_login);
 
        // Listening to Login Screen link
        loginScreen.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View arg0) {
                                // Closing registration screen
                // Switching to Login Screen/closing register screen
                finish();
            }
        });
    }
}

Menambahkan Activity di AndroidManifest.xml

12. Terakhir jangan lupa untuk menambahkan entri untuk RegisterActivty.class yang baru dibuat ke dalam file AndroidManifest.xml Anda.

Jalankan project Anda dengan mengklik kanan pada folder project Anda ⇒ Run As ⇒ 1 Android Application. Anda akan melihat output yang mengagumkan :). Selamat berkreasi

• Download Code