Android Shopping Cart Tutorial

In this tutorial you will learn how to create a simple app that features several products which can be placed in a shopping cart. You can then view the contents of the shopping cart and remove items that you no longer want.


Update - after following this tutorial, be sure to check out part 2 and also check out part 3.


Creating a Shopping Cart for Android

A common problem that arises when developing Android applications is figuring out how to pass information from Activity to Activity within the Android application. This problem can be solved in two ways. For passing small amounts of information, you can put extras in the Intent that gets passed along to create the activity. For managing a larger, more complex amount of information the use of static variables is recommended.

Through this tutorial we will create a simple shopping cart. At the end of the tutorial, there are several suggestions for improving the shopping cart. Some of these suggestions may be included in a future tutorial.

Screenshot of the finished Shopping Cart

Listed in the graphic below is an outline of how the activities and layouts are connected together. This tutorial will feature three different activities and several different layouts. The layout files are the xml files listed in blue.

The product adapter class is used in both the CatalogActivity and the ShoppingCartActivity to adapt data for the list views.

Activites and Layouts of the Shopping Cart

Step 1. Create the layouts for the app.

This shopping cart tutorial will involve several different layouts.

• Catalog
• Product Details
• Shopping Cart

When the app starts, you will be immediately presented with the Catalog layout. From the catalog layout you can click on a product to view more details about it, and from there, you can add the product to your cart.

After adding the product to your cart, you will be taken back to the Catalog, where you can view details for other products or proceed to view your shopping cart.

The Shopping Cart layout will include the option to remove items from your cart, and to "Proceed to Checkout."

Since this is an advanced tutorial, we will not focus on the details of creating these layouts. A more detailed tutorial on creating layouts can be found here.

catalog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="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="Product Catalog"></TextView>
 <ListView android:layout_height="wrap_content"
  android:layout_weight="1" android:id="@+id/ListViewCatalog"
  android:layout_width="fill_parent" android:background="#ffffff"
  android:clickable="true" android:cacheColorHint="#ffffff">
 </ListView>
 <Button android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:layout_margin="5dip"
  android:layout_gravity="right" android:id="@+id/ButtonViewCart"
  android:text="View Shopping Cart"></Button>
</LinearLayout>

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>
 <Button android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:layout_margin="5dip"
  android:layout_gravity="right" android:id="@+id/ButtonAddToCart"
  android:text="Add to Cart"></Button>
</LinearLayout>

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>
 <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:id="@+id/LinearLayout01"
  android:layout_width="wrap_content" android:layout_height="wrap_content"
  android:orientation="horizontal" android:layout_gravity="right"
  android:layout_margin="5dip">
  <Button android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:id="@+id/ButtonRemoveFromCart"
   android:text="Remove from Cart"></Button>
  <Button android:id="@+id/Button02" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:text="Proceed to Checkout"></Button>
 </LinearLayout>


</LinearLayout>

Step 2. Create the Product Class

Everything in this app revolves around the product class. The product class does not contain any of its own methods and really is just more of a container for other objects that describe the product including a title, an image, and a description.

package com.dreamdom.tutorials.shoppingcart;

import android.graphics.drawable.Drawable;

public class Product {

 public String title;
 public Drawable productImage;
 public String description;
 public double price;
 public boolean selected;

 public Product(String title, Drawable productImage, String description,
   double price) {
  this.title = title;
  this.productImage = productImage;
  this.description = description;
  this.price = price;
 }

}

Step 3. Create the ShoppingCartHelper class

The ShoppingCartHelper class is designed to hold information about all the products in the catalog, and all the products that are in the user's shopping cart.

In this tutorial, our catalog is hard coded in, so the list of products, images, and descriptions will always be the same. This could be fine for your app if you sell a very limited number of items, don't run into inventory issues and don't need to frequently update your catalog.

In this example, lets say that we are selling books. I took some pictures of a couple books laying around that we can use in this tutorial.

Switch by Chip Heath and Dan Heath

Dead or Alive by Tom Clancy with Grant Blackwood

Watchmen by Alan Moore and Dave Gibbons

Make sure to download these images, and place them in your drawable folder. Make sure not to name the image of the book "switch" "switch.png" This is because the name is used in the generated class R, and switch is a java keyword.

For a more advanced shopping cart, you may wish to download an xml file containing catalog information, and parse out the xml information to dynamically update the catalog when the user runs the application.

ShoppingCartHelper.java

package com.dreamdom.tutorials.shoppingcart;

import java.util.List;
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 List<Product> cart;
 
 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 List<Product> getCart() {
  if(cart == null) {
   cart = new Vector<Product>();
  }
  
  return cart;
 }

}

