Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
Belajar Android Menampilkan Katalog Produk Buah-buahan.
Agus Haryanto
agus.superwriter@gmail.com
http://agusharyanto.net
B...
3. Klik Next terus sampai finish. Tunggu sebentar, project akan tercreate secara otomatis.
4. Siapkan gambar buah-buahan b...
6. Sekarang kita urus layout untuk item produknya yang tediri dari gambar, nama dan harga. Untuk
itu pada folder layout, b...
TextView tvPrice;
ImageView ivProduct;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolde...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_m...
gridViewProduct.setAdapter(productAdapter);
gridViewProduct.setOnItemClickListener(new
AdapterView.OnItemClickListener() {...
Bagaiman sudah berhasil, atau kodingnya masih ada yang error ? Kalau belum tenang saja. Saya
sudah siapkan solusinya, yait...
Upcoming SlideShare
Loading in …5
×

Belajar Android Membuat Katalog Produk

14,377 views

Published on

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

Published in: Education

Belajar Android Membuat Katalog Produk

  1. 1. 1
  2. 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. 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. 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. 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. 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. 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. 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

×