Creating Shopping cart in android : Step by Step tutorial - SpartaCode

SpartaCode

Make your development faster and easier !

Creating Shopping cart in android : Step by Step tutorial





Shopping Cart is most important feature of all Ecommerce Apps.
If you want to create cart system as quickly as possible this is right place. Its basic yet customizable Shopping Cart for Android.

Here,
I introduce you with simplest and Customisable Shopping Cart System.

Following is Step By Step Details of implementation :

Step 1 : Create new Activity and Copy this into Layout file : activity_cart.xml

<RelativeLayout android:background="#e1e1e1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:id="@+id/layout_total"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp"
        android:weightSum="2">
        <TextView android:gravity="end"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:text="Total : "
            android:textSize="20dp">
        </TextView>

        <TextView
            android:id="@+id/tv_total"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:text="0 Rs"
            android:textSize="20dp">
        </TextView>
    </LinearLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_cart"
        android:layout_above="@+id/btn_placeorder"
        android:layout_below="@+id/layout_total"
        android:layout_height="match_parent"
        android:layout_width="match_parent">
    </android.support.v7.widget.RecyclerView>


    <Button
        android:id="@+id/btn_placeorder"
        android:layout_gravity="center"
        android:layout_alignParentBottom="true"
        android:layout_height="60dp"
        android:layout_width="match_parent"
        android:onClick="insertOrder"
        android:text="Place Order"
        android:textColor="@android:color/white"
        android:theme="@style/Theme.MaterialButton">
    </Button>

</RelativeLayout>



Copy button style into style.xml in res->val->style.xml

    <style name="Theme.MaterialButton" parent="AppTheme">
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/colorPrimaryDark</item>
        <item name="colorControlHighlight">@color/colorAccent</item>
    </style>

Download Images and Put it into your Drawable package :






Step 2 : Copy this into corresponding Java Activity File:



public class CartActivity extends AppCompatActivity {

    RecyclerView recycler_itemlist;
    public static TextView tv_total;
    CartListAdapter cartListAdapter;
    public static int total=0;
    String jsonCartList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cart);

        //Set back button to activity
        android.support.v7.app.ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setHomeButtonEnabled(true);
            actionBar.setTitle("Cart");
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

        tv_total =(TextView) findViewById(R.id.tv_total);

        recycler_itemlist =(RecyclerView) findViewById(R.id.recycler_cart);
        recycler_itemlist.setHasFixedSize(true);
        recycler_itemlist.setRecycledViewPool(new RecyclerView.RecycledViewPool());
        recycler_itemlist.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,false));
        recycler_itemlist.getRecycledViewPool().setMaxRecycledViews(0, 0);

        cartListAdapter = new CartListAdapter(CartActivity.this,ItemListAdapter.selecteditems);
        recycler_itemlist.setAdapter(cartListAdapter);

        getIntentData();

        calculateTotal();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                // app icon in action bar clicked; goto parent activity.
                this.finish();
                return true;

            default:
                return super.onOptionsItemSelected(item);
        }
    }

    private void getIntentData(){
        if(getIntent()!=null && getIntent().getExtras()!=null){
           // Get the Required Parameters for sending Order to server.
        }
    }

    public static void calculateTotal(){
        int i=0;
        total=0;
        while(i<ItemListAdapter.selecteditems.size()){
            total=total + ( Integer.valueOf(ItemListAdapter.selecteditems.get(i).getRate()) * Integer.valueOf(ItemListAdapter.selecteditems.get(i).getQuantity()) );
            i++;
        }
        tv_total.setText(""+total);
    }

    public void insertOrder(View view){

            if(total>0){

            Gson gson = new Gson();
            jsonCartList = gson.toJson(ItemListAdapter.selecteditems);

            DialogInterface.OnClickListener dialogClickListener = new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    switch (which){
                        case DialogInterface.BUTTON_POSITIVE:
                            //Yes button clicked
                            placeOrderRequest();
                            break;

                        case DialogInterface.BUTTON_NEGATIVE:
                            //No button clicked
                            break;
                    }
                }
            };

            AlertDialog.Builder builder = new AlertDialog.Builder(CartActivity.this);
            builder.setMessage("Do you want to place Order ?").setPositiveButton("Yes", dialogClickListener)
                    .setNegativeButton("No", dialogClickListener).show();

        }else{
                Toast.makeText(CartActivity.this,"No items in Cart !",Toast.LENGTH_LONG).show();
            }


    }


    private void placeOrderRequest(){
       //Send Request to Server with required Parameters
    /*
   jsonCartList - Consists of Objects of all product selected.
    */
    
    }

}


Include gson and retrofit api :

    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.squareup.retrofit2:converter-gson:2.0.2'





Step 3 : Copy model class required to capture all attributes of an Item/Product :




public class Item {

    public String ItemId;
    public String ItemName;
    public String Size;
    public String Company;
    public String Rate;

    public String getStatus() {
        return Status;
    }