By using static variables and static methods in the ShoppingCartHelper Class we allow any activity to access this catalog and shopping cart data, allowing us to easily and seamlessly access the same data in different activities in out application.

Step 4. Create the Item Layout

The Item layout represents how one product will be displayed in a list view in both the Catalog and Shopping Cart activities. It will show a thumbnail of the product, a title for the product, and optionally a checkbox.

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="horizontal"
 android:layout_width="fill_parent" android:id="@+id/LinearLayoutItem">
 <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>
 <CheckBox android:layout_height="wrap_content"
  android:layout_margin="5dip" android:id="@+id/CheckBoxSelected"
  android:focusable="false" android:clickable="false"
  android:layout_gravity="center" android:layout_width="wrap_content"></CheckBox>
</LinearLayout>

Step 5. Create the ProductAdapter class

The ProductAdapter class is designed to be attached to a listview, and populate the data for the different products that will be in a list view. It uses the Item layout to populate the data in the list view.

The constructor for the ProductAdapter class also takes a boolean to determine if you want the checkbox to appear in the list or not. We only want the checkbox to appear in the Shopping Cart activity, so you can select multiple items in your cart and remove them if you wish.

Creating Adapters and using ListViews can be somewhat confusing, and I am definitely planning on doing a full detailed tutorial on that in the future.

ProductAdapter.java

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.CheckBox;
import android.widget.ImageView;
import android.widget.TextView;

public class ProductAdapter extends BaseAdapter {
 
 private List<Product> mProductList;
 private LayoutInflater mInflater;
 private boolean mShowCheckbox;
 
 public ProductAdapter(List<Product> list, LayoutInflater inflater, boolean showCheckbox) {
  mProductList = list;
  mInflater = inflater;
  mShowCheckbox = showCheckbox;
 }

 @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.productCheckbox = (CheckBox) convertView.findViewById(R.id.CheckBoxSelected);
   
   convertView.setTag(item);
  } else {
   item = (ViewItem) convertView.getTag();
  }
  
  Product curProduct = mProductList.get(position);
  
  item.productImageView.setImageDrawable(curProduct.productImage);
  item.productTitle.setText(curProduct.title);
  
  if(!mShowCheckbox) {
   item.productCheckbox.setVisibility(View.GONE);
  } else {
   if(curProduct.selected == true)
    item.productCheckbox.setChecked(true);
   else
    item.productCheckbox.setChecked(false);
  }
  
  
  return convertView;
 }
 
 
 private class ViewItem {
  ImageView productImageView;
  TextView productTitle;
  CheckBox productCheckbox;
 }

}

Step 6. Create the CatalogActivity

In this step we will look at several snippets of code individually. Don't worry about where to add them to your project--the complete CatalogActivity.java file is listed at the end of the step.

The Catalog Activity will display all the available products from the catalog. The Catalog Activity uses the ShoppingCartHelper to accomplish this.

This snippet demonstrates how to get a reference to the catalog of items.

// Obtain a reference to the product catalog
mProductList = ShoppingCartHelper.getCatalog(getResources());

When you click on an item in the catalog activity, we want it to take you to the ProductDetails Activity.

The ProductDetails Activity will be designed to be a generalized activity that can display information about any product. Since it is designed in this manner, it needs a way to figure out what product it should display details about. This is accomplished by passing along extras with the Intent that starts the activity.

Use Intent.putExtra to pass simple information between activities. In this case we will pass the index of the selected product.

Intent productDetailsIntent = new Intent(getBaseContext(),ProductDetailsActivity.class);
productDetailsIntent.putExtra(ShoppingCartHelper.PRODUCT_INDEX, position);
startActivity(productDetailsIntent);

Listed below is the full source for the Catalog Activity.

CatalogActivity.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.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;

public class CatalogActivity extends Activity {

 private List<Product> mProductList;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.catalog);

  // Obtain a reference to the product catalog
  mProductList = ShoppingCartHelper.getCatalog(getResources());
  
  // Create the list
  ListView listViewCatalog = (ListView) findViewById(R.id.ListViewCatalog);
  listViewCatalog.setAdapter(new ProductAdapter(mProductList, getLayoutInflater(), false));
  
  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);
   }
  });
  
  Button viewShoppingCart = (Button) findViewById(R.id.ButtonViewCart);
  viewShoppingCart.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    Intent viewShoppingCartIntent = new Intent(getBaseContext(), ShoppingCartActivity.class);
    startActivity(viewShoppingCartIntent);
   }
  });

 }
}

Step 7. Create the ProductDetails Activity

In the product details activity we will get the intent that started the activity, and extra the "extra" information that was passed along with the Intent to determine what product to display details about.

This is how to extract the extra information out of the Intent.

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

Warning!

