1

Belajar Android Menampilkan Katalog Produk Buah-buahan.Agus Haryanto

agus.superwriter@gmail.comhttp://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. 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

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 berikutpackage 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

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

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

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 sepertiini.

7

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 BermanfaatSalam HangatAgus HaryantoDeveloper Android

8