Android Shopping Cart Tutorial Part 2

This tutorial picks up where the first Android Shopping Cart Tutorial leaves off. In this part we will modify the shopping cart to be able to handle multiple quantities of products.

The source code is now available on github.
Update - after following this tutorial, be sure to check out part 3.

Before We Begin...

Code often goes through many iterations. And we will do that with the existing shopping cart code from the first Android Shopping Cart Tutorial. In this tutorial we will update the code to handle quantities of products. We will also update the code to be even more object oriented which should make it easier to add more features in the future.

Screenshot of the ShoppingCartActivity displaying quantities

Step 1. Create a New Object - ShoppingCartEntry

In order to add more functionality to our shopping cart, we will need to create a new object. This object will be the ShoppingCartEntry object. This object will contain a reference to the product it holds, and a quantity representing the number of products.

You will be able to modify the quantity for this object, but not the product. The product must be set using the constructor. The code for this new class is listed below.

ShoppingCartEntry.java

package com.dreamdom.tutorials.shoppingcart;

public class ShoppingCartEntry {
 
 private Product mProduct;
 private int mQuantity;
 
 public ShoppingCartEntry(Product product, int quantity) {
  mProduct = product;
  mQuantity = quantity;
 }
 
 public Product getProduct() {
  return mProduct;
 }
 
 public int getQuantity() {
  return mQuantity;
 }
 
 public void setQuantity(int quantity) {
  mQuantity = quantity;
 }

}

Step 2. Modify the ShoppingCartHelper Class

Since we are now using the ShoppingCartEntry objects, we will need to modify our ShoppingCartEntry class. We want to make it easy to add, remove, and change the quantity of products.

Internally, we will change our data structure to be a map of Products mapped to ShoppingCart entries instead of just a list of products. This will make it easy to find the products we want to modify, although the downside is that the display order of the products may change.

The complete code for the modified ShoppingCartHelper is listed below.

ShoppingCartHelper.java

package com.dreamdom.tutorials.shoppingcart;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Vector;

import android.content.res.Resources;

public class ShoppingCartHelper {
 
 public static final String PRODUCT_INDEX = "PRODUCT_INDEX";
 
 private static List<Product> catalog;
 private static Map<Product, ShoppingCartEntry> cartMap = new HashMap<Product, ShoppingCartEntry>();
 
 public static List<Product> getCatalog(Resources res){
  if(catalog == null) {
   catalog = new Vector<Product>();
   catalog.add(new Product("Dead or Alive", res
     .getDrawable(R.drawable.deadoralive),
     "Dead or Alive by Tom Clancy with Grant Blackwood", 29.99));
   catalog.add(new Product("Switch", res
     .getDrawable(R.drawable.switchbook),
     "Switch by Chip Heath and Dan Heath", 24.99));
   catalog.add(new Product("Watchmen", res
     .getDrawable(R.drawable.watchmen),
     "Watchmen by Alan Moore and Dave Gibbons", 14.99));
  }
  
  return catalog;
 }
 
 public static void setQuantity(Product product, int quantity) {
  // Get the current cart entry
  ShoppingCartEntry curEntry = cartMap.get(product);
  
  // If the quantity is zero or less, remove the products
  if(quantity <= 0) {
   if(curEntry != null)
    removeProduct(product);
   return;
  }
  
  // If a current cart entry doesn't exist, create one
  if(curEntry == null) {
   curEntry = new ShoppingCartEntry(product, quantity);
   cartMap.put(product, curEntry);
   return;
  }
  
  // Update the quantity
  curEntry.setQuantity(quantity);
 }
 
 public static int getProductQuantity(Product product) {
  // Get the current cart entry
  ShoppingCartEntry curEntry = cartMap.get(product);
  
  if(curEntry != null)
   return curEntry.getQuantity();
  
  return 0;
 }
 
 public static void removeProduct(Product product) {
  cartMap.remove(product);
 }
 
 public static List<Product> getCartList() {
  List<Product> cartList = new Vector<Product>(cartMap.keySet().size());
  for(Product p : cartMap.keySet()) {
   cartList.add(p);
  }
  
  return cartList;
 }
 

}

Step 3. Modify our ProductDetails Layout

Instead of just having a button that says add to cart, lets create an EditText that contains the number of items we want to add. A screenshot of this new layout is shown below

Screenshot of the new Product Details layout.

The complete code for this modified layout is shown below.