    public void setStatus(String status) {
        Status = status;
    }

    public String Status;

    public String getQuantity() {
        return Quantity;
    }

    public void setQuantity(String quantity) {
        Quantity = quantity;
    }

    public String Quantity;

    public void setItemId(String ItemId){
        this.ItemId=ItemId;
    }
    public String getItemId(){
        return ItemId;
    }
    public void setItemName(String ItemName){
        this.ItemName=ItemName;
    }
    public String getItemName(){
        return ItemName;
    }
    public void setSize(String Size){
        this.Size=Size;
    }
    public String getSize(){
        return Size;
    }
    public void setCompany(String Company){
        this.Company=Company;
    }
    public String getCompany(){
        return Company;
    }
    public void setRate(String Rate){
        this.Rate=Rate;
    }
    public String getRate(){
        return Rate;
    }

    public String getJsonObject(){
        return "{ItemId:"+ItemId+",ItemName:"+ItemName+",Size:"+Size+",Company:"+Company+",Rate:"+Rate+"}";
    }
}




To create your custom Model class you can prefer my Automation Site :

Model Class Generator



Step 4 : Copy the ItemListAdapter:

 
import android.app.Activity;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.CheckBox;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import admin.employee.R;
import admin.employee.listeners.ItemClickListener;
import admin.employee.services.models.Item;
import admin.employee.services.models.Retailer;


public class ItemListAdapter extends RecyclerView.Adapter<ItemListAdapter.ViewHolder>  implements Filterable{
    private List<Item> callListResponses = new ArrayList<>();
    private Activity context;
    final List<Item> templist=new ArrayList<>();
    public static List<Item> selecteditems;
    int lastPosition=0;

    public ItemListAdapter(Activity context, List<Item> callListResponses)
    {
        super();
        this.context = context;
        this.callListResponses=callListResponses;
        selecteditems=new ArrayList<>();
        templist.addAll(callListResponses);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View itemView = LayoutInflater.from(context).inflate(R.layout.row_single_item, parent, false);

        return new ViewHolder(itemView);
    }

    public void init(){
        templist.addAll(callListResponses);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        final Item call = callListResponses.get(position);

        holder.tv_name.setText(call.getItemName());
        holder.tv_rate.setText(call.getRate());
        holder.tv_size.setText(call.getSize());
        //Integer.parseInt(call.getQuantity())
       // String total=String.valueOf(Integer.parseInt(call.getRate()) *Integer.parseInt( call.getQuantity()));
       // holder.tv_total.setText(total);


        holder.card_myevent.setOnClickListener(new ItemClickListener(context,call,holder.chk_selectitem));


        if(ItemListAdapter.selecteditems.contains(call)){
            holder.chk_selectitem.setChecked(true);
        }else{
            holder.chk_selectitem.setChecked(false);
        }

        setAnimation(holder.card_myevent,position);
    }

    //Animating single element
    private void setAnimation(View viewToAnimate, int position)
    {

        if (position > lastPosition) {
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.push_right_in);
            viewToAnimate.startAnimation(animation);
            lastPosition=position;
        }
        position++;
    }

    @Override
    public int getItemCount() {
        //Log.d("Size List:",String.valueOf(callListResponses.size()));
        if(callListResponses!=null){
            return callListResponses.size();
        }
        return 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_name,tv_size,tv_rate, tv_qty,tv_total;
        CardView card_myevent;
        CheckBox chk_selectitem;

        public ViewHolder(View itemView) {
            super(itemView);
            card_myevent=(CardView) itemView.findViewById(R.id.card_myevent);
            tv_name=(TextView) itemView.findViewById(R.id.tv_name);
            tv_size=(TextView) itemView.findViewById(R.id.tv_size);
            tv_rate=(TextView) itemView.findViewById(R.id.tv_rate);
            tv_qty=(TextView) itemView.findViewById(R.id.tv_qty);
            tv_total=(TextView) itemView.findViewById(R.id.tv_total);
            chk_selectitem=(CheckBox) itemView.findViewById(R.id.chk_selectitem);

        }
    }

    public Filter getFilter() {

        Filter mfilter = new Filter() {
            @Override
            protected void publishResults(CharSequence constraint, FilterResults results) {
                callListResponses.clear();
                callListResponses.addAll((ArrayList<Item>)results.values);
                notifyDataSetChanged();
            }

            @Override
            protected FilterResults performFiltering(CharSequence constraint) {
                FilterResults result = new FilterResults();
                ArrayList<Item> res;
                Log.e("Charswq",String.valueOf(constraint));
                Log.e("Lenght",String.valueOf(constraint.length()));

                res = new ArrayList<>();
                if(constraint.length()>0){
                    for(Item d: callListResponses){

                        if(d.getItemName().toUpperCase().contains(constraint.toString().toUpperCase())
                                || d.getSize().toUpperCase().contains(constraint.toString().toUpperCase())
                                || d.getCompany().toUpperCase().contains(constraint.toString().toUpperCase())){
                            res.add(d);
                            Log.e("firmname",d.getItemName());
                            Log.e("Name",d.getSize());
                            Log.e("Contact",d.getCompany());
                        }
                    }
                    result.count = res.size();
                    result.values = res;
                }

                if(constraint.length() == 0){
                    res.addAll(templist);
                    result.count = res.size();
                    result.values = res;
                    Log.e("value of templeis",""+templist.size());
                }

                return result;
            }
        };

        return mfilter;
    }
}



