Step by Step Guide to create an android application for an Electronic E-Commerce store with a ListView to display products with the product name, image, price, an edit box to edit the product quantity, and two image buttons to increment decrement the product quantity. Before moving ahead, the following is the demo video that we achieve at the end of this article.

Following is the project structure for the demo application. Android Studio Version: Arctic Fox | 2020.3.1 Patch 3

  • java
    • com.vlemon.listviewedittextbutton
      • Product.java – A product class.
      • ListAdapter.java – A java class for the Custom List Adapter to populate the custom ListView.
      • ListViewHolder.java – It is a custom item holder Java class for the ListView.
      • MainActivity.java – It is the main activity class.
  • res
    • layout
      • activity_custom_listview.xml – The layout file defines the arrangement for product image, title, price, quantity, and buttons for each product.
      • activity_main.xml – main activity layout.
  • mipmap-xxxhdpi : ic_minus.png, ic_plus.png, camera_1.png, camera.png, floppy.png, game_controller.png, graphics_card.png, hdmi.png, headphones.png, imac.png, ipad.png, keyboard.png, laptop.png, lcd.png, light_bulb.png, mac_mini.png, monitor.png, mouse.png, movie_camera.png, music_player.png, pc.png, playstation.png, printer.png, remote.png, smart_watch.png, smartphone.png, tablet.png, usb.png, webcam.png, windows_phone.png, zerox.png
  • values
    • colors.xml – You can change it as per your application theme.
    • strings.xml – no changes in this.
    • themes.xml – You may need to change it if you change the colors.xml file.

Follow are the steps.

Step 1: To avoid complexity, we will start with a blank project.

Step 2: Start adding the static items in your project, for example, product images, colors, strings, and themes. 

Note: We are not using any server, so all the resources are locally available within the project.

Step 3: Next, we need to create a new product item layout file with the name “activity_custom_listview.xml.” It is used in the ListView to render each product row. Later, we will create ListAdpter.java class in Step 7.

				
					<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Place Order"
            android:id="@+id/btnPlaceOrder"
            />
    </LinearLayout>

    <ListView
        android:id="@+id/customListView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Create a new class with the name Product.java. It is our product item structure with all the required information in it.

				
					package com.vlemonn.vlog.listviewedittextbutton;

public class Product {
    String ProductName;
    Double ProductPrice;
    int    ProductImage;
    int    CartQuantity=0;

    public Product(String productName, Double productPrice, int productImage) {
        ProductName = productName;
        ProductPrice = productPrice;
        ProductImage = productImage;
    }

}

Step 6: Next, we need to create a list view holder class to store the inflated view components of activity_custom_listview.xml. It is used to store each list view row. It avoids reinitializing the view components of activity_custom_listview.xml while scrolling. Please create a new class for holding our Custom ListView layout view components with the file name ListViewHolder.java

				
					package com.vlemonn.vlog.listviewedittextbutton;

import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ListViewHolder {
    TextView tvProductName ;
    ImageView ivProduct;
    TextView tvPrice;
    ImageButton btnPlus;
    EditText edTextQuantity;
    ImageButton btnMinus;
    LinearLayout llMainRow;
}

Step 7: Next, we need to create a new list view adapter class. An adapter acts as a bridge between our data sources and ListView (or UI components) to fill data into our ListView (or UI Components). Please create a new Java Class for our custom ListView Adapter ListAdapter.java.

				
					package com.vlemonn.vlog.listviewedittextbutton;

import android.content.Context;
import android.content.res.TypedArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Mayank Sanghvi on 25-11-2017.
 */

public class ListAdapter extends BaseAdapter {

    public ArrayList<Product> listProducts;
    private Context context;

    public ListAdapter(Context context,ArrayList<Product> listProducts) {
        this.context = context;
        this.listProducts = listProducts;
    }

    @Override
    public int getCount() {
        return listProducts.size();
    }

    @Override
    public Product getItem(int position) {
        return listProducts.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(final int position, View convertView
            , ViewGroup parent) {
        View row;
        final ListViewHolder listViewHolder;
        if(convertView == null)
        {
            LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = layoutInflater.inflate(R.layout.activity_custom_listview,parent,false);
            listViewHolder = new ListViewHolder();
            listViewHolder.tvProductName = row.findViewById(R.id.tvProductName);
            listViewHolder.ivProduct = row.findViewById(R.id.ivProduct);
            listViewHolder.tvPrice = row.findViewById(R.id.tvPrice);
            listViewHolder.btnPlus = row.findViewById(R.id.ib_addnew);
            listViewHolder.edTextQuantity = row.findViewById(R.id.editTextQuantity);
            listViewHolder.btnMinus = row.findViewById(R.id.ib_remove);
            row.setTag(listViewHolder);
        }
        else
        {
            row=convertView;
            listViewHolder= (ListViewHolder) row.getTag();
        }
        final Product products = getItem(position);

        listViewHolder.tvProductName.setText(products.ProductName);
        listViewHolder.ivProduct.setImageResource(products.ProductImage);
        listViewHolder.tvPrice.setText(products.ProductPrice+" $");
        listViewHolder.edTextQuantity.setText(products.CartQuantity+"");
        listViewHolder.btnPlus.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v)
            {
                updateQuantity(position,listViewHolder.edTextQuantity,1);
            }
        });
        //listViewHolder.edTextQuantity.setText("0");
        listViewHolder.btnMinus.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                updateQuantity(position,listViewHolder.edTextQuantity,-1);

            }
        });

        return row;
    }

    private void updateQuantity(int position, EditText edTextQuantity, int value) {

        Product products = getItem(position);
        if(value > 0)
        {
            products.CartQuantity = products.CartQuantity + 1;
        }
        else
        {
            if(products.CartQuantity > 0)
            {
                products.CartQuantity = products.CartQuantity - 1;
            }

        }
        edTextQuantity.setText(products.CartQuantity+"");
    }
}