productdetails.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="fill_parent" android:layout_width="fill_parent"
 android:background="#ffffff" android:orientation="vertical">
 <LinearLayout android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:id="@+id/LinearLayoutHeader"
  android:orientation="horizontal">
  <ImageView android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:id="@+id/ImageViewProduct"
   android:adjustViewBounds="true" android:scaleType="fitXY"
   android:src="@drawable/deadoralive" android:layout_margin="5dip"></ImageView>
  <TextView android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:id="@+id/TextViewProductTitle"
   android:layout_gravity="center" android:layout_margin="5dip"
   android:textSize="26dip" android:text="Dead or Alive"
   android:textColor="#000000"></TextView>

 </LinearLayout>


 <TextView android:layout_height="wrap_content" android:id="@+id/TextViewProductDetails"
  android:layout_width="fill_parent" android:layout_margin="5dip"
  android:layout_weight="1" android:textColor="#000000" android:text="Product description"></TextView>

 <LinearLayout android:layout_height="wrap_content"
  android:layout_width="fill_parent" android:id="@+id/linearLayoutCurrentlyInCart">
  <TextView android:id="@+id/textViewCurrentlyInCart"
   android:layout_width="wrap_content" android:layout_height="wrap_content"
   android:textSize="20dip" android:textColor="#000000" android:text="Currently in Cart:"
   android:layout_margin="5dip"></TextView>
 </LinearLayout>


 <LinearLayout android:layout_height="wrap_content"
  android:layout_width="fill_parent" android:id="@+id/linearLayoutAddLayout"
  android:orientation="horizontal" android:layout_margin="5dip">
  <TextView android:id="@+id/textView1" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:text="Quantity:"
   android:textColor="#000000"></TextView>
  <EditText android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:layout_weight="1"
   android:text="1" android:gravity="right" android:id="@+id/editTextQuantity"
   android:inputType="number"></EditText>
  <Button android:id="@+id/ButtonAddToCart"
   android:layout_gravity="right" android:layout_height="wrap_content"
   android:layout_width="wrap_content" android:text="Set Quantity"></Button>
 </LinearLayout>
</LinearLayout>

Step 4: Modify the ProductDetailsActivity

We no longer want to disable the "Add to Cart" button. So lets remove the code that does that. Listed below is code that we are removing.

// Disable the add to cart button if the item is already in the cart
if(cart.contains(selectedProduct)) {
 addToCartButton.setEnabled(false);
 addToCartButton.setText("Item in Cart");
}

Now we want to add code to handle the new features that we want to add. First, we will want to display the existing quantity of products in the shopping cart. The code to do this is listed below.

// Update the current quantity in the cart
TextView textViewCurrentQuantity = (TextView) findViewById(R.id.textViewCurrentlyInCart);
textViewCurrentQuantity.setText("Currently in Cart: "
  + ShoppingCartHelper.getProductQuantity(selectedProduct));
 

If a product is not in the shopping cart, the ShoppingCart helper will return a value of zero.

Now we want to modify how we are adding products to the shopping cart. We want to set the quantity of products to the value that the user has specified. But we can't trust  the user to have entered a valid input. We will only want to accept Integer inputs of 0 or higher.

So first, we must get a reference to the quantity EditText, next validate the input, and finally add the quantity to the shopping cart. If the input is invalid, we will inform the user of the problem by displaying a message in a toast.

The code to do this is listed below.

// Save a reference to the quantity edit text
final EditText editTextQuantity = (EditText) findViewById(R.id.editTextQuantity);

Button addToCartButton = (Button) findViewById(R.id.ButtonAddToCart);
addToCartButton.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {

  // Check to see that a valid quantity was entered
  int quantity = 0;
  try {
   quantity = Integer.parseInt(editTextQuantity.getText()
     .toString());

   if (quantity < 0) {
    Toast.makeText(getBaseContext(),
      "Please enter a quantity of 0 or higher",
      Toast.LENGTH_SHORT).show();
    return;
   }

  } catch (Exception e) {
   Toast.makeText(getBaseContext(),
     "Please enter a numeric quantity",
     Toast.LENGTH_SHORT).show();

   return;
  }

  // If we make it here, a valid quantity was entered
  ShoppingCartHelper.setQuantity(selectedProduct, quantity);

  // Close the activity
  finish();
 }
});

The complete code for the ProductDetailsActivity is shown below.

ProductDetailsActivity.java

package com.dreamdom.tutorials.shoppingcart;