Step 5 : Copy the Sole of Cart, Adding Items:


We need to copy this static List variable into List Adapter used to display our Item / Product

Just copy this line into Recycler or List Adapter so that 
Items can be added into this list and it can be accessed from any where.

 

public static List <item> selecteditems;



You can check if list already contains item to be added like this :


        if(ItemListAdapter.selecteditems.contains(itemobject)){
           //List already contains item
        }else{
            //List does not contains item you can add item here.
            ItemListAdapter.selecteditems.add(itemobject);
        }




Step 6 : Removing Items from Cart :



            ItemListAdapter.selecteditems.remove(item);
            cartListAdapter.notifyDataSetChanged();
            CartActivity.calculateTotal();



Thank You for your Visit
If you like post, Please Share and Comment.

32 comments:

  1. Simple and customizable Cart is really awesome for beginners.

    ReplyDelete
  2. please provide such demo example to download.

    ReplyDelete
    Replies
    1. Hello Ankesh,
      Thank you for your message.. I will provide a demo project on this topic.

      Delete
    2. Hi can you please share the source code thanks
      frankboateng1992@hgmail.com is my account
      Thank you

      Delete
  3. Replies
    1. Hello Ankesh Which part is missing ?

      Delete
    2. what about adding amount ? user selects 2 of a product

      Delete
    3. When user selects two of product the amount is automatically multiplied by two and updated in total cost.

      Delete
  4. Thankyu for your sharing Sir.

    if you can, please give your code (demo) to github.
    or artdyora@gmail.com

    thankyu sir..

    ReplyDelete
  5. Hello Angkit, any class are missing that CartListAdapter. please how to create or get that class?

    ReplyDelete
    Replies
    1. Dear Art Dyora,
      Thank you for your Message.
      I will add complete source code for this topic.
      Please let me know which classes are missing.
      Its grateful to help you.

      Delete
    2. if you can, please give your code (demo) to github.
      or sureshprismsoft@gmail.com

      Delete
  6. Hi Ankit, Can you please provide a source code to download.

    ReplyDelete
  7. if you can, please give your code (demo) to github.
    or sureshprismsoft@gmail.com

    ReplyDelete
  8. Nice tutorial.

    What about the xml design for the single item view

    ReplyDelete
  9. ItemClickListener i cant import what can i do and push_right_in please tell me

    ReplyDelete
  10. Marketplaces are beneficial for both the online retailers as well as the customers. Entrepreneurs can start their business with zero inventories and also earn commission from the listed vendors.  ecommerce platform

    ReplyDelete
  11. if you can, please give your code (demo) to github.
    ashvinivhiremat@gmail.com

    ReplyDelete
  12. This seems incomplete. as indicated above there is no xml file for single item view. There is nothing regarding the necessary changes required to the Gradle (module). For a step-by-step guide it does not work in that for a new user it would be very difficult to follow - for example no indication of how to set up a java file. It really requires much more detailed explanation

    If these points were remedied it would be a good tutorial. If anyone has overcome these shortcomings I would love to hear from you

    ReplyDelete
  13. Dear sir,

    please give full source code of this project please its humble request.
    Thanks & Regards
    abhishekkaushal36@gmail.com

    ReplyDelete
  14. Hello Sir,
    Please share full code of this project on naveen000028@gmail.com
    Thank you

    ReplyDelete
  15. Hello,
    Please share full code of this project on ipostam@hotmail.com
    Thank you

    ReplyDelete
  16. Hello,
    Please share full code of this project on
    nashishyadav.n20@gmail.com
    Thank you

    ReplyDelete
  17. where is row_single_item.xml file???

    ReplyDelete
  18. Hi, Please give your code to emprotekcorp@gmail.com

    thank you.

    ReplyDelete
  19. This class is not full, ItemClickListener.java and Retailer.java not displayed in this tutorial

    ReplyDelete
  20. can you send souce code in ricots47@gmail.com
    thank you

    ReplyDelete
  21. Hi Ankit, it seems there in no complete code can u please mail me the complete code to nilesh.pal0497@gmail.com, Thank you.

    ReplyDelete
  22. can you send souce code in banklhon1995@gmail.com Thank you.

    ReplyDelete
  23. Can you send souce code in burak.keysoft@gmail.com Thank you

    ReplyDelete

Get Amazing Traffic to your Site

Traffic Exchange

Post Bottom Ad

Responsive Ads Here