E-Commerce App Products Listing Activity UI Design in Android Studio – XML & Java

In this article, we will learn how to develop a E-Commerce App Products Listing Activity UI Design in Android Studio using Java. RecyclerView is much more usable than ListView and is ahead of its performance in terms of performance. In our application, we’ll see how to use RecyclerView.

At the end of this tutorial, you will see the following screen will be designed.

Products Listing Activity in Android - Handy Opinion

Creating RecyclerView Layouts

Now we have to create a Recycler View inside activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Layout Products XML

So to create the layout, just create a new layout file named layout_products.xml. It is not mandatory to use a CardView. A CardView only gives you a nice look.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="120dp"
                android:layout_height="90dp"
                android:padding="4dp" />

            <TextView
                android:id="@+id/textViewTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@id/imageView"
                android:text="Apple MacBook Air Core i5 5th Gen - (8 GB/128 GB SSD/Mac OS Sierra)"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/textViewShortDesc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textViewTitle"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:layout_toRightOf="@id/imageView"
                android:text="13.3 Inch, 256 GB"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />

            <TextView
                android:id="@+id/textViewRating"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textViewShortDesc"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:layout_toRightOf="@id/imageView"
                android:background="@color/teal_700"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:text="4.7"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small.Inverse"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textViewPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textViewRating"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:layout_toRightOf="@id/imageView"
                android:text="PKR 56990"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                android:textStyle="bold" />

        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Model Class Product

We have multiple data members for our list items, so they can’t be stored in a string array and we need a class to store all of the attributes we have for the items on our list. We will use the product class as a list item, each product has Id, Title, Image, Short Description, Rating, Price.

package com.example.productlistingjava;


public class Product {
    private int id;
    private String title;
    private String shortdesc;
    private double rating;
    private double price;
    private int image;

    public Product(int id, String title, String shortdesc, double rating, double price, int image) {
        this.id = id;
        this.title = title;
        this.shortdesc = shortdesc;
        this.rating = rating;
        this.price = price;
        this.image = image;
    }

    public int getId() {
        return id;
    }

    public String getTitle() {
        return title;
    }

    public String getShortdesc() {
        return shortdesc;
    }

    public double getRating() {
        return rating;
    }

    public double getPrice() {
        return price;
    }

    public int getImage() {
        return image;
    }
}

ProductAdapter

To display the data of RecyclerView we need a class that extends RecyclerView.Adapter. Inside this class, we need RecyclerView.ViewHolder and represents the views of our RecyclerView and RecyclerView.Adapter represents the data that is to be shown with the ViewHoder.
We have three methods inside RecyclerView.Adapter that we need to override. RecyclerView.ViewHolder onCreateViewHolder this method returns a new instance of our ViewHolder.

onBindViewHolder this method binds the data to the view holder. getItemCount() this returns the size of the List.

package com.example.productlistingjava;


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;


import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.ProductViewHolder> {


    //this context we will use to inflate the layout
    private Context mCtx;

    //we are storing all the products in a list
    private List<Product> productList;

    //getting the context and product list with constructor
    public ProductAdapter(Context mCtx, List<Product> productList) {
        this.mCtx = mCtx;
        this.productList = productList;
    }

    @Override
    public ProductViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //inflating and returning our view holder
        LayoutInflater inflater = LayoutInflater.from(mCtx);
        View view = inflater.inflate(R.layout.layout_products, null);
        return new ProductViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ProductViewHolder holder, int position) {
        //getting the product of the specified position
        Product product = productList.get(position);

        //binding the data with the viewholder views
        holder.textViewTitle.setText(product.getTitle());
        holder.textViewShortDesc.setText(product.getShortdesc());
        holder.textViewRating.setText(String.valueOf(product.getRating()));
        holder.textViewPrice.setText(String.valueOf(product.getPrice()));

        holder.imageView.setImageDrawable(mCtx.getResources().getDrawable(product.getImage()));

    }


    @Override
    public int getItemCount() {
        return productList.size();
    }


    class ProductViewHolder extends RecyclerView.ViewHolder {

        TextView textViewTitle, textViewShortDesc, textViewRating, textViewPrice;
        ImageView imageView;

        public ProductViewHolder(View itemView) {
            super(itemView);

            textViewTitle = itemView.findViewById(R.id.textViewTitle);
            textViewShortDesc = itemView.findViewById(R.id.textViewShortDesc);
            textViewRating = itemView.findViewById(R.id.textViewRating);
            textViewPrice = itemView.findViewById(R.id.textViewPrice);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

MainActivity

Copy and Paste the following code inside the MainActivity.kt file. First, we have to Initialize the Recyclerview and the productlist. In the productList.add() adding some items to our list and after that create the Recycler view adapter.

package com.example.productlistingjava;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    //a list to store all the products
    List<Product> productList;

    //the recyclerview
    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //getting the recyclerview from xml
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        //initializing the productlist
        productList = new ArrayList<>();


        //adding some items to our list
        productList.add(
                new Product(
                        1,
                        "Apple iPhone 11",
                        "6.1 inches, Color black 828 x 1792 pixels",
                        4.8,
                        90000,
                        R.drawable.apple));

        productList.add(
                new Product(
                        1,
                        "Galaxy A12",
                        "2.3GHz, 1.8GHz CPU, multi color, 205 kg",
                        4.1,
                        55000,
                        R.drawable.samsung));

        productList.add(
                new Product(
                        1,
                        "Oppo F17",
                        "6.44 inch, Color Peach, 6GB RAM , 163  kg",
                        4.3,
                        60000,
                        R.drawable.oppo));

        //creating recyclerview adapter
        ProductAdapter adapter = new ProductAdapter(this, productList);

        //setting adapter to recyclerview
        recyclerView.setAdapter(adapter);
    }
}

In this tutorial, we learn how to show E-Commerce App Products Listing Activity UI Design in Android Studio using Java.

If you have any questions or suggestions, feel free to ask in the comments section below.

Next Article

1. Products Listing Activity in Android Studio using Kotlin
2. How to Load Multiple Images From URL in Android Using Picasso Kotlin
3. How to Save And Retrieve Class Object From Shared Preferences Using Gson Library in Kotlin Android Studio

Please share this post:
Posts created 35

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: