webtutsplus official
Let’s Add Products in Android for E-Commerce App

Let’s Add Products in Android for E-Commerce App

webtutsplus tutorials's photo
webtutsplus tutorials
·

13 min read

We are heading towards creating an Android Application for the Products Backend API, made for our E-Commerce app

**Listing the products**Listing the products

Contents of this Tutorial

Introduction Requirements Database Design API Design Project Creation Dependencies Permissions Connecting the API Creating Activities The Main Page List Products Add Product Update Product Running the Application Resources

Introduction

In this tutorial series, we are building an e-commerce platform for all users. As a continuation of the previous tutorials, we are gonna build an android application to manage the products in our platform. Let’s develop an Ecommerce Application from Scratch using Java and Spring We are going to build an e-commerce application from scratch using Java, Spring backend, build web UI in Vue.js, and…medium.com

Using this application, we can see the products, add a product or update a product. Therefore, this tutorial is primarily composed of the following sections —

  • List Products

  • Add Product

  • Update Product

Requirements

  • Android Studio (Completely Setup with SDK)

  • Android Virtual Device

  • Cloud Hosted E-Commerce Backend API

  • Retrofit

  • Glide

Steps to set up your work environment in Android Studio can be found here.

Database Design

This is a sample JSON of a product, we will link it to a category and add other fields in later tutorials.

Each product has a unique ID, name, image URL, price, description. We can model it in Springboot as

API Design

In the real-world, we need to see the products, create new products, and update the products. So we will create 3 APIs. Later we will create many other real-world features like deleting, stocks, linking to categories, and adding tags. After this, we will create the UI.

Swagger listing of APIsSwagger listing of APIs

You can find the backend code in this branch.

Project Creation

After completing the IDE setup,

  1. Open Android Studio

  2. Click on New Project

  3. Select empty activity

  4. Select Java for Language

  5. Select Android SDK such that our app runs on all devices

  6. Click on finish

  7. Wait until all the gradle scripts get downloaded.

We can start working on our project at once the build is successful. The project basically comes with the Main Activity from which our application starts, and the layout for the same called activity_main.xml, where we define its User Interface (UI)

Dependencies

To build our application successfully, we need the following dependencies

Recycler View Card View Retrofit Gson converter Glide

Copy-paste the dependencies given in the below blocks in the app level gradle file and click sync now on the top right corner of the IDE to get all the dependencies.

Recycler View makes it easy to efficiently display large sets of data. We supply the data and define how each item looks, and the Recycler View library dynamically creates the elements when they’re needed. As the name implies, Recycler View recycles those individual elements.

implementation ‘androidx.recyclerview:recyclerview:1.1.0’

Card View is gonna act as the basic building block element for our Recycler View. The Card View contents will be decided by us and the same block of elements will be repeating in our Recycler View.

implementation 'androidx.cardview:cardview:1.0.0'

Retrofit is the REST API client that can send requests and receive response from our RESTful service. Gson converter is used to send and receive data as JSON (JavaScript Object Notation).

implementation 'com.squareup.retrofit2:retrofit:2.4.0'

implementation 'com.squareup.retrofit2:converter-gson:2.4.0'

With Glide, you can load and display media from many different sources, such as remote servers or the local file system. This dependency is to display the image of a product with its URL.

implementation 'com.github.bumptech.glide:glide:4.11.0'

annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

Now we have added all the required dependencies for the product.

Permissions

Obviously, to perform operations using a remote REST API, we need internet permission. All the needed permissions are defined in the app/src/main/AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

And also, android security policy restricts the application to interact with a REST API that runs on an HTTP protocol. As our backend runs on an HTTP protocol, we need to fix this by adding a special attribute to the application tag in the AndroidManifest.xml file. That special attribute is as below -

android:allowBackup="true"

You can skip this special attribute adding step if your backend runs on HTTPS protocol. After giving all the permissions, our app/src/main/AndroidManifest.xml file looks as below-

Let’s move into the coding section!

Connecting the API

