Courses Kotlin 20 Jul, 2020

Kotlin Course With Building Android AR App - Lesson2: How to Build Login Form in Android

In the second lesson of the Kotlin course, we will learn how to build a login form.

Here is the URL of the previous Lesson of the Kotlin course, where we learned how to set up Android Studio and ARCore for an Augmented Reality Project:
Kotlin course with building Android AR app - Lesson1: How to setup Android Studio and ARCore for an augmented reality project

In today’s episode, we’ll not only build a login form. Of course, we’ll do much more.

We will need to create the Android project from scratch, configuring everything, and writing Kotlin code.

The next thing that we will learn today is to use design in Android Studio, build the layout, and position elements.

Let’s start!

And if you prefer video, here is the step by step youtube episode, where we show how to do all of that:

How to create the Kotlin project in Android Studio

We have even not created a project yet.

The first step we need to do is create the Kotlin project in Android studio.

To do that, we need to open the Android Studio, and select:

“Start a new Android Studio project”

In the tab “Select a Project Template” we need to select:

“Empty Activity”

And, in the “Configure Your Project” tab, we just need to make sure if the language is as “Kotlin”, give the app name, setup minimum SDK for the API 27, and click the “Finish” button.

How to add dependencies to build.gradle

In the next step, we should go into the build.gradle file, this one with (module: app).

Inside the file, we should find the dependencies object, and add there four dependencies.

The first one is Google AR Core, the second one is AppCompat, the third one is “design”, and the last one is the javaGL.

Let’s take a look at the code example:

implementation 'com.google.ar:core:1.18.0'
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'de.javagl:obj:0.2.1'

How to add maven to the build.gradle and sync

In the next step that we should do is to open the next build.gradle file (this one with Project: DuomlyAR).

Next, we should add a maven repository into the repositories.

allprojects {
    repositories {
        mavenLocal()
        maven {
            url "https://maven.springframework.org/release"
        }
        google()
        jcenter()
    }
}

How to add permissions in AndroidManifest.xml

Augmented Reality, for sure, needs our camera, so we need to add the permission to use it from the user.

We’ll focus on the whole camera permission classes in the next episodes, and today we’ll just declare the uses-permission and feature in the AndroidManifest.xml file.

<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera.ar" android:required="true"/>
<uses-feature android:glEsVersion="0x00020000" android:required="true" />

Great, it looks like most of the “paperwork” is fine.

Now we can go into coding a bit more.

As the first code that we’ll create is the login function.

It’s a very simple fake-login without API calls (we’ll focus on back-end connection in the next episodes).

We just need to get the data from the login form, compare if fits the hardcoded values, and redirect to the next screen if yes,

If no, we should show a toast with the message about the error.

Remember about pass the “view: View” as an argument. Otherwise, you won’t be able to reach the function from the XML layout.

You could overwork that with listeners and importing XML here, but the first method is much faster.

fun login(view: View) {
    val email = findViewById<EditText>(R.id.login_email).text.toString()
    val password = findViewById<EditText>(R.id.login_password).text.toString()

    if(email == "email@duomly.com" && password == "duomly") {
        val intent = Intent(this, DashboardActivity::class.java)
        startActivity(intent)
    } else {
        Toast.makeText(this, "Invalid email or password", Toast.LENGTH_SHORT).show()
    }
}

How to create image in Android studio

Your login logic written in Kotlin is ready, congratulations!

We need to create a drawable image to be able to use it in the Android app.

It’s very easy, we just need to click the right mouse button on the “res/drawable” directory, and select new>vector asset.

Next, you need to select the SVG graphic from your desktop and upload it to the Android studio.

After clicking the “finish” button, you should have a drawable XML image.

How to create strings in Kotlin

In the Android app, we can add texts even in the simple hardcoded form, but I’d recommend that you add them as the strings, because that method is much better to add translations later.

Let’s add a few of the string that we’ll use later in the application.

Go into the values/strings.xml, and add the strings like in the example below:

<string name="login_logo">Learn coding with Duomly</string>
<string name="login_email">Email</string>
<string name="login_password">Password</string>
<string name="login_button">Login</string>
<string name="dashboard_title">Dashboard page</string>

How to add Logo in the Android layout

In the next couple of steps, we’ll be working with the XML layout.

