How to create a simple login screen

In this tutorial we need some pictures for Backround and Avatar.If you want to use background pictures and avatars for commercial use , i would recommend you to look for commercial free pictures in the following link https://pixabay.com/.This will help you to avoid law violations (copyright) and many other problems with law in the beginning.

Step 1: Create a simple XML Layout with a simple design activity main

<?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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView"
        android:layout_width="151dp"
        android:layout_height="141dp"
        android:layout_marginStart="91dp"
        android:layout_marginTop="84dp"
        android:layout_marginEnd="118dp"
        android:background="@drawable/avatar"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/username"
        android:layout_width="266dp"
        android:layout_height="36dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="52dp"
        android:background="#BED3E7"
        android:ems="10"
        android:inputType="textPersonName"
        android:shadowColor="@color/colorPrimary"
        android:text="username"
        android:textAlignment="textStart"
        android:textColor="#0F0000"
        android:textColorHint="@android:color/background_light"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.453"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <EditText
        android:id="@+id/password"
        android:layout_width="266dp"
        android:layout_height="36dp"
        android:layout_marginTop="40dp"
        android:background="#FFFFFF"
        android:contentDescription="password"
        android:ems="10"
        android:inputType="text|textPassword"
        android:text="password"
        android:textAlignment="textStart"
        android:textColor="#070000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.457"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/username" />

    <Button
        android:id="@+id/buttonlogin"
        android:layout_width="156dp"
        android:layout_height="48dp"
        android:layout_marginBottom="57dp"
        android:background="#1976D2"
        android:text="login"
        android:textColor="@android:color/background_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="39dp"
        android:text="Please click on login"
        android:textColor="@android:color/background_light"
        app:layout_constraintBottom_toTopOf="@+id/buttonlogin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

STEP 2: add your pictures in the drawable folder and rename it to avatar.png
background.png

Please avoid capital letters!!!!!

STEP 3: Define Buttons and Textviews in the main activity class

public class MainActivity extends AppCompatActivity {

    Context context = this;
    private TextView username;
    private TextView password;
    private TextView welcome;

    int duration = Toast.LENGTH_SHORT;
    CharSequence text = "Hello Bob";
    Toast toast ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        username = findViewById(R.id.username);
        password = findViewById(R.id.password);
        Button login = findViewById(R.id.buttonlogin);
        welcome = findViewById(R.id.textView3);
toast = Toast.makeText(context, text, duration);
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
String text = username.getText().toString();
String textPassword = password.getText().toString();

if (text.equals("Bob") && textPassword.equals("1234")){
    toast.show();
}

           }

        });



    }
}

Tip: always transform from view.getText()  to String.Every getText method is a CharSequence!!!!A text  of Char Sequence is not equal  to String it will return a false statement except short letters.

Result of simple login screen:

Leave a Reply

Your email address will not be published. Required fields are marked *