In this session, we will see how to create a Cart for our E-Commerce Application.
The user will be able to view items in his cart, change quantity, delete item and then proceed to checkout.
The final output will look like this.
The complete video of the tutorial is available in the following YouTube video.
Source Code is as follows:
fragment_mycart.xml
listone_custom.xml
qty_spinner.item.xml
MyCart.java
The user will be able to view items in his cart, change quantity, delete item and then proceed to checkout.
The final output will look like this.
The complete video of the tutorial is available in the following YouTube video.
Source Code is as follows:
fragment_mycart.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/mychecklist" android:orientation="vertical" android:background="#E6E6E6"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="45dp" > <TextView android:id="@+id/item_text" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Items" android:textColor="#474747" android:textSize="14dp" android:layout_marginTop="4dp" android:layout_marginLeft="10dp"/> <TextView android:id="@+id/item_count" android:layout_toRightOf="@+id/item_text" android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(2)" android:textColor="#474747" android:textSize="14dp" android:layout_marginTop="4dp" android:layout_marginLeft="5dp"/> <TextView android:id="@+id/shipping_text" android:layout_alignParentLeft="true" android:layout_below="@+id/item_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Shipping:" android:textColor="#474747" android:textSize="14dp" android:layout_marginTop="2dp" android:layout_marginLeft="10dp"/> <TextView android:id="@+id/shipping_amount" android:layout_toRightOf="@+id/shipping_text" android:layout_alignTop="@+id/shipping_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rs.50" android:textColor="#474747" android:textSize="14dp" android:layout_marginLeft="5dp"/> <TextView android:id="@+id/total_amount" android:layout_toLeftOf="@+id/checkout" android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rs. 5700" android:textColor="#000000" android:textSize="20dp" android:layout_marginTop="12dp" android:layout_marginRight="10dp"/> <Button android:id="@+id/checkout" android:layout_width="wrap_content" android:layout_height="25dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginRight="4dp" android:layout_marginTop="4dp" android:background="#A2A2A2" android:padding="2dp" android:text="Checkout >>" android:textSize="16dp" /> <TextView android:id="@+id/cart_empty" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CART IS EMPTY" android:textColor="#474747" android:textSize="20dp" android:layout_marginTop="12dp" android:layout_marginLeft="50dp"/> </RelativeLayout> <View android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignParentLeft="true" android:layout_marginTop="5dp" android:background="#BABABA" /> <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:layout_margin="5dp"> </ListView> </LinearLayout>
listone_custom.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageButton android:id="@+id/delete" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:background="#FFFFFF" android:scaleX="1" android:scaleY="1" android:src="@android:drawable/ic_delete" /> <TextView android:id="@+id/product_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginLeft="15dp" android:layout_marginTop="10dp" android:layout_toLeftOf="@+id/delete" android:text="Kelloggs Corn Flakes Honey and Almond 400gm" android:textSize="20dp" /> <TextView android:id="@+id/product_mrp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/product_name" android:layout_below="@+id/product_name" android:layout_marginTop="15dp" android:text="MRP: " android:textSize="14dp" android:textColor="#757575"/> <TextView android:id="@+id/product_mrpvalue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/product_mrp" android:layout_marginLeft="0dp" android:layout_toRightOf="@+id/product_mrp" android:text="Rs.20000" android:textSize="14dp" android:textColor="#757575"/> <TextView android:id="@+id/product_bb" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/product_name" android:layout_below="@+id/product_mrp" android:layout_marginTop="5dp" android:text="BB: " android:textSize="14dp" android:textColor="#757575"/> <TextView android:id="@+id/product_bbvalue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/product_mrpvalue" android:layout_below="@+id/product_mrpvalue" android:layout_marginLeft="0dp" android:layout_marginTop="5dp" android:text="Rs.15000" android:textSize="14dp" android:textColor="#757575"/> <View android:id="@+id/view1" android:layout_width="1dp" android:layout_height="wrap_content" android:layout_alignBottom="@+id/product_savings" android:layout_below="@+id/product_name" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_toRightOf="@+id/product_mrpvalue" android:background="#E6E6E6" /> <TextView android:id="@+id/qty_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/view1" android:layout_below="@+id/product_name" android:layout_marginLeft="25dp" android:layout_marginTop="10dp" android:text="Qty" android:textSize="14dp" android:textColor="#757575"/> <Spinner android:id="@+id/spinner1" android:layout_width="50dp" android:layout_height="40dp" android:layout_below="@+id/qty_text" android:layout_marginLeft="10dp" android:layout_marginTop="0dp" android:layout_toRightOf="@+id/view1"/> <View android:id="@+id/view2" android:layout_width="1dp" android:layout_height="wrap_content" android:layout_alignBottom="@+id/product_savings" android:layout_below="@+id/product_name" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_toRightOf="@+id/spinner1" android:background="#E6E6E6" /> <TextView android:id="@+id/product_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/product_name" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_toRightOf="@+id/view2" android:text="Rs 5000" android:textColor="#191919" android:textSize="20dp" /> <View android:id="@+id/view3" android:layout_width="wrap_content" android:layout_height="1dp" android:layout_alignRight="@+id/product_savingsvalue" android:layout_below="@+id/product_value" android:layout_marginLeft="10dp" android:layout_marginTop="5dp" android:layout_toRightOf="@+id/view2" android:background="#E6E6E6" /> <TextView android:id="@+id/product_savings" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/view3" android:layout_marginLeft="10dp" android:layout_marginTop="5dp" android:layout_toRightOf="@+id/view2" android:text="Savings: " android:textColor="#5E5E5E" android:textSize="14dp" /> <TextView android:id="@+id/product_savingsvalue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/view3" android:layout_marginLeft="0dp" android:layout_marginTop="5dp" android:layout_toRightOf="@+id/product_savings" android:text="Rs 12000 " android:textColor="#5E5E5E" android:textSize="14dp" /> <View android:id="@+id/view4" android:layout_width="match_parent" android:layout_height="10dp" android:layout_alignParentLeft="true" android:layout_below="@+id/view1" android:layout_marginTop="5dp" android:background="#E6E6E6" /> </RelativeLayout>
qty_spinner.item.xml
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="16dip" android:gravity="center" android:textColor="#000000" android:padding="0dp" />
MyCart.java
package com.zing.basket; import java.util.ArrayList; import android.annotation.SuppressLint; import android.content.Context; import android.database.Cursor; import android.database.sqlite.SQLiteDatabase; import android.graphics.Typeface; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ArrayAdapter; import android.widget.BaseAdapter; import android.widget.Button; import android.widget.ImageButton; import android.widget.ListView; import android.widget.Spinner; import android.widget.TextView; import android.widget.Toast; import com.zing.basket.util.Product; @SuppressLint("ShowToast") public class MyCart extends Fragment { ArrayList<Product&lgt; cart_list = new ArrayList<Product&lgt;(); SQLiteDatabase sqLite; int count=0; int totalCartItemCount =0; int totalCartValue = 0; View myFragmentView; final String[] qtyValues = {"1","2","3","4","5","6","7","8","9","10"}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { myFragmentView = inflater.inflate(R.layout.fragment_mycart, container, false); getCartData(); totalCartItemCount = cart_list.size(); totalCartValue =0; for (int temp1=0; temp1 < cart_list.size(); temp1++) { totalCartValue = totalCartValue + Integer.parseInt(cart_list.get(temp1).getProductValue()); } HomeScreen activity = (HomeScreen) getActivity(); Typeface type= Typeface.createFromAsset(activity.getAssets(),"fonts/book.TTF"); TextView itemText = (TextView) myFragmentView.findViewById(R.id.item_text); TextView itemCount = (TextView) myFragmentView.findViewById(R.id.item_count); TextView shippingText = (TextView) myFragmentView.findViewById(R.id.shipping_text); TextView shippingAmount = (TextView) myFragmentView.findViewById(R.id.shipping_amount); TextView totalAmount = (TextView) myFragmentView.findViewById(R.id.total_amount); Button checkout = (Button) myFragmentView.findViewById(R.id.checkout); ListView lv1=(ListView) myFragmentView.findViewById(R.id.listView1); TextView cartEmpty = (TextView) myFragmentView.findViewById(R.id.cart_empty); if (totalCartItemCount == 0) { itemText.setVisibility(myFragmentView.INVISIBLE); itemCount.setVisibility(myFragmentView.INVISIBLE); shippingText.setVisibility(myFragmentView.INVISIBLE); shippingAmount.setVisibility(myFragmentView.INVISIBLE); totalAmount.setVisibility(myFragmentView.INVISIBLE); checkout.setVisibility(myFragmentView.INVISIBLE); lv1.setVisibility(myFragmentView.INVISIBLE); cartEmpty.setVisibility(myFragmentView.VISIBLE); } else { itemText.setVisibility(myFragmentView.VISIBLE); itemCount.setVisibility(myFragmentView.VISIBLE); shippingText.setVisibility(myFragmentView.VISIBLE); shippingAmount.setVisibility(myFragmentView.VISIBLE); totalAmount.setVisibility(myFragmentView.VISIBLE); checkout.setVisibility(myFragmentView.VISIBLE); lv1.setVisibility(myFragmentView.VISIBLE); cartEmpty.setVisibility(myFragmentView.INVISIBLE); } itemCount.setText("("+ totalCartItemCount + ")"); if (totalCartValue &lgt; 500) { shippingAmount.setText("Free"); totalAmount.setText("Rs "+ totalCartValue); } else { shippingAmount.setText("Rs 50"); totalAmount.setText("Rs "+ (totalCartValue+50)); } itemText.setTypeface(type); itemCount.setTypeface(type); shippingText.setTypeface(type); shippingAmount.setTypeface(type); totalAmount.setTypeface(type); checkout.setTypeface(type); lv1.setAdapter(new custom_list_one(this.getActivity(),cart_list)); return myFragmentView; } class custom_list_one extends BaseAdapter { private LayoutInflater layoutInflater; ViewHolder holder; private ArrayList<Product&lgt; cartList=new ArrayList<Product&lgt;(); int cartCounter; Typeface type; Context context; public custom_list_one(Context context, ArrayList<Product&lgt; cart_list) { layoutInflater = LayoutInflater.from(context); this.cartList=cart_list; this.cartCounter= cartList.size(); this.context = context; type= Typeface.createFromAsset(context.getAssets(),"fonts/book.TTF"); } @Override public int getCount() { return cartCounter; } @Override public Object getItem(int arg0) { return cartList.get(arg0); } @Override public long getItemId(int arg0) { return arg0; } @Override public View getView(final int position, View convertView, ViewGroup parent) { Product tempProduct = cart_list.get(position); if (convertView == null) { convertView = layoutInflater.inflate(R.layout.listone_custom, null); holder = new ViewHolder(); holder.name = (TextView) convertView.findViewById(R.id.product_name); holder.product_mrp = (TextView) convertView.findViewById(R.id.product_mrp); holder.product_mrpvalue = (TextView) convertView.findViewById(R.id.product_mrpvalue); holder.qty = (Spinner) convertView.findViewById(R.id.spinner1); holder.cancel = (ImageButton) convertView.findViewById(R.id.delete); holder.product_value = (TextView) convertView.findViewById(R.id.product_value); holder.qty_text =(TextView) convertView.findViewById(R.id.qty_text); holder.product_bb = (TextView) convertView.findViewById(R.id.product_bb); holder.product_bbvalue = (TextView) convertView.findViewById(R.id.product_bbvalue); holder.product_savings = (TextView) convertView.findViewById(R.id.product_savings); holder.product_savingsvalue = (TextView) convertView.findViewById(R.id.product_savingsvalue); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.name.setText(tempProduct.getProductName()); holder.name.setTypeface(type); holder.product_mrp.setTypeface(type); holder.product_mrpvalue.setText("Rs "+tempProduct.getProductMRP()); holder.product_mrpvalue.setTypeface(type); ArrayAdapter<String&lgt; aa=new ArrayAdapter<String&lgt;(context,R.layout.qty_spinner_item,qtyValues); aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); holder.qty.setAdapter(aa); holder.qty.setSelection(Integer.parseInt(tempProduct.getProductQty())-1); holder.product_bb.setTypeface(type); holder.product_bbvalue.setText("Rs "+tempProduct.getProductBBPrice()); holder.product_bbvalue.setTypeface(type); holder.product_savings.setTypeface(type); holder.product_savingsvalue.setText("Rs "+(Integer.parseInt(tempProduct.getProductMRP())-Integer.parseInt(tempProduct.getProductBBPrice()))*Integer.parseInt(tempProduct.getProductQty())+""); holder.product_savingsvalue.setTypeface(type); holder.qty_text.setTypeface(type); holder.product_value.setText("Rs "+Integer.parseInt(tempProduct.getProductBBPrice())*Integer.parseInt(tempProduct.getProductQty())+""); holder.product_value.setTypeface(type); holder.cancel.setOnClickListener(new MyPersonalClickListener("button_delete",tempProduct)); holder.qty.setOnItemSelectedListener(new OnItemSelectedListener(){ @Override public void onItemSelected(AdapterView<?&lgt; parent, View view,int selectionIndex, long id) { //if user has changed the quantity, then save it in the DB. refresh cart_list if ((parent.getSelectedItemPosition()+1) != Integer.parseInt(cart_list.get(position).getProductQty())) { sqLite=context.openOrCreateDatabase("basketbuddy", context.MODE_PRIVATE, null); sqLite.execSQL("UPDATE CART SET PRODUCT_QTY ='"+ (parent.getSelectedItemPosition()+1)+"' WHERE PRODUCT_CODE ='"+cart_list.get(position).getProductCode()+"'"); sqLite.execSQL("UPDATE CART SET PRODUCT_VALUE='" + (parent.getSelectedItemPosition()+1) * Integer.parseInt(cart_list.get(position).getProductBBPrice()) +"' WHERE PRODUCT_CODE ='"+cart_list.get(position).getProductCode()+"'"); sqLite.close(); getCartData(); notifyDataSetChanged(); //refresh data outside the listview - Cart Total, Total Items, Shipping Cost etc View parentView = (View) view.getParent().getParent().getParent().getParent(); TextView txtTotalAmount = (TextView) parentView.findViewById(R.id.total_amount); TextView txtTotalItems = (TextView) parentView.findViewById(R.id.item_count); TextView txtShippingAmt = (TextView) parentView.findViewById(R.id.shipping_amount); totalCartItemCount = cart_list.size(); totalCartValue =0; for (int temp1=0; temp1 < cart_list.size(); temp1++) { totalCartValue = totalCartValue + Integer.parseInt(cart_list.get(temp1).getProductValue()); } txtTotalItems.setText("("+ totalCartItemCount + ")"); if (totalCartValue &lgt; 500) { txtShippingAmt.setText("Free"); txtTotalAmount.setText("Rs "+ totalCartValue); } else { txtShippingAmt.setText("Rs 50"); txtTotalAmount.setText("Rs "+ (totalCartValue+50)); } } } @Override public void onNothingSelected(AdapterView<?&lgt; arg0) { } }); return convertView; } class ViewHolder { TextView name; TextView product_mrp; TextView product_mrpvalue; TextView product_bb; TextView product_bbvalue; TextView qty_text; TextView product_savings; TextView product_savingsvalue; TextView product_value; ImageButton cancel; Spinner qty; } } public class MyPersonalClickListener implements OnClickListener { String button_name; Product prod_name; int tempQty; int tempValue; public MyPersonalClickListener(String button_name, Product prod_name) { this.prod_name = prod_name; this.button_name = button_name; } @Override public void onClick(View v) { if (button_name == "button_delete") { sqLite=getActivity().openOrCreateDatabase("basketbuddy", getActivity().MODE_PRIVATE, null); sqLite.execSQL("DELETE FROM CART WHERE PRODUCT_CODE ="+Integer.parseInt(prod_name.getProductCode())); sqLite.close(); Toast.makeText(getActivity(),"Item "+prod_name.getProductName()+" deleted from Cart", Toast.LENGTH_LONG).show(); getCartData(); View lView = (View) v.getParent().getParent(); ((ListView) lView).setAdapter(new custom_list_one(getActivity(),cart_list)); TextView txtTotalAmount = (TextView) myFragmentView.findViewById(R.id.total_amount); TextView txtTotalItems = (TextView) myFragmentView.findViewById(R.id.item_count); TextView txtShippingAmt = (TextView) myFragmentView.findViewById(R.id.shipping_amount); TextView itemText = (TextView) myFragmentView.findViewById(R.id.item_text); TextView shippingText = (TextView) myFragmentView.findViewById(R.id.shipping_text); Button checkout = (Button) myFragmentView.findViewById(R.id.checkout); ListView lv1=(ListView) myFragmentView.findViewById(R.id.listView1); TextView cartEmpty = (TextView) myFragmentView.findViewById(R.id.cart_empty); totalCartItemCount = cart_list.size(); totalCartValue =0; for (int temp1=0; temp1 < cart_list.size(); temp1++) { totalCartValue = totalCartValue + Integer.parseInt(cart_list.get(temp1).getProductValue()); } txtTotalItems.setText("("+ totalCartItemCount + ")"); if (totalCartValue &lgt; 500) { txtShippingAmt.setText("Free"); txtTotalAmount.setText("Rs "+ totalCartValue); } else { txtShippingAmt.setText("Rs 50"); txtTotalAmount.setText("Rs "+ (totalCartValue+50)); } if (totalCartItemCount == 0) { itemText.setVisibility(myFragmentView.INVISIBLE); txtTotalItems.setVisibility(myFragmentView.INVISIBLE); shippingText.setVisibility(myFragmentView.INVISIBLE); txtShippingAmt.setVisibility(myFragmentView.INVISIBLE); txtTotalAmount.setVisibility(myFragmentView.INVISIBLE); checkout.setVisibility(myFragmentView.INVISIBLE); lv1.setVisibility(myFragmentView.INVISIBLE); cartEmpty.setVisibility(myFragmentView.VISIBLE); } else { itemText.setVisibility(myFragmentView.VISIBLE); txtTotalItems.setVisibility(myFragmentView.VISIBLE); shippingText.setVisibility(myFragmentView.VISIBLE); txtShippingAmt.setVisibility(myFragmentView.VISIBLE); txtTotalAmount.setVisibility(myFragmentView.VISIBLE); checkout.setVisibility(myFragmentView.VISIBLE); lv1.setVisibility(myFragmentView.VISIBLE); cartEmpty.setVisibility(myFragmentView.INVISIBLE); } } } } public void getCartData() { HomeScreen activity = (HomeScreen) getActivity(); Product tempCartItem = new Product(); cart_list.clear(); sqLite=activity.openOrCreateDatabase("basketbuddy", activity.MODE_PRIVATE, null); Cursor c=sqLite.rawQuery("SELECT * FROM CART",null); count=0; if(c.moveToFirst()) { do{ tempCartItem = new Product(); tempCartItem.setProductCode(c.getString(c.getColumnIndex("PRODUCT_CODE"))); tempCartItem.setProductName(c.getString(c.getColumnIndex("PRODUCT_NAME"))); tempCartItem.setProductBarcode(c.getString(c.getColumnIndex("PRODUCT_BARCODE"))); tempCartItem.setProductGrammage(c.getString(c.getColumnIndex("PRODUCT_GRAMMAGE"))); tempCartItem.setProductDivision(c.getString(c.getColumnIndex("PRODUCT_DIVISION"))); tempCartItem.setProductDepartment(c.getString(c.getColumnIndex("PRODUCT_DEPARTMENT"))); tempCartItem.setProductBBPrice(c.getString(c.getColumnIndex("PRODUCT_BBPRICE"))); tempCartItem.setProductMRP(c.getString(c.getColumnIndex("PRODUCT_MRP"))); tempCartItem.setProductQty(c.getString(c.getColumnIndex("PRODUCT_QTY"))); tempCartItem.setProductValue(c.getString(c.getColumnIndex("PRODUCT_VALUE"))); cart_list.add(tempCartItem); count++; }while(c.moveToNext()); } sqLite.close(); } }
sir can u plz give me the apk file of above app...
ReplyDeleteregards
pankaj deulkar
depankaj@gmail.com
You can go to this post for the source code
ReplyDeletehttp://semycolon.blogspot.in/2015/03/source-code-e-commerce-app.html