Let’s Make Homepage in our eCommerce site with Android

In this tutorial, we are going to build the homepage and product page for customers in Android for our e-Commerce App.

Photo by Brooke Lark on Unsplash

application.

We are going to build this UI. The images are taken from google. And Categories data is fetch from our own back-end server.

This is the Best Products category of the app . This is below the popular categories recycler view .

Also when the user clicks on any product in the product list, it should take the user to the following page.

Product page

INTRODUCTION

Here we will build the above UI . The start shopping button takes user to all products page. The popular categories segment which shows all the popular product categories available in the app. Popular categories will be retrieved from our backend server. It is followed by the best products section which is also retrieved from our backend server. On clicking a product in the product section the app should take the user to the page belonging to that particular user.

When the user logs in , he sees the homepage first. So, it should be properly designed because lack of good UI degrades the app quality, users tend not to come back to the app.

This process can be divided into two section, first section comprising the button and background and second section with Recycler View.

We will first create an Activity called HomeActivity.java which contains the home page.

Requirements

This a basic UI & backend integration, so no complex library is required.

• Android Studio (Completely Setup with SDK)
• Android Virtual Device/Android Device
• Cloud Hosted E-Commerce Backend API
• Retrofit- to interact with the API
• Glide- to load images

Dependencies

Here we have to use the below mentioned dependencies .

Recycler View
Android Material Design
Retrofit
Gson converter
Glide

Permissions

Same as dependencies, we don’t need any extra permissions to extend the required functionality to our application.

We only need internet permissions to communicate with the REST API.

Designing the UI

Here we can see that there are some texts describing the app and a button. We can put two text views and a material button (Material Design component ) to achieve our task.

Talking about the second part there we first have a textview and then one recycler view for the categories section. It is followed by the recycler view for best products section . I have added a divider between categories recycler view and best products textview. The code for that section is given below.

Here we are having a listitem which contains the layout for the items in the recycler view. We are using the same UI for both the popular categories and best products. The code is given below.

Now, we will make the layout for the single product Activity. This activity contains the product details such as product image, name, category,price,description and a list of features.

For showing the list of features we are using a recycler view , and the contents of that recycler view is shown in the following layout .

Here in the HomeProductAdapter.java class we have added an OnClickListener because we will need this click action in the future. With this OnClickListener we can find particular products or categories which we will build in the later part of the tutorial.

Finally we need to create an interface which will get triggered on clicking a product.

Now we will work on the API integration with Retrofit.

For that we first have to import the retrofit dependency which can be found here. Also Gson converter is required. It can also be found here. We will do the integration step by step.

Creating the Model

We have to create a model which can be used to consume the backend API for Categories. The backend API returns a list of Category type. So we have to wrap the Category object in a list so that all the category list can be retrieved. The Category object has multiple fields id,categoryName,description,imageUrl and a list of products which belong to that category. We are having respective getters and setters for all the variables so that data can accessed from outside.

We also need to make a Product object .

This product POJO contains id,name,imageURL,price,categoryId and description. All these fields are added in the class .

Now we will setup the Retrofit for our use.

This class sets up Retrofit for us. Here we put the BASE_URL for our backend. Then we build a retrofit object and we pass GsonConverterFactory .

We define all our api paths in the API.java class .

Finally , we call the api to retrieve data from the backend server, and put that data in the RecyclerViewAdapter class.

The above code in HomeActivity calls the REST API and data is put into the RecyclerView. The code for the product purchase activity is given below. It takes the product details through the intent and displays them in the activity.

Running the Application

Now, we can run this application . We can use Android Virtual device or any Android device to test the app. The tutorial is complete here.

The complete code can be found here.