Simple Android UI for the Front-end part of Web Applications
Introduction
In this tutorial, we will create a simple android app. This app will be used as the front-end part of our web application.
We had already created the API for the back-end of our web application using Spring Boot in a previous tutorial. If you have not completed the previous tutorial and are interested in learning about the API for the back-end part, you can visit this link to read it. If you are only interested in the front-end development and know the basic concept of APIs, you can continue with this tutorial.
Prerequisite Knowledge
This tutorial assumes that the reader knows the following:-
1. Views and ViewGroups in Android
2. Very Basic concept of Multi-threading
3. Basic structure of an Android App
4. Basic knowledge about HTTP requests
Structure of the API for the back-end
Before developing the front-end part, it is always beneficial if we know about the structure of the API with which our front-end will interact. The API, which we created in the previous tutorial, has the following structure.
URLs
Let’s say that our back-end application is running on a server with the ip address — 192.168.x.x, then the requests must be made to the following URLs for different actions.
To register a user, [POST] URL — http://192.168.x.x:8080/users/register
To login a user, [POST] URL — http://192.168.x.x:8080/users/login
To logout a user, [POST] URL — http://192.168.x.x:8080/users/logout
To delete all users from database, [DELETE] URL — http://192.168.x.x:8080/users/all
Parameters
Also, the following parameters must be sent in JSON format order to register, login or logout.
username — the username of the user
password — the password of the user
email — the email address of the user
To delete all the users from the database, we don’t have to send any parameter
Creating the UI of the App
From the structure of the API, it is clear that we need
a. three text input fields — for username, password and email
b. four buttons — for register, login, logout and delete all users
Hence the app should look like the following
The following is the code for creating the above UI. Paste it in activity_main.xml
Obtaining value from the user
Till now, we have only created the UI for the app. Let’s attach click listeners with the buttons and store the values entered by the user in different variables. To attach click listeners, we need to:-
1. Create an object of class ‘View.OnClickListener’ and implement a method ‘onClick()’ in it. This method will be executed as soon as the user touches the button.
2.Set this `OnClickListener` object to the view using `SetOnClickListener()` method.
Hence, code in MainActivity.java looks like this
Sending a request to the server
Till now, we have created the UI and stored the values input by the user in different variables. Now let’s make a API call to the server.
Asking Permission to use the internet
First, to let our app use the network service, we must ask permission from the Android OS. To do this, we must paste the following code in AndroidManifest.xml outside the <application> tag. The following gist illustrates this:-
Sending requests to API end-points
To send requests to API end-points, we must do the following
1. Create an object of URL class using a string containing the URL.
2. Making a HTTP request to using this URL Object.
3. Obtaining the response from the server and displaying it to the user.
In order to implement these steps in Android, let us create a new class called ‘QueryUtils.java’ which has the following static methods:-
1. ‘createURL()’ — creates URL object from a string
2. ‘makeHTTPRequest()’ — makes HTTP request to the API end-point
3. ‘readFromStream()’ — parses the input stream (received from the server as response) into string
4. ‘fetchTutorialData()’ — driver method for the above methods.
Example Implementation of createURL()
Example Implementation of makeHTTPRequest()
Example Implementation of readFromStream()
Example Implementation of fetchTutorialData()
Note:
To register, login or logout, we need to make a POST request to the API Endpoint.
To delete all the users, we need to make a DELETE request to the API Endpoint.
The file ‘QueryUtils.java’ has the following code
Now, we must call the driver method after the user clicks any of the button button. The mainActivity.java should look like this
And Crash!!!
As soon as we run the above app, and the user touches the register button, the app crashes. No… what did we do wrong? Let’s see.
Android OS runs the app on the main thread (a.k.a the UI Thread) by default. The UI Thread handles rendering of the UI, Click Events etc. Hence, if multiple events happen at the same time, they get queued up and app can become non-responsive. That is why, we should never block the UI Thread.
Now, activities like network requests take significant time to get completed. Hence, if they are performed on the UI thread, there is a chance that the app can become non-responsive. So, android OS does not allow network requests on the UI thread. The network requests must be made on a background task.
Generally, handling multiple threads is a complex task. Android developers knew this and that’s why, they created a class called ‘AsyncTask’. It greatly simplifies the handling of multiple threads.
AsyncTask Class
It is a class that helps us in executing a task in background thread but without the overhead to manage the threads. It is not ideal for every situation. It is ideal for situation when we need threads only for one-two seconds. It is an abstract class.
So we must subclass this class and Implement the following methods
1. ‘result doInBackground()’— Executed on the background thread. Returns a result (String etc.) object containing the result of the method.
2. ‘void onPostExecute(Result result)’ — Executed on UI Thread after the background thread has finished its job.
To start execution of the background thread,
1. Instantiate the above class inside main Activity.
2. And call ‘object_name.execute()’ method
Example Implementation of AsyncTask looks like the following:-
Hence, the final code inside ‘MainActivity.java’ is
Congratulations!!!
Our app is now complete and can be used by users to interact with the API for back-end part of our web application. Congratulations. The App should work as shown in the following video
