Assalamualaiqum ☺
Di sore ini saya kembali membagikan pengetahuan tentang cara membuat form login dan register pada android.
Berikut langkah – langkah membuatnya:
- Buat project baru.
- Buat file xml dan java
- 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:
- 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:
- 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;
}
}
- 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 ☺