import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class ProductDetailsActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  setContentView(R.layout.productdetails);

  List<Product> catalog = ShoppingCartHelper.getCatalog(getResources());

  int productIndex = getIntent().getExtras().getInt(
    ShoppingCartHelper.PRODUCT_INDEX);
  final Product selectedProduct = catalog.get(productIndex);

  // Set the proper image and text
  ImageView productImageView = (ImageView) findViewById(R.id.ImageViewProduct);
  productImageView.setImageDrawable(selectedProduct.productImage);
  TextView productTitleTextView = (TextView) findViewById(R.id.TextViewProductTitle);
  productTitleTextView.setText(selectedProduct.title);
  TextView productDetailsTextView = (TextView) findViewById(R.id.TextViewProductDetails);
  productDetailsTextView.setText(selectedProduct.description);

  // Update the current quantity in the cart
  TextView textViewCurrentQuantity = (TextView) findViewById(R.id.textViewCurrentlyInCart);
  textViewCurrentQuantity.setText("Currently in Cart: "
    + ShoppingCartHelper.getProductQuantity(selectedProduct));

  // Save a reference to the quantity edit text
  final EditText editTextQuantity = (EditText) findViewById(R.id.editTextQuantity);

  Button addToCartButton = (Button) findViewById(R.id.ButtonAddToCart);
  addToCartButton.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {

    // Check to see that a valid quantity was entered
    int quantity = 0;
    try {
     quantity = Integer.parseInt(editTextQuantity.getText()
       .toString());

     if (quantity < 0) {
      Toast.makeText(getBaseContext(),
        "Please enter a quantity of 0 or higher",
        Toast.LENGTH_SHORT).show();
      return;
     }

    } catch (Exception e) {
     Toast.makeText(getBaseContext(),
       "Please enter a numeric quantity",
       Toast.LENGTH_SHORT).show();

     return;
    }

    // If we make it here, a valid quantity was entered
    ShoppingCartHelper.setQuantity(selectedProduct, quantity);

    // Close the activity
    finish();
   }
  });

 }

}

Step 5: Modify the ProductAdapter

In the first version of this tutorial, products had checkboxes next to them so that you could select multiple products and remove them. Since our ShoppingCart now handles multiple quantities, I have decided to remove the checkboxes.

The ProductAdapter has also been modified to optionally display the current quantity of a product in your shopping cart. In the ProductCatalog Activity we will not display this quantity, but in the ShoppingCart activity we will.

The modified item.xml layout is listed below.

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="wrap_content" android:orientation="vertical"
 android:layout_width="fill_parent" android:id="@+id/LinearLayoutItem">
 <LinearLayout android:id="@+id/linearLayoutDetails"
  android:orientation="horizontal" android:layout_height="fill_parent"
  android:layout_width="fill_parent">
  <ImageView android:layout_margin="5dip" android:id="@+id/ImageViewItem"
   android:layout_height="wrap_content" android:layout_width="100dip"></ImageView>
  <TextView android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:layout_gravity="center"
   android:layout_margin="5dip" android:id="@+id/TextViewItem"
   android:textSize="26dip" android:text="Book Title" android:textColor="#000000"
   android:minLines="2" android:maxWidth="150dip"></TextView>
  <TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:layout_weight="1"></TextView>
 </LinearLayout>
 <LinearLayout android:id="@+id/linearLayoutQuantity"
  android:orientation="horizontal" android:layout_width="wrap_content"
  android:layout_margin="5dip" android:layout_height="wrap_content"
  android:layout_gravity="right">
  <TextView android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:text="Quantity:"
   android:textSize="18dip" android:textColor="#000000" android:id="@+id/textViewQuantity"></TextView>
 </LinearLayout>

</LinearLayout>

The modified code for the ProductAdapter is listed below.

package com.dreamdom.tutorials.shoppingcart;

import java.util.List;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ProductAdapter extends BaseAdapter {

 private List<Product> mProductList;
 private LayoutInflater mInflater;
 private boolean mShowQuantity;

 public ProductAdapter(List<Product> list, LayoutInflater inflater, boolean showQuantity) {
  mProductList = list;
  mInflater = inflater;
  mShowQuantity = showQuantity;
 }

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

 @Override
 public Object getItem(int position) {
  return mProductList.get(position);
 }

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

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  final ViewItem item;

  if (convertView == null) {
   convertView = mInflater.inflate(R.layout.item, null);
   item = new ViewItem();

   item.productImageView = (ImageView) convertView
     .findViewById(R.id.ImageViewItem);

   item.productTitle = (TextView) convertView
     .findViewById(R.id.TextViewItem);

   item.productQuantity = (TextView) convertView
     .findViewById(R.id.textViewQuantity);

   convertView.setTag(item);
  } else {
   item = (ViewItem) convertView.getTag();
  }

  Product curProduct = mProductList.get(position);

  item.productImageView.setImageDrawable(curProduct.productImage);
  item.productTitle.setText(curProduct.title);

  // Show the quantity in the cart or not
  if (mShowQuantity) {
   item.productQuantity.setText("Quantity: "
     + ShoppingCartHelper.getProductQuantity(curProduct));
  } else {
   // Hid the view
   item.productQuantity.setVisibility(View.GONE);
  }

  return convertView;
 }

 private class ViewItem {
  ImageView productImageView;
  TextView productTitle;
  TextView productQuantity;
 }

}