In the text article, I’ll add the code version of the layout, it’s a more challenging version of creating the layout, but you’ll learn two of them.

To see how we use the drag&drop design methods, go into the youtube episode, please.

Go into the activity_main.xml, and inside the layout, you need to add ImageView element with properties like in the example below:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="69dp"
    android:layout_height="69dp"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_logo" />

How to add text in the Android layout

Like the previous step, we need to create some code in the same file, but in this case, we’ll create a simple text element.

Let’s the example below:

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/login_logo"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

How to create form in the Android layout

In this step, we can focus on the code for the form.

Building forms in Android is very easy, and ve just need a few inputs packed in the container named “View”.

In this case, I’ve already used the ConstraintLayout component (if you would like to see how it was transformed from the view, check the youtube episode).

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/view"
    android:layout_width="409dp"
    android:layout_height="220dp"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view2">

    <EditText
        android:id="@+id/login_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/login_email"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toTopOf="@+id/login_password"
        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/login_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/login_password"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_email" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to create button in the Android layout

We have almost all for the layout, but how could we submit our form without the “submit” button?

We need to create one!

To create the button, we just need to use the “Button” component and few properties like text, color, or sizes.

Check in the example below how I’ve added the button in the layout:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#2196F3"
    android:text="@string/login_button"
    android:textColor="#FFFFFF"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view" />

How to call Kotlin function from onClick

We have created a button, but it has not the possibility to run any logic.

We need to add the function that will be fired and define the event, which should be responsible for calling the function.

In this case, we will call the function “login,” and it should be fired as “onClick”.

Let’s see how you should look at the code for the button with “android:onClick”.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#2196F3"
    android:onClick="login"
    android:text="@string/login_button"
    android:textColor="#FFFFFF"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view" />

How to position elements in the Android Studio layout

Our layout looks like its almost ready, there are all of the elements that we need, but positioning looks very bad.

We need to fix it ASAP.

To do that, we need to add more containers and setup the positions related to the other objects.

Next, all of them should be centered.

<?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">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#2196F3"
        android:onClick="login"
        android:text="@string/login_button"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view2"
        android:layout_width="409dp"
        android:layout_height="160dp"
        app:layout_constraintBottom_toTopOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="69dp"
            android:layout_height="69dp"
            app:layout_constraintBottom_toTopOf="@+id/textView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_logo" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/login_logo"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view"
        android:layout_width="409dp"
        android:layout_height="220dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2">

        <EditText
            android:id="@+id/login_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/login_email"
            android:inputType="textEmailAddress"
            app:layout_constraintBottom_toTopOf="@+id/login_password"
            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/login_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/login_password"
            android:inputType="textPassword"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/login_email" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

How to add the second view in Android

Now, we can create the next view that we’ll redirect the app after the successful login.

Let’s name the page “Dashboard”.

To do that, we need to create the next file named “activity_dashboard.xml”.

Add the file in the same directory where the “main” layout is, and add the text component there.

<?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=".DashboardActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dashboard_title"
        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" />
</androidx.constraintlayout.widget.ConstraintLayout>

Next, we need to create the Kotlin class named “DashboardActivity”.

You should create that class in the “java” directory (the same as we have MainActivity class).

In that class, we should define the function that will render our layout.

package com.example.duomlyar_dev

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class DashboardActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_dashboard)
    }
}

How to add the second view into the Android Manifest

Congratulations, it’s the last step, you did a lot!

In the last coding step, we should define the new view in the AndroidManifest.xml file.

Let’s see how I did it in the example below:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.duomlyar_dev">

<!--    Add permissions-->
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-feature android:name="android.hardware.camera.ar" android:required="true"/>
    <uses-feature android:glEsVersion="0x00020000" android:required="true"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".DashboardActivity"/>
    </application>

</manifest>

Congratulations, you’ve learned how to build a login form in Kotlin and create a Kotlin project in Android Studio!

Our application is getting the first shape, and I’m very proud you’ve built it!

In the next episodes, we will focus on the more features like dashboard and learning modules, we will implement the augmented reality into our application and connect the app with the back-end.

If you would like to compare your code with mine, you can find GitHub repository for the current lesson here: https://github.com/Duomly/kotlin-course/tree/Kotlin-course-Lesson-2

Stay updated, and let’s build an excellent app together!

Thanks for coding with us,
Radek from Duomly