Bel ajar android kali ini akan membahas tentang pembuatan katalog produk pada aplicais android yang ditampilkan dalam bentuk Grid yang didalamnya ada gambar, nama dan harga

1. 1

2. Belajar Android Menampilkan Katalog Produk Buah-buahan.
Agus Haryanto
agus.superwriter@gmail.com
http://agusharyanto.net
Beberapa waktu yang lalu ada yang menanyakan tentang menampilkan katalog produk dalam
aplikasi android. Kalau kita lihat aplikasi – aplikasi toko online android biasanya menampilkan
produk dalam bentuk list atau grid.
Pada kesempatan kali ini kita akan mencoba menampilkan katalog produk dalam bentuk grid. Dan
untungnya untuk urusan ini android sudah menyediakan komponen user interfacenya yaitu
GridView.
Pada project kali ini kita akan mencoba membantu penjual buah langganan kita untuk dibuatkan
katalog buahmya. Mari kita mulai.
1. Bukan Android studio lalu buat project dengan Nama “ProductCatalog”
2. Klik Next sampai pada pilihan Activity pilih Empty Activity
2

3. 3. Klik Next terus sampai finish. Tunggu sebentar, project akan tercreate secara otomatis.
4. Siapkan gambar buah-buahan bisa cari di http://iconarchive.com , semua gambar buah dalam
project ini diambil dari sana. Semua gambarnya taruh di folder “drawable”
5. Sesuai Tema yaitu tentang Produk Katalog maka kita perlu model Product. Untuk itu pada
package net.agusharyanto.productcatalog buat class baru dengan nama “Product” lalu ketikan
kode berikut.
package net.agusharyanto.productcatalog;
/**
* Created by agus on 3/27/16.
*/
public class Product {
private String id="";
private String name="";
private String image="";
private String price="";
public Product(String id, String name, String image, String price) {
this.id = id;
this.name = name;
this.image = image;
this.price = price;
}
private Product() {
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
}
3

4. 6. Sekarang kita urus layout untuk item produknya yang tediri dari gambar, nama dan harga. Untuk
itu pada folder layout, buat layout baru dengan nama item_product. Lalu ketikan kode berikut.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="110dp"
android:layout_height="130dp" android:padding="2dp">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="@+id/imageViewProduct"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Product Name"
android:id="@+id/textViewName"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Price"
android:id="@+id/textViewPrice"
android:gravity="center"/>
</LinearLayout>
7. Untuk menampilkan ke Product GridView kita perlu buat Custom Adapter baru. Untuk buat
class baru dengan nama ProductAdapter lalu ketikan kode berikut
package net.agusharyanto.productcatalog;
import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.List;
/**
* Created by agus on 3/27/16.
*/
public class ProductAdapter extends ArrayAdapter<Product>{
Context context;
public ProductAdapter(Context context, int resource, List<Product>
products) {
super(context, resource, products);
this.context = context;
}
/*private view holder class*/
private class ViewHolder {
TextView tvName;
4

5. TextView tvPrice;
ImageView ivProduct;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
Product product = getItem(position);
LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.item_product, null);
holder = new ViewHolder();
holder.tvName = (TextView)
convertView.findViewById(R.id.textViewName);
holder.tvPrice = (TextView)
convertView.findViewById(R.id.textViewPrice);
holder.ivProduct = (ImageView)
convertView.findViewById(R.id.imageViewProduct);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tvName.setText(product.getName());
holder.tvPrice.setText("Rp"+product.getPrice());
int imageid = context.getResources().getIdentifier(product.getImage(),
"drawable", context.getPackageName());
try {
Picasso.with(context)
.load(imageid)
.fit()
.centerInside()
.into(holder.ivProduct);
}catch (Exception e){
Log.d("TAG","product:"+product.getName());
}
return convertView;
}
}
8. Pada class ProductAdapter terlihat ada code yang menggunakan library Picasso, untuk itu kita
perlu menanmbahkan Libray Picasso pada script gradle (module).
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.squareup.picasso:picasso:2.5.2'
}
9. Sekarang kita edit layout activity_main lalu ketikan kode berikut
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
5

6. android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="net.agusharyanto.productcatalog.MainActivity">
<GridView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/gridViewProduct"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:numColumns="3" />
</RelativeLayout>
10. Sekarang mari kita edit class MainActivity lalu ketikan kode berikut.
package net.agusharyanto.productcatalog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Product> products = new ArrayList<Product>();
private GridView gridViewProduct;
private ProductAdapter productAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridViewProduct = (GridView) findViewById(R.id.gridViewProduct);
initData();
drawDatatoGridView();
}
private void initData(){
List<String> fruits= Arrays.asList("apple", "banana", "cherry",
"coconut", "grape", "kiwi", "lemon", "mango", "orange", "peach", "pear",
"pineapple", "starfruit", "stroberry", "watermelon");
for (int i=0; i<fruits.size(); i++){
int id= i+1;
int price = id * 1000;
products.add(new Product(id + "", fruits.get(i), fruits.get(i),
price + ""));
}
}
private void drawDatatoGridView() {
productAdapter = new ProductAdapter(MainActivity.this,
R.layout.item_product, products);
6

7. gridViewProduct.setAdapter(productAdapter);
gridViewProduct.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int
position, long id) {
Product product = (Product)
parent.getAdapter().getItem(position);
Toast.makeText(getBaseContext(),"Product
Name :"+product.getName(),Toast.LENGTH_SHORT).show();
}
});
}
}
Perhatikan pada class diatas, ada method initData yang gunanya untuk menyiapkan data untuk
digunakan pada ProductAdapter. Sedangakan method drawDatatoGridview digunakan untuk
menggmabra data tadi ke GridVIew melalui ProductAdapter.
11. Sekarang mari kita jalankan projectnya. Jika semua berjalan lancar maka hasilnya adalah seperti
ini.
7

8. Bagaiman sudah berhasil, atau kodingnya masih ada yang error ? Kalau belum tenang saja. Saya
sudah siapkan solusinya, yaitu source code tutorial ini bisa di lihat di
https://github.com/jatisari/ProductCatalog
Ayo semangat calon-calon developer android handal Indonesia.
Semoga Bermanfaat
Salam Hangat
Agus Haryanto
Developer Android
8