Step 6: Modify the ShoppingCart layout.

As mentioned previously, we have removed the checkboxes from the ProductAdapter. We will also remove the "Remove Items" button from the shopping cart layout as well.

Below is a screenshot of what the new shopping cart layout looks like.

Screenshot of the shopping cart layout

Listed below is the full code for the shopping cart layout.

shoppingcart.xml

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

 <TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:textColor="#000000"
  android:textSize="24dip" android:layout_margin="5dip" android:text="Shopping Cart"></TextView>
 <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dip" android:text="Click on a product to edit the quantity"></TextView>
 <ListView android:layout_height="wrap_content"
  android:layout_weight="1" android:id="@+id/ListViewCatalog"
  android:layout_width="fill_parent" android:background="#ffffff"
  android:cacheColorHint="#ffffff" android:clickable="true"
  android:choiceMode="multipleChoice">

 </ListView>
 <LinearLayout android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:orientation="horizontal"
  android:layout_margin="5dip"
  android:id="@+id/LinearLayoutCheckout" android:layout_gravity="right">
  <Button android:id="@+id/Button02" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:text="Proceed to Checkout"></Button>
 </LinearLayout>


</LinearLayout>

Step 7: Modify the ShoppingCart Activity

In this version of the shopping cart, when a user clicks on an item, it will take them to the details activity for that item. This will give users a chance to easily review items that they had placed in their cart in a familiar way before they proceed to the checkout.

From the details activity the user can adjust the quantity of the items, or remove the item by setting the quantity to zero.

Since we will be starting the ProducDetailsActivity on top of the ShoppingCartActivity we need to make sure that the ShoppingCart displays accurate information when the user returns to it. To accomplish this, we refresh the ProductAdapter in the onResume method of the ShoppingCartActivity. This is shown in the code snippet below.

@Override
protected void onResume() {
 super.onResume();
 
 // Refresh the data
 if(mProductAdapter != null) {
  mProductAdapter.notifyDataSetChanged();
 }
}

The entire code for the ShoppingCartActivity is shown below.

ShoppingCartActivity.java

package com.dreamdom.tutorials.shoppingcart;

import java.util.List;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;

public class ShoppingCartActivity extends Activity {
 
 private List<Product> mCartList;
 private ProductAdapter mProductAdapter;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.shoppingcart);
  
  
  mCartList = ShoppingCartHelper.getCartList();
  
  // Make sure to clear the selections
  for(int i=0; i<mCartList.size(); i++) {
   mCartList.get(i).selected = false;
  }
  
  // Create the list
  final ListView listViewCatalog = (ListView) findViewById(R.id.ListViewCatalog);
  mProductAdapter = new ProductAdapter(mCartList, getLayoutInflater(), true);
  listViewCatalog.setAdapter(mProductAdapter);
  
  listViewCatalog.setOnItemClickListener(new OnItemClickListener() {

   @Override
   public void onItemClick(AdapterView<?> parent, View view, int position,
     long id) {
    Intent productDetailsIntent = new Intent(getBaseContext(),ProductDetailsActivity.class);
    productDetailsIntent.putExtra(ShoppingCartHelper.PRODUCT_INDEX, position);
    startActivity(productDetailsIntent);
   }
  });
  
 }
 
 @Override
 protected void onResume() {
  super.onResume();
  
  // Refresh the data
  if(mProductAdapter != null) {
   mProductAdapter.notifyDataSetChanged();
  }
 }

}

Screenshots of the App in Action

Below are some more screenshots of the App running.

The product catalog

The ProductDetailsActivity

Final Thoughts

Please post any comments or questions on this tutorial. Hopefully in the future I will have a GitHub account set up so that you can easily download the full source for the projects.

Thanks for reading the tutorial!