E-Commerce App Products Listing Activity UI Design in Android – Kotlin

In this article, we will learn how to show E-Commerce App Products Listing Activity UI Design in Android Studio using Kotlin. We have an enhanced ListView in Android called RecyclerView.

Using ListView is not recommended for large amounts of data. If you have a long list of custom UI components, consider using RecyclerView. RecyclerView is much more usable than ListView and is ahead of its performance in terms of performance. We’ll see how we use RecyclerView in our app.

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

Products Listing Activity Image - Handy Opinion

Activity Main XML

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

<?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

In the product class, we have the List Item and each product has Id, Title, Image, Short Description, Rating, Price.

package com.example.productlistingkotlin

class Product(
    val id: Int,
    val title: String,
    val shortdesc: String,
    val rating: Double,
    val price: Int,
    val image: Int
)

ProductAdapter

Now we have to create a ProductAdapter.kt file. To display the data of our RecyclerView, the class will extend RecyclerView.Adapter and Inside the class we have RecyclerView.ViewHolder and it represents the views of RecyclerView and the RecyclerView.Adapter represents the data shown with the ViewHoder.

package com.example.productlistingkotlin

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.lang.String


class ProductAdapter(
    //this context we will use to inflate the layout
    private val mCtx: Context,
    productList: List<Product>
) :
    RecyclerView.Adapter<ProductAdapter.ProductViewHolder>() {

    //we are storing all the products in a list
    private val productList: List<Product>
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): ProductViewHolder {
        //inflating and returning our view holder
        val inflater = LayoutInflater.from(mCtx)
        val view = inflater.inflate(R.layout.layout_products, null)
        return ProductViewHolder(view)
    }

    override fun onBindViewHolder(
        holder: ProductViewHolder,
        position: Int
    ) {
        //getting the product of the specified position
        val product: Product = productList[position]

        //binding the data with the viewholder views
        holder.textViewTitle.setText(product.title)
        holder.textViewShortDesc.setText(product.shortdesc)
        holder.textViewRating.setText(String.valueOf(product.rating))
        holder.textViewPrice.setText(String.valueOf(product.price))
        holder.imageView.setImageDrawable(mCtx.resources.getDrawable(product.image))
    }

    override fun getItemCount(): Int {
        return productList.size
    }

    inner class ProductViewHolder(itemView: View) :
        RecyclerView.ViewHolder(itemView) {
        var textViewTitle: TextView
        var textViewShortDesc: TextView
        var textViewRating: TextView
        var textViewPrice: TextView
        var imageView: ImageView

        init {
            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)
        }
    }

    //getting the context and product list with constructor
    init {
        this.productList = productList
    }
}

MainActivity 

We have to Initialize the Recyclerview and the product list. In the productList.add() we have to add some items to the list.

package com.example.productlistingkotlin

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.util.*


class MainActivity : AppCompatActivity() {
    //a list to store all the products
    var productList: MutableList<Product>? = null

    //the recyclerview
    var recyclerView: RecyclerView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //getting the recyclerview from xml
        recyclerView = findViewById<View>(R.id.recyclerView) as RecyclerView
        recyclerView!!.setHasFixedSize(true)
        recyclerView!!.layoutManager = LinearLayoutManager(this)

        //initializing the productlist
        productList = ArrayList<Product>()


        //adding some items to our list
        (productList as ArrayList<Product>).add(
                Product(
                        1,
                        "Apple iPhone 11",
                        "6.1 inches, Color black 828 x 1792 pixels",
                        4.8,
                        90000,
                        R.drawable.apple))
        (productList as ArrayList<Product>).add(
                Product(
                        1,
                        "Galaxy A12",
                        "2.3GHz, 1.8GHz CPU, multi color, 205 kg",
                        4.1,
                        55000,
                        R.drawable.samsung))
        (productList as ArrayList<Product>).add(
                Product(
                        1,
                        "Oppo F17",
                        "6.44 inch, Color Peach, 6GB RAM , 163  kg",
                        4.6,
                        47000,
                        R.drawable.oppo))

        //creating recyclerview adapter
        val adapter = ProductAdapter(this, productList as ArrayList<Product>)

        //setting adapter to recyclerview
        recyclerView!!.adapter = adapter
    }
}

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

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 Java
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: