Tutorial Membuat Aplikasi Android Keranjang Belanja ( Shopping Cart )

Untuk kali ini kita akan belajar cara membuat keranjang belanja atau di kenal dengan istilah shopping cart. Membuat shopping cart agak gampang gampang susah. Tetapi, tidak mengapa, kita bisa mengikuti tutorial yang sudah saya siapkan.

Buka eclipse buat project dengan nama keranjang belanja.



Pada layout activity_main.xml ubah kode menjadi seperti koding dibawah ini.
activity_main.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:background="#ffffff"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:text="List Produk"
        android:textColor="#000000"
        android:textSize="18sp" >
    </TextView>

    <ListView
        android:id="@+id/ListViewCatalog"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ffffff"
        android:cacheColorHint="#ffffff"
        android:clickable="true" >
    </ListView>

    <Button
        android:id="@+id/ButtonViewCart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_default_small"
        android:text="Lihat Keranjang Belanja" >
    </Button>

</LinearLayout>

Pada res.layout, buat layout baru dengan nama list_row.xml dan pastekan kode dibawah ini.
list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#f0f0f0"
    android:orientation="horizontal"
    android:padding="7dip" >

    <LinearLayout
        android:id="@+id/gbr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:background="#f0f0f0"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/gambar"
            android:layout_width="80dip"
            android:layout_height="80dip"
            android:src="@drawable/icon" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/gbr"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/gbr"
        android:layout_toRightOf="@+id/gbr"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sonket Miko"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.60"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Kategori"
                    android:textColor="#000000"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/kat"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Selempang"
                    android:textColor="#000000"
                    android:textStyle="bold|italic" />
            </LinearLayout>

            <CheckBox
                android:id="@+id/CheckBoxSelected"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="false"
                android:focusable="false" />
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rp. "
                android:textColor="#000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/hrg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/textView3"
                android:text="60000"
                android:textColor="#000000"
                android:textStyle="bold" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout> 

Selanjutnya buat layout dengan nama productdetails.xml pastekan kode dibawah ini.
productdetails.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:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayoutHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/ImageViewProduct"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:src="@drawable/icon" >
        </ImageView>

        <TextView
            android:id="@+id/namaProduk"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dip"
            android:text="Name PRoduk"
            android:textColor="#000000"
            android:textSize="20sp" >
        </TextView>
    </LinearLayout>

    <TextView
        android:id="@+id/kategoRi"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:text="Kategori"
        android:textColor="#000000" >
    </TextView>

    <TextView
        android:id="@+id/hrg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:text="TextView"
        android:textColor="#000000" />

    <Button
        android:id="@+id/Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:text="Tambah Ke Keranjang Belanja" />

</LinearLayout>

Selanjutnya layout shoppingcart.xml pastekan koding berikut.
shoppingcart.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:background="#ffffff"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:text="Keranjang Belanja"
        android:textColor="#000000"
        android:textSize="18sp" >
    </TextView>

    <ListView
        android:id="@+id/ListViewCatalog"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ffffff"
        android:cacheColorHint="#ffffff"
        android:choiceMode="multipleChoice"
        android:clickable="true"
        android:divider="#f5f5f5"
        android:dividerHeight="1dp" >
    </ListView>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/Button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="14dp"
            android:text="Lanjut Bayar" />

        <Button
            android:id="@+id/ButtonRemoveFromCart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="16dp"
            android:text="Buang" />
    </RelativeLayout>

</LinearLayout>

Ubah koding MainActivity.java seperti dibawah ini.
MainActivity.java

package com.keranjang.belanja;

import java.util.List;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
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 MainActivity 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.activity_main);

  // Obtain a reference to the product catalog
  mProductList = KeranjangBelanjaData.getCatalog(getResources());
  Log.d("PPPPPPPP", mProductList.toString());
  // Create the list
  ListView listViewCatalog = (ListView) findViewById(R.id.ListView1);
  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(),
      DetailProduk.class);
    productDetailsIntent.putExtra(
      KeranjangBelanjaData.PRODUCT_INDEX, position);
    startActivity(productDetailsIntent);
   }
  });

  Button viewShoppingCart = (Button) findViewById(R.id.Button1);
  viewShoppingCart.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    Intent viewShoppingCartIntent = new Intent(getBaseContext(),
      ShoppingCartActivity.class);
    startActivity(viewShoppingCartIntent);
   }
  });

 }
}

Pada src/namapackage, tambahkan class baru dengan nama DetailProduk.java, pastekan koding berikut ini.
DetailProduk.java 

package com.keranjang.belanja;

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 DetailProduk extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {

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

  List<Product> catalog = KeranjangBelanjaData.getCatalog(getResources());
  final List<Product> cart = KeranjangBelanjaData.getCart();

  int productIndex = getIntent().getExtras().getInt(
    KeranjangBelanjaData.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 Title = (TextView) findViewById(R.id.namaProduk);
  TextView Kategri = (TextView) findViewById(R.id.kategoRi);
  TextView Harg = (TextView) findViewById(R.id.hrg);

  Title.setText(selectedProduct.title);
  Kategri.setText("Kategori : " + selectedProduct.kategori);
  Harg.setText("Harga : Rp." + selectedProduct.price);

  Button addToCartButton = (Button) findViewById(R.id.Button);
  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");
  }
 }

}

Selanjutnya buat class baru dengan nama KeranjangBelanjaData.java, pastekan koding berikut ini.
KeranjangBelanjaData.java

package com.keranjang.belanja;

import java.util.List;
import java.util.Vector;

import android.content.res.Resources;

public class KeranjangBelanjaData {

 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("Samsung Android S5", res
     .getDrawable(R.drawable.phone), "Elektronik", 520000));
   catalog.add(new Product("Computer Acer Core i3", res
     .getDrawable(R.drawable.remote_desktop), "Elektonik", 2480000));
   catalog.add(new Product("Mesin Cuci LG", res
     .getDrawable(R.drawable.icons), "Elektonik", 1900000));
  }

  return catalog;
 }

 public static List<Product> getCart() {
  if (cart == null) {
   cart = new Vector<Product>();
  }

  return cart;
 }

}

jalankan project, maka di listview akan tampil produk yang akan di pilih konsumen. Konsumen bisa melihat detail barang dengan cara mengetuk pada list barang yang disukai. Pada detail tersedia button untuk memasukkan produk ke keranjang belanja. Pada keranjang belanja, produk yang telah masuk bisa dibuangkan dengan kata lain mengurangi produk dalam keranjang belanja. Maka hasilnya seperti pada gambar berikut.

 

Demikianlah tutorial membuat keranjang belanja, mudah-mudahan bermanfaat bagi kita semua. Aaamiiin.