Android-Simple Login Screen

In this post we're going to create login screen using android studio and java.I'll explain things along the way.Now, let's start new project on android studio.You can follow step by step or feel free to clone the code and play with it. ViewBinding

ViewBinding

ViewBinding library is part of android Jetpack. It allow us to write faster, cleaner and shorter code. It creates Binding class for every XML file. Usually, viewbinding replace findviewbyId. We'll see how to use it in a second, let's now enable viewbinding.Open up build.gradle module, and add viewBinding { enabled = true } below the compile sdk version and targetversion.

Creating the views

There's nothing fancy right now only layout with Edittexts and buttons.Don't forget to give them an id in order to access views with viewbinding.

<?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/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#efefef"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/editTextUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="username"
            android:inputType="textPersonName"
            android:padding="16dp"
            android:textAlignment="center"
            android:textColor="#000000"
            android:textSize="16sp" />

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:ems="10"
            android:hint="password"
            android:inputType="textPassword"
            android:padding="16dp"
            android:textAlignment="center"
            android:textColor="#000000"
            android:textSize="16sp" />

        <Button
            android:id="@+id/signUpButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:text="Sign Up"
            android:textSize="16sp" />

        <Button
            android:id="@+id/loginButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp"
            android:text="Login"
            android:textSize="16sp" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Styling

This is the more fun part, let's do some custom styling. Right click to drawable folder, create new drawable resorce file and create rectangle shape with border-radius:12dp property,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#f8cd84" />
    <corners android:radius="12dp" />
</shape>

Now, let's go to our xml file and make it background of edittext,

android:background="@drawable/background"

I added this to editTextUsername and I'm going to use different color for editTextPassword, we can either create new drawable file and only change color and border properties or override the color with backgroundTint.

android:background="@drawable/background"
android:backgroundTint="#dddeee"

The editTextPassword, is gonna have same the border property but will have gray background color.If we add this to our buttons, will see the corners has a border but the color didn't change. In that case we need to change the theme, navigate to resources/theme.xml folder change the from,

<style name="Theme.LoginScreen" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

to,

<style name="Theme.LoginScreen" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">

we're done with the styling. We said the viewbinding generate a class for each xml file, now we need instance of it in order to access thew views. for main activity it is, ActivityMainBinding,

        ActivityMainBinding binding;

        //bind the view
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        View view = binding.getRoot();
        setContentView(view);

let's simply get the text from edittexts and create toast message when button is pressed.

Lambda Expressions

Just an anonymous function without a name. Introduced in java 8. The syntax is, (parameter) -> {body} it executes whatever instead of the body, I used instead of new OnClickListener, find it shorter and cleaner, do not worry android studio will help you with that. Lambda expressions

Now, we don't need to use findviewById to access our views we can do, binding. will see the views pop up.

   ActivityMainBinding binding;

        //bind the view
       binding =  ActivityMainBinding.inflate(getLayoutInflater());
        View view = binding.getRoot();
        setContentView(view);

    //execute whatever inside {} take view as a parameter
        binding.signUpButton.setOnClickListener(v -> {
            String username = binding.editTextUsername.getText().toString();
            String password = binding.editTextPassword.getText().toString();
            Toast.makeText(this, username + " " + password, Toast.LENGTH_SHORT).show();
        });

Source Code

I hope you enjoyed this writing. Let me know what your thoughts are.