Membuat Aplikasi Login-Register Menggunakan ADT Eclipse

Assalamualaiqum ☺

Di sore ini saya kembali membagikan pengetahuan tentang cara membuat form login dan register pada android.

Berikut langkah – langkah membuatnya:

1. Buat project baru.
2. Buat file xml dan java

3. Isikan source code berikut pada file login.xml

<?xml version="1.0" encoding="utf-8"?>

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

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   android:fillViewport="true" >

   <RelativeLayout

       android:layout_width="317dp"

       android:layout_height="wrap_content"

       android:background="#ffffff" >

       <!-- Header Starts -->

       <!-- Header Ends -->

       <!-- Footer Start -->

       <LinearLayout

           android:id="@+id/footer"

           android:layout_width="fill_parent"

           android:layout_height="90dip"

           android:layout_alignParentBottom="true"

           android:layout_below="@+id/linearLayout1"

           android:background="@layout/footer_repeat" >

       </LinearLayout>

       <!-- Footer Ends -->

       <!-- Login Form -->

       <LinearLayout

           android:layout_width="match_parent"

           android:layout_height="wrap_content"

           android:orientation="vertical"

           android:padding="10dip" >

           <!-- Email Label -->

           <LinearLayout

               android:id="@+id/header"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:background="@layout/header_gradient"

               android:paddingBottom="5dip"

               android:paddingTop="5dip" >

               <ImageView

                   android:layout_width="wrap_content"

                   android:layout_height="wrap_content"

                   android:layout_marginLeft="10dip"

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

           </LinearLayout>

           <TextView

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Email"

               android:textColor="#372c24" />

           <EditText

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginBottom="20dip"

               android:layout_marginTop="5dip"

               android:singleLine="true" />

           <!-- Password Label -->

           <TextView

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Password"

               android:textColor="#372c24" />

           <EditText

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginTop="5dip"

               android:password="true"

               android:singleLine="true" />

           <!-- Login button -->

           <Button

               android:id="@+id/btnLogin"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginTop="10dip"

               android:text="Login" />

           <!-- Link to Registration Screen -->

           <TextView

               android:id="@+id/link_to_register"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginBottom="40dip"

               android:layout_marginTop="40dip"

               android:gravity="center"

               android:text="Pengguna Baru? Buat Akun, Register disini"

               android:textColor="#0b84aa"

               android:textSize="20dip" />

       </LinearLayout>

       <!-- Login Form Ends -->

   </RelativeLayout>

</ScrollView>

Hasilnya:

4. Source code register.xml

<?xml version="1.0" encoding="UTF-8"?>

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

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   android:fillViewport="true" >

   <RelativeLayout

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:background="#fff" >

       <!-- Header  Starts -->

       <LinearLayout

           android:id="@+id/header"

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           android:background="@layout/header_gradient"

           android:paddingBottom="5dip"

           android:paddingTop="5dip" >

           <!-- Logo Start -->

           <ImageView

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_marginLeft="10dip"

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

           <!-- Logo Ends -->

       </LinearLayout>

       <!-- Header Ends -->

       <!-- Footer Start -->

       <LinearLayout

           android:id="@+id/footer"

           android:layout_width="fill_parent"

           android:layout_height="90dip"

           android:layout_alignParentBottom="true"

           android:background="@layout/footer_repeat" >

       </LinearLayout>

       <!-- Footer Ends -->

       <!-- Registration Form -->

       <LinearLayout

           android:layout_width="match_parent"

           android:layout_height="wrap_content"

           android:layout_below="@id/header"

           android:orientation="vertical"

           android:padding="10dip" >

           <!-- Full Name Label -->

           <TextView

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Full Name"

               android:textColor="#372c24" />

           <EditText

               android:id="@+id/reg_fullname"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginBottom="20dip"

               android:layout_marginTop="5dip"

               android:singleLine="true" />

           <!-- Email Label -->

           <TextView

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Email"

               android:textColor="#372c24" />

           <EditText

               android:id="@+id/reg_email"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginBottom="20dip"

               android:layout_marginTop="5dip"

               android:singleLine="true" />

           <!-- Password Label -->

           <TextView

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:text="Password"

               android:textColor="#372c24" />

           <EditText

               android:id="@+id/reg_password"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginTop="5dip"

               android:password="true"

               android:singleLine="true" />

           <!-- Register Button -->

           <Button

               android:id="@+id/btnRegister"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginTop="10dip"

               android:text="Register New Account" />

           <!-- Link to Login Screen -->

           <TextView

               android:id="@+id/link_to_loginn"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_marginBottom="40dip"

               android:layout_marginTop="40dip"

               android:gravity="center"

               android:text="Sudah memiliki Akun! Masuk Login disini"

               android:textColor="#025f7c"

               android:textSize="20dip" />

       </LinearLayout>

       <!-- Registration Form Ends -->

   </RelativeLayout>

</ScrollView>

Hasilnya:

5. Selanjutnya isikan script pada file  Login.java

package example.putri.androidlogreg;

import com.example.androidloginregister_master.R;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.content.Intent;

import android.view.View;

import android.widget.TextView;

public class LoginActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.login);

TextView registerScreen = (TextView) findViewById(R.id.link_to_register);

       // Mengambil link ke register new account

       registerScreen.setOnClickListener(new View.OnClickListener() {

           public void onClick(View v) {

               // Beralih ke tampilan screen Register

               Intent i = new Intent(getApplicationContext(), RegisterActivity.class);

               startActivity(i);

           }

       });

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.login, menu);

return true;

}

}

6. Source code Register.java

package example.putri.androidlogreg;

import com.example.androidloginregister_master.R;

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 ke register.xml

setContentView(R.layout.register);

TextView loginScreen = (TextView) findViewById(R.id.link_to_loginn);

// Mengambil link ke Login form

loginScreen.setOnClickListener(new View.OnClickListener() {

public void onClick(View arg0) {

// Menutup tampilan screen register

// Beralih ke Login Screen/menutup screen register

finish();

}

});

}

}

Semoga Bermanfaat ☺