For the sake of keeping this tutorial more straightforward and not 100 pages long we are not doing error checking in this step. In reality, a well designed program should handle cases where getExtras returns null, or when trying to get a specifically named extra returns null. In these situations a well designed app should fail gracefully. It is not always safe to assume that the Intent extras will be present.

The full source for the ProductDetails Activity is listed 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.ImageView;
import android.widget.TextView;

public class ProductDetailsActivity extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  
  super.onCreate(savedInstanceState);
  setContentView(R.layout.productdetails);
  
  List<Product> catalog = ShoppingCartHelper.getCatalog(getResources());
  final List<Product> cart = ShoppingCartHelper.getCart();
  
  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);
  
  Button addToCartButton = (Button) findViewById(R.id.ButtonAddToCart);
  addToCartButton.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    
    
    cart.add(selectedProduct);
    finish();
   }
  });
  
  // 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");
  }
 }
 
}

Screenshot of what the product details activity looks like in the final product.

Step 8. Finally, create the ShoppingCart Activity

Some code snippets are highlighted below. The full source for the ShoppingCartActivity.java is listed at the end of the step.

The shopping cart activity will display all the items in the user's shopping cart. It will also display checkboxes next to the items, allowing the user to select multiple items at once and remove the items from the shopping cart if they so desire.

Just like the other activities, the ShoppingCartActivity uses the ShoppingCartHelper class to update the shopping cart

mCartList = ShoppingCartHelper.getCart();

The product flag includes a "selected" boolean that we use to determine whether a checkbox should be selected in the shopping cart or not.

The code snippet below will run when the shopping cart activity first starts, and is designed to make sure none of the items are checked.

// Make sure to clear the selections
for(int i=0; i<mCartList.size(); i++) {
 mCartList.get(i).selected = false;
}

When the "Remove from Cart" button is pressed, all the checked items will be removed from the cart.

Button removeButton = (Button) findViewById(R.id.ButtonRemoveFromCart);
removeButton.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View v) {
  // Loop through and remove all the products that are selected
  // Loop backwards so that the remove works correctly
  for(int i=mCartList.size()-1; i>=0; i--) {
   
   if(mCartList.get(i).selected) {
    mCartList.remove(i);
   }
  }
  mProductAdapter.notifyDataSetChanged();
 }
});

Our layout also includes a "Proceed to Checkout" button that could have functionality added to interact with an API to process credit card transactions.

The full code for the ShoppingCartActivity is listed below.

ShoppingCartActivity.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.AdapterView;
import android.widget.Button;
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.getCart();
  
  // 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) {
    
    Product selectedProduct = mCartList.get(position);
    if(selectedProduct.selected == true)
     selectedProduct.selected = false;
    else
     selectedProduct.selected = true;
    
    mProductAdapter.notifyDataSetInvalidated();
    
   }
  });
  
  Button removeButton = (Button) findViewById(R.id.ButtonRemoveFromCart);
  removeButton.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    // Loop through and remove all the products that are selected
    // Loop backwards so that the remove works correctly
    for(int i=mCartList.size()-1; i>=0; i--) {
     
     if(mCartList.get(i).selected) {
      mCartList.remove(i);
     }
    }
    mProductAdapter.notifyDataSetChanged();
   }
  });
  
 }

}

Try Out the App
 

Remember to update the application manifest before running the app.
 
Once you get the app working, try going between the activities and adding items to the shopping cart, and removing them. If you have any questions or problems feel free to ask in the comments section of this post.

Another screenshot of the finished app

Some Things to Think About

This tutorial represents an introduction to creating a shopping cart for Android. There are a number of ways that this application could be improved

• Include options to display user reviews
• Include option to handle quantities other than one
• Add more items to the catalog
• Dynamically download catalog information
• Persist shopping cart data

Some more information on that last point. In this tutorial the ShoppingCartHelper will dynamically recreate the catalog if it is null, and dynamically recreate the ShoppingCart if it is null. However, if a user adds items to the shopping cart, exits the program, or the program is killed by the Android OS, when the program starts again the cart will be empty. It is generally a good practice to try to save user information, such as items in the shopping cart, since the Android OS has the ability to kill processes in order to free up memory for other processes.

Concluding Notes

Remember, when you are designing a program that there are often many different ways to approach and solve the problem. There isn't always a right answer, but some approaches may be faster or more flexible. This tutorial probably doesn't include everything you want or need in a shopping cart, but use it as a starting point for creating one suited to your needs.

This tutorial was originally requested by a blog reader. If you questions of your own, or a request for a tutorial, don't hesitate to comment and ask!

Update - after following this tutorial, be sure to check out part 2.

------------------------------------------------------------

We create these tutorials in our free time. If you like what you see please consider buying us a cup of coffee so we can keep creating useful material. Click on the image below to make a donation via Paypal.