We are going to create an android UI for our UserProfile backend API we are creating for our demo E-commerce tutorial
We are building an e-commerce platform from scratch. In the last tutorial, we build the backend for the User Profile.
In this article, we will build the android UI for the User Profile backend, which can be a base for many other applications.
Not long before was the time when the user profile consisted of a hard copy form. From the advent of digital technology and sophisticated software, profiles have been becoming more intuitive.
Here we describe the most important component of our user profile application: the REST API. A REST API is an application that uses the existing protocol stack for data communication between different applications on the web. Here, we are using a web API to communicate between our android application and a remote database for user data storage. Our API handles the GET and POST request which basically allows the android application to create and fetch data from the database.
The API used here is created using Java and Spring Boot framework. Spring is a popular application development framework, developed for the enterprise edition of the Java programming language. You can find detailed project files for the REST API over here.
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:
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 on the development aspect while the back-end of this IDE handles the requirements and dependencies. For this project, an existing API endpoint has been used for database connectivity.
Before we start developing, we need to check off a few requirements:
Once you install Android Studio on your system, you can start with creating a new project.
Android Studio Welcome Screen
To create your new Android project, follow these steps:
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.userprofile > 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 smartphone, and enable USB debugging by following the instructions over here. After, enabling USB debugging, connect your smartphone 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 application.
Let’s 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.
Image. (filename: background.jpg)Icon elements. (filenames: account.xml, email.xml, pencil.xml)Custom graphic file. (round_button.xml)
The image used here is for the background of the UI. 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 two layout files for our two pages: create user and fetch user data page. These files are contained in app > res > layout having names activity_main.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 the 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. Let’s review them one by one for a general idea.
Rows and Columns in TableLayout Android
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 Config.java and User.java.
To create them, right-click on app > java > com.example.userprofile 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.
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 stages in their life-cycle. The Activity class provides several 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 lifecycle 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 lifecycle callbacks can help ensure that your app avoids:
Activity Life Cycle
We have extensively use the onCreate() activity method which defines the behavior of the application on start-up.
For the first file, MainActivity.java:
Let’s go through the methods defined in this code snippet-
create(): This method is at the heart of profile creation 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 and send the HTTP POST request. Here, we have provided the existing API endpoint. Also, this method will be handling failed requests and other errors while successfully creating a user profile.user(): This method starts a new activity called user. There we can view the existing user profiles in the database.
Next, we have the User.java file:
Let’s go through the methods defined in this code snippet-
Finally, we have the Config.java file:
This file is a java interface file that stores the API endpoint.
Now we will run our program as previously stated by connecting our android device via USB.
Read behind a paywall at https://medium.com/technology-hits/android-ui-for-e-commerce-user-profile-backend-4053ab122a13
Create your free account to unlock your custom reading experience.