Step 8: At last, we need to update our Main Activity Java Class. We need to first create some dummy data for the Products. Next, initialize our ListView and the Place Order button. Finally, we need to create a new instance of ListAdapter and assign it to our ListView. In the end, save your work and execute the project.

				
					package com.vlemonn.vlog.listviewedittextbutton;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ListAdapter listAdapter;
    ArrayList<Product> products = new ArrayList<>();
    Button btnPlaceOrder;
    ArrayList<Product> productOrders = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getProduct();
        listView = (ListView) findViewById(R.id.customListView);
        listAdapter = new ListAdapter(this,products);
        listView.setAdapter(listAdapter);
        btnPlaceOrder = (Button) findViewById(R.id.btnPlaceOrder);
        btnPlaceOrder.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                placeOrder();
            }
        });
    }

    private void placeOrder()
    {
        productOrders.clear();
        for(int i=0;i<listAdapter.listProducts.size();i++)
        {
            if(listAdapter.listProducts.get(i).CartQuantity > 0)
            {
                Product products = new Product(
                        listAdapter.listProducts.get(i).ProductName
                        ,listAdapter.listProducts.get(i).ProductPrice
                        ,listAdapter.listProducts.get(i).ProductImage
                );
                products.CartQuantity = listAdapter.listProducts.get(i).CartQuantity;
                productOrders.add(products);
            }
        }
    }

    public void getProduct() {
        products.add(new Product("Video Recorder",10.0d,R.mipmap.camera));
        products.add(new Product("Camera",11.0d,R.mipmap.camera_1));
        products.add(new Product("Floppy",12.0d,R.mipmap.floppy));
        products.add(new Product("Game Pad",13.0d,R.mipmap.game_controller));
        products.add(new Product("Graphics Card",14.0d,R.mipmap.graphics_card));
        products.add(new Product("HDMI Cable",16.0d,R.mipmap.hdmi));
        products.add(new Product("Headphones",11.0d,R.mipmap.headphones));
        products.add(new Product("I Mac",15.0d,R.mipmap.imac));
        products.add(new Product("I Pad",17.0d,R.mipmap.ipad));
        products.add(new Product("Keyboard",67.0d,R.mipmap.keyboard));
        products.add(new Product("Laptop",41.0d,R.mipmap.laptop));
        products.add(new Product("LCD",16.0d,R.mipmap.lcd));
        products.add(new Product("Light Bulb",18.0d,R.mipmap.light_bulb));
        products.add(new Product("Mac Mini",121.0d,R.mipmap.mac_mini));
        products.add(new Product("Monitor",122.0d,R.mipmap.monitor));
        products.add(new Product("Mouse",14.0d,R.mipmap.mouse));
        products.add(new Product("Movie Camera",51.0d,R.mipmap.movie_camera));
        products.add(new Product("Music Player",12.0d,R.mipmap.music_player));
        products.add(new Product("PC",16.0d,R.mipmap.pc));
        products.add(new Product("Playstation",12.0d,R.mipmap.playstation));
        products.add(new Product("Printer",17.0d,R.mipmap.printer));
        products.add(new Product("Remote",12.0d,R.mipmap.remote));
        products.add(new Product("Smart Watch",18.0d,R.mipmap.smart_watch));
        products.add(new Product("Smartphone",19.0d,R.mipmap.smartphone));
        products.add(new Product("Tablet",21.0d,R.mipmap.tablet));
        products.add(new Product("USB",87.0d,R.mipmap.usb));
        products.add(new Product("Webcam",87.0d,R.mipmap.webcam));
        products.add(new Product("Windows Phone",123.0d,R.mipmap.windows_phone));
        products.add(new Product("Zerox",85.0d,R.mipmap.zerox));
    }
}

If the application fails due to a memory issue, you may add android:largeHeap=”true” in the AndroidManifest.xml.

I hope you like this step-by-step guide. You may also like How to use the Place Order Button.

You can download the source code by visiting the following URL.