Login Screen App Example

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 !!!