Android Shopping Cart Tutorial Part 3

In this part of the Android Shopping Cart Tutorial we will add prices, and calculate the total price for the purchase.


This tutorial is part of a series about building an android based shopping cart, and will build off of existing code and concepts discussed in Android Shopping Cart Tutorial and Android Shopping Cart Tutorial Part 2.

Step 1. Prices for Products

In our previous tutorials we learned how to display different products, add them to the cart, and even change the quantity of those products. Now we must add another crucial component, the price.

If you look back at the previous tutorials, our Product object already contains price information, and our initial catalog is setting prices--these prices simply are not being displayed in the app anywhere.



Step 2. Modify the productdetails.xml Layout

In theory, we could append the price to the product description, but we may want it to stand out a little more. To help accomplish this, we will add a separate view to the layout to put the pricing information.

Listed below is the layout xml for the view we will add.

<TextView android:layout_height="wrap_content" android:id="@+id/TextViewProductPrice"
 android:layout_width="fill_parent" android:layout_margin="5dip"
 android:textColor="#000000" android:text="Product Price" android:textStyle="bold"></TextView>

Listed below is the complete source for the productdetails.xml file

The complete code for the ProductDetialsActivity.java is listed below:

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);
  
  TextView productPriceTextView = (TextView) findViewById(R.id.TextViewProductPrice);
  productPriceTextView.setText("$" + selectedProduct.price);

  // 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 4. Add a "Total Price" Text View to shoppingcart.xml

Similar to how we modified the ProductDetails.xml layout to include a view for displaying the price, we want to modify the shoppingcart.xml layout to include a view to display the total price.

Listed below is the layout xml for the view we will add:

<TextView android:layout_height="wrap_content" android:id="@+id/TextViewSubtotal"
android:layout_width="fill_parent" android:layout_margin="5dip"
android:textColor="#000000" android:text="Subtotal" android:textStyle="bold"></TextView>

And listed below is the full code for 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>
  <TextView android:layout_height="wrap_content" android:id="@+id/TextViewSubtotal"
  android:layout_width="fill_parent" android:layout_margin="5dip"
  android:textColor="#000000" android:text="Subtotal" android:textStyle="bold"></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 5. Calculate and Display the Total Price in the ShoppingCartActivity file

Now, when the activity loads we will loop through all the items in the cart, add together the prices, and then display this sum as the Total Price.

We will do this in the onResume call, since it is possible to change product quantities in the shopping cart after this activity has been created.

Listed below is the code to add to calculate the subtotal:

double subTotal = 0;
for(Product p : mCartList) {
 int quantity = ShoppingCartHelper.getProductQuantity(p);
 subTotal += p.price * quantity;
}

TextView productPriceTextView = (TextView) findViewById(R.id.TextViewSubtotal);
productPriceTextView.setText("Subtotal: $" + subTotal);

And listed below is the full code for the ShoppingCartActivity file:

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.TextView;
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();
  }
  
  double subTotal = 0;
  for(Product p : mCartList) {
   int quantity = ShoppingCartHelper.getProductQuantity(p);
   subTotal += p.price * quantity;
  }
  
  TextView productPriceTextView = (TextView) findViewById(R.id.TextViewSubtotal);
  productPriceTextView.setText("Subtotal: $" + subTotal);
 }

}

Screenshot of the App in Action

Listed below is a screenshot of the application in action.

Final Notes

It is actually not recommended to use decimals to calculate prices in Java applications. A better option would be to use the BigDecimal class.

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

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.