A User Authentication Android App made in Android Studio
Introduction
From the advent of smart phones and the popular Android OS developed by Google, there has been an increase in a lot of intuitive android applications for various categories from gaming to social media and beyond. One of the most common element that can be found in all of these applications is a User Authentication page (login form). Simple yet important for maintaining data security and integrity in the digital age.
Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA . On top of IntelliJ’s powerful code editor and developer tools, Android Studio offers even more features that enhance your productivity when building Android apps, such as:
- A flexible Gradle-based build system.
- A fast and feature-rich emulator.
- A unified environment where you can develop for all Android devices.
- Apply Changes to push code and resource changes to your running app without restarting your app.
- Code templates and GitHub integration to help you build common app features and import sample code.
- Extensive testing tools and frameworks.
- Lint tools to catch performance, usability, version compatibility, and other problems.
- C++ and NDK support.
- Built-in support for Google Cloud Platform, making it easy to integrate Google Cloud Messaging and App Engine.
The benefit of using Android Studio over any other IDE is we get a rich set of features built-in which enable us to focus more into the development aspect while the back-end of this IDE handles the requirements and dependencies. In this tutorial, we are going to build a very simple UI for User Authentication which will allow the user to register new users and also login. A User Authentication API is used for the back-end which is a REST API.
To know more, you can head over to this tutorial: https://medium.com/webtutsplus/a-simple-user-authentication-api-made-with-spring-boot-4a7135ff1eca
Prerequisite:
Before we start developing, we need to check off a few requirements:
- You will need to have a Java JDK installed on your system. You can find the instructions for installing the JDK here.
- You will need to install Android Studio on your system.
- Lastly, we can use our android smart phone with USB debugging enabled for testing the android app or we can use the built-in android emulator from Android Studio (I have used my smart phone for testing and debugging).
Project Setup and Structure:
Once you install Android Studio on your system, you can start off with creating a new project.
To create your new Android project, follow these steps:
- In the Welcome to Android Studio window, click Start a new Android Studio project.
- In the Select a Project Template window, select Empty Activity and click Next.
- In the Configure your project window, complete the following:
- Enter “User Authentication” in the Name field.
- Enter “com.example.userauthentication” in the Package name field.
- If you’d like to place the project in a different folder, change its Save location.
- Select Java from the Language drop-down menu.
- Select the lowest version of Android your app will support in the Minimum SDK field. I have selected API level 22 (Android Lollipop).
- Leave the other options as they are.
4. Click Finish.
After some processing time, the Android Studio main window appears.
Now take a moment to review the most important files. First, be sure the Project window is open (select View > Tool Windows > Project) and the Android view is selected from the drop-down list at the top of that window. You can then see the following files:
- app > java > com.example.userauthentication > MainActivity
This is the main activity. It’s the entry point for your app. When you build and run your app, the system launches an instance of this Activity and loads its layout.
- app > res > layout > activity_main.xml
This XML file defines the layout for the activity's user interface (UI). It contains a TextView element with the text "Hello, World!"
- app > manifests > AndroidManifest.xml
The manifest file describes the fundamental characteristics of the app and defines each of its components.
- Gradle Scripts > build.gradle
There are two files with this name: one for the project, "Project: User Authentication" and one for the app module, "Module: app." Each module has its own build.gradle file, but this project currently has just one module. Use each module's build.gradle file to control how the Gradle plugin builds your app. For more information about this file, see Configure your build.
Before you run your first app, get your smart phone and enable USB debugging by following the instructions over here. After, enabling USB debugging, connect your smart phone to your PC and you are ready to go.
In Android Studio, select Run > Run ‘app’ or click the Run icon in the toolbar.
Congratulations on creating your very first app. But you are far from what we have to achieve. Next we need to create the rest of the applications.
Setting up the files:
Lets start with app > res > drawables. This is the directory where we will be storing all the graphical elements for our application. We are going to store three different categories of graphic elements.
- Images. (filename: background.jpg, image.png)
- Icon elements. (filenames: account.xml, email.xml, eye.xml, eye_off.xml, lock.xml)
- Custom graphic file. (round_button_2.xml)
The images used here are for background and a logo in the logged-in session. You can use any image you like but be sure to use the same file name for the next part where we will be coding the back-end and creating activity layouts.
Icon elements are XML files for vector graphic icons used in our application. You can find and download these files from here.
The custom graphic file here is used for creating a rich look for our buttons in the application. It’s an XML file containing various tags and attributes specifying the properties that the button will have for its appearance.
Moving on, we have three layout files for our three pages: login, register and logged-in page. These files are contained in app > res > layout having names activity_main.xml, register.xml, user.xml. To create these files, right click on the layout directory and select new > layout resource file. A New Resource File pop-up with several fields should appear. In the File name field we’ll insert the required file names.
In the Root element field of this same pop-up, make sure to type in RelativeLayout. The remaining two fields can remain the same. Click OK. This will create a new layout for us. However, Android Studio will likely default to the visual editor we saw our Constraint Layout in earlier. To edit our layout’s XML directly, we’ll need to navigate out of the visual editor and into the XML editor. Near the top-right of the editor screen, you should see three tabs: code, split, design. Select code tab to toggle into the XML editor.
If you can notice then all these files contain some common tags having some attributes. These tags are View elements that are going to be displayed in the application. Lets review them one by one for a general idea.
- RelativeLayout: RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
- TextView: A TextView displays text to the user and optionally allows them to edit it. A TextView is a complete text editor, however the basic class is configured to not allow editing.
- ImageView: Android ImageView is one of the UI widget that is used to display images in the application. Here android:src attribute is used to assign the image file from the drawable resource directory.
- EditText: EditText is a standard entry widget in android apps. It is an overlay over TextView that configures itself to be editable. EditText is a subclass of TextView with text editing operations. We often use EditText in our applications in order to provide an input or text field, especially in forms.
- Button: In Android, Button represents a push button. A Push buttons can be clicked, or pressed by the user to perform an action. On a button we can perform different actions or events like click event, pressed event, touch event etc.
There are many more tags and have many different attributes for creating various intuitive design elements and UI for an android application.
Next up, we will create the files necessary for the back-end of our applications: Java files.
We will be creating two more java class files which are Register.java and User.java. To create them, right click on app > java > com.example.userauthentication directory and click New > Java Class. Enter the file name and press enter.
Before moving ahead, we must configure our AndroidManifest.xml file for the file additions and requirements that we want.
Adding in the code
To save the hassle, each class for a given activity contains a default piece of code that is essential for the behavior of the application.
As a user navigates through, out of, and back to your app, the Activity instances in your app transition through different states in their life-cycle. The Activity class provides a number of callbacks that allow the activity to know that a state has changed: that the system is creating, stopping, or resuming an activity, or destroying the process in which the activity resides.
Within the life-cycle callback methods, you can declare how your activity behaves when the user leaves and re-enters the activity. For example, if you’re building a streaming video player, you might pause the video and terminate the network connection when the user switches to another app. When the user returns, you can reconnect to the network and allow the user to resume the video from the same spot. In other words, each callback allows you to perform specific work that’s appropriate to a given change of state. Doing the right work at the right time and handling transitions properly make your app more robust and performant. For example, good implementation of the life-cycle callbacks can help ensure that your app avoids:
- Crashing if the user receives a phone call or switches to another app while using your app.
- Consuming valuable system resources when the user is not actively using it.
- Losing the user’s progress if they leave your app and return to it at a later time.
- Crashing or losing the user’s progress when the screen rotates between landscape and portrait orientation.
We have extensively use the onCreate() activity method which defines the behaviour of the application on start-up.
For the first file, MainActivity.java:
Let’s go through the methods defined in this code snippet-
- register(): This method starts a new activity called register. If the user is not registered, pressing register in the app will call this function allowing the user to register.
- login(): This method is the heart of the login page where the magic happens. Right from getting the input to processing it is managed by this method. The most important job of this method is to create an HTTP client tunnel connection to the server hosting the database (which in this case is our local machine) and send the HTTP POST request to users/login. Here, we require to provide our machine private IP address because we will be connected to a LAN network. Also this method will be handling failed requests and other errors while successfully creating a new logged-in activity on successful login.
- toggle(): This method is used for toggling the visibility of the password in the login page simply by tapping the eye icon in the password field.
Next up, we are having Register.java file:
Let’s go through the methods defined in this code snippet-
- register(): This method is very similar to the login() method defined in the previous code snippet. It fulfills all the functionalities that were discussed previously for login(). The only difference here in this method is that it send an HTTP POST request to /users/register for registering the user data in the database.
- toggle(): This method is used for toggling the visibility of the password in the login page simply by tapping the eye icon in the password field.
Lastly, we have the User.java file:
Here we have only one method delete() whose sole role is to delete the user data from the local database. It performs this operation by sending an HTTP DELETE request to users/all. Note that this function will clear the entire database thus all users will be deleted.
Now we will run our program as previously stated by connecting our android device via USB.