We will be using Retrofit to connect to our REST API. For performing the same, follow the instructions below-

  1. Create a model class Product, whose objects we are going to send and receive through the API. It contains the following fields: *Id — Name — ImageURL — Price — Description.*
  1. Create an interface API.java, that helps us to make GET and POST requests to add, update, and fetch products in REST API and receive responses as mentioned.
  1. Create a singleton class for the Retrofit Client to communicate with the API service all along the application.

Hurray! We are all set to communicate with the Backend API service!

Creating Activities

We all know that activities are the basic building blocks of the application. An activity consists of a layout file and a java class to control the same.

We are provided with the pre-built activity called Main Activity. Therefore, we need three more activities to list the products, add a product and update a product respectively. Go ahead and create the following activities by following the steps: Right click on the MainActivity residing package -> New -> Activity -> Empty Activity

ListProducts Activity AddProduct Activity UpdateProduct Activity

The Main Page

The front page (app/src/main/res/layout/activity_main.xml) of the application contains three buttons to navigate to list products, add products, and update products.

OnClick Listeners are set to the buttons respectively in the MainActivity.java file, through which the application is navigated to the respective sections.

List Products

In this section, we need to fetch all the products from the REST API, make a card view template, create a recycler view and dynamically add card view contents with the response from API and display the recycler view.

  1. Add a recycler view to the app/src/main/res/layout/activity_list_products.xml layout file

  1. In our case, we are going to use Card View as the basic element for our recycler view. So, create a layout file called product_item.xml in the same location to design our card view. The contents of the card view element are as below -

  2. An image view to display the product’s image

  3. Four text views to display the product data

  4. A relative layout to bind them all together

  1. Now, we have the required layouts. We need to set the recycler view by binding the card views to the adapter. To do so, we are creating a class called ProductAdapter and an inner class inside the same called ProductViewHolder, which takes a list of products and binds each one of them with a card view. The bound card views are further bound to the recycler view by the adapter class.

  2. Each product’s Id, Name, Price, and Description are added to the respective text views in the card view.

  3. The image from the product’s image URL is fetched and fitted to the image view in the card view by the Glide tool.

  1. Go to the ListProductsActivity.java file. We have to fetch all the products from API with the help of the retrofit object, by making a **GET request**. The fetched products are stored in a List.

  2. The recycler view is now built using the product adapter bypassing the fetched List of products.

Woohoo! We have listed the products in a recycler view successfully!

Add Product

  1. Create five edit text views to the layout file of AddProduct Activity (app/src/main/res/layout/activity_add_product.xml) to get the product details to add. Also add a button to submit the data.

  1. Our UI is ready now. Go to the AddProductActivity class and add onClick listener to the button to add product.

  2. In the on click listener, use the retrofit client to send the product object created using the data provided by the user

  3. Notify the user if the product is added.

And yes! We can add any number of products using our application!

Update Product

  1. Create five edit text views to the layout file of UpdateProduct Activity (app/src/main/res/layout/activity_update_product.xml) to get the product details to update. Also add a button to submit the data.

  1. Our UI is ready now. Go to the UpdateProductActivity class and add on click listener to the button to update the product.

  2. In the on click listener, use the retrofit client to send the product object created using the data provided by the user.

  3. Notify the user if the product is updated.

Wow! We can update any number of products in the backend using our application!

Running the Application

Now, it’s time for running the application, after adding the required functionalities. Select the required Android Virtual Device from the toolbar and click on the run button on the same(Green triangle icon)

After a certain amount of time, your android virtual device will get the application installed and opened. You can completely use it now!

The demo of our application is as follows —

**Listing the products**Listing the products

**Adding a product**Adding a product

**Updating a product**Updating a product

Resources

  1. Bitbucket link for Spring Backend Project Repository

  2. Bitbucket link for Android Application Project Repository

  3. Spring Backend Swagger UI hosted on cloud

  4. REST API of our Spring Backend

  5. Tutorial for the creating Spring Backend API

  6. Steps to install and set up Android Studio

Yahoo! That’s it! Hope you have learned many things from this tutorial. The journey has not yet completed! Keep following us for such awesome series of tutorials.

Happy Learning!