Hi All,
I going to show on how to develop a app of Login Screen like below:
You project need to have all files like below:
The gradle file:
The code for each files is showed below:
1. The gradle file.
apply plugin: 'com.android.application' android { compileSdkVersion 29 buildToolsVersion "29.0.3" defaultConfig { applicationId "com.example.a02_login_beutiful" minSdkVersion 25 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' implementation 'com.jaeger.statusbarutil:library:1.4.0' }
2. MainActivity.java
package com.example.a02_login_beutiful; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import com.jaeger.library.StatusBarUtil; public class MainActivity extends AppCompatActivity { Button button1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); StatusBarUtil.setTransparent(this); // to make the status bar transparent setContentView(R.layout.activity_main); //setContentView(R.layout.activity_login); //setContentView(R.layout.activity_user); getSupportActionBar().hide(); // to hide the title activity button1 = findViewById(R.id.btnLogin); } public void login(View v){ Intent intent = new Intent(this,LoginActivity.class); startActivity(intent); } }
3. activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:background="@drawable/back_image"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="60dp" android:text="Welcome!" android:textColor="@color/white" android:textSize="50sp" app:layout_constraintStart_toStartOf="@+id/textView4" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginBottom="40dp" android:fontFamily="sans-serif-light" android:text="Your are not member?!" android:textColor="@color/white" android:textSize="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.047" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.977" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="4dp" android:layout_marginBottom="40dp" android:fontFamily="sans-serif-black" android:text="Register" android:textColor="#F346C8" android:textSize="16sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toEndOf="@+id/textView2" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.977" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="50dp" android:alpha="0.5" android:text="Nice to see you again!" android:textColor="@color/white" android:textSize="18sp" app:layout_constraintBottom_toTopOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView3" app:layout_constraintVertical_bias="0.0" /> <Button android:id="@+id/btnLogin" android:layout_width="162dp" android:layout_height="53dp" android:layout_marginTop="10dp" android:layout_marginBottom="464dp" android:background="@drawable/button" android:onClick="login" android:text="Login" android:textAllCaps="false" android:textColor="#FFFFFF" android:textSize="22sp" app:layout_constraintBottom_toTopOf="@+id/textView2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/textView4" app:layout_constraintVertical_bias="0.0" /> </androidx.constraintlayout.widget.ConstraintLayout>
4. LoginActivity.java
package com.example.a02_login_beutiful;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;
import com.jaeger.library.StatusBarUtil;
public class LoginActivity extends AppCompatActivity {
ImageView back;
EditText username;
EditText password;
Button loginBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
StatusBarUtil.setTransparent(this); // to make the status bar transparent
setContentView(R.layout.activity_login); // the red colour is not error..when you opened again is will gone.
getSupportActionBar().hide(); // to hide the title activity
back = findViewById(R.id.backBtn);
username = findViewById(R.id.editText);
password = findViewById(R.id.editText2);
loginBtn = findViewById(R.id.button2);
loginBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String nameEntered = username.getText().toString();
String passEntered = password.getText().toString();
if(nameEntered.equals("shaharil") && passEntered.equals("1234")){
Intent intent = new Intent(LoginActivity.this,UserActivity.class);
intent.putExtra("user",nameEntered);
intent.putExtra("pass",passEntered);
startActivity(intent);
}
else{
Toast.makeText(getApplicationContext(),"Access Denied",Toast.LENGTH_SHORT).show();
}
}
});
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}
5. activity_login.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".LoginActivity"> <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginBottom="40dp" android:fontFamily="sans-serif-light" android:text="Your are not member?!" android:textColor="#171717" android:textSize="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.047" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.977" /> <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="4dp" android:layout_marginBottom="40dp" android:fontFamily="sans-serif-black" android:text="Register" android:textColor="#F346C8" android:textSize="16sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toEndOf="@+id/textView6" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.977" /> <EditText android:id="@+id/editText" android:layout_width="300dp" android:layout_height="50sp" android:layout_marginStart="50dp" android:layout_marginTop="16dp" android:background="@drawable/input_field" android:ems="10" android:hint="Username" android:inputType="textPersonName" android:textColorHint="#171717" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView8" /> <EditText android:id="@+id/editText2" android:layout_width="300dp" android:layout_height="50sp" android:layout_marginTop="16dp" android:layout_marginBottom="416dp" android:background="@drawable/input_field" android:ems="10" android:hint="Password" android:inputType="textPassword" android:textColorHint="#171717" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="@+id/editText" app:layout_constraintTop_toBottomOf="@+id/editText" app:layout_constraintVertical_bias="0.0" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:background="@drawable/button" android:text="Login" android:textAllCaps="false" android:textColor="#FFFFFF" android:textSize="22sp" app:layout_constraintStart_toStartOf="@+id/editText2" app:layout_constraintTop_toBottomOf="@+id/editText2" /> <TextView android:id="@+id/textView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="100dp" android:fontFamily="sans-serif-black" android:text="Hello There!" android:textColor="#000000" android:textSize="40sp" app:layout_constraintStart_toStartOf="@+id/editText" app:layout_constraintTop_toTopOf="parent" /> <ImageView android:id="@+id/backBtn" android:layout_width="29dp" android:layout_height="27dp" android:layout_marginStart="16dp" android:layout_marginTop="20dp" app:layout_constraintBottom_toTopOf="@+id/textView8" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0" android:src="@drawable/arrow_back" /> </androidx.constraintlayout.widget.ConstraintLayout>
6. UserActivity.java
package com.example.a02_login_beutiful;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import com.jaeger.library.StatusBarUtil;
public class UserActivity extends AppCompatActivity {
TextView user;
Button backHome;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
StatusBarUtil.setTransparent(this); // to make the status bar transparent
setContentView(R.layout.activity_user);
getSupportActionBar().hide(); // to hide the title activity
Bundle extras = getIntent().getExtras();
String value1 = extras.getString("user");
String value2 = extras.getString("pass");
user = findViewById(R.id.textView9);
backHome = findViewById(R.id.btnLgt);
user.setText(value1);
backHome.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(UserActivity.this, MainActivity.class);
startActivity(intent);
}
});
}
}
7. activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".UserActivity">
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:fontFamily="sans-serif-black"
android:text="Welcome back !"
android:textColor="#F346C8"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@+id/textView9"
app:layout_constraintStart_toStartOf="@+id/textView9" />
<Button
android:id="@+id/btnLgt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="452dp"
android:background="@drawable/button"
android:text="Logout"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView9" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="116dp"
android:fontFamily="sans-serif-black"
android:text="Hello There!"
android:textColor="#000000"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
8. button.xml
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="50sp"/> <solid android:color="@color/red"/> </shape>
9. input_field.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#EAE7E9"/>
<corners android:radius="50dp"/>
<padding android:left="25sp"/>
</shape>
10. colors.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#6200EE</color> <color name="colorPrimaryDark">#3700B3</color> <color name="colorAccent">#03DAC5</color> <color name="grey">#8C898B</color> <color name="red">#F80A2D</color> <color name="white">#FFFFFF</color> </resources>
11. strings.xml & styles.xml is used default
Good Luck Yeah !!!