Tutorial ViewPager Android

Download contoh apk demonya

Langkah-langkah membuat view pager di android yang support sdk 10 (android 2.3+) menggunakan AIDE adalah sebagai berikut.
Sebelumnya silakan cobain dulu contoh apk yg sudah jadinya dari project ini.

Setelah pada postingan saya sebelumnya kita telah belajar Cara Membuat Custom Font di Android kali ini kita akan mencoba belajar membuat view pager.

Ok, seperti biasa buat project baru (gradle). Isi nama aplikasi dan nama package sesuai dengan yang kamu inginkan lalu tap 'Create'.

 Masuk folder app (pada folder project) dan buka file build.gradle, lalu cari line minSdkversion dan jika nilainya lebih dari 10 maka ganti menjadi 10.

Karena class ViewPager ada di dalam library support.v4 maka kita harus meng-import library tersebut ke dalam project kita. Masih di dalam folder app, tampilkan file browser AIDE dan klik 'Add to Project' lalu pilih 'com.android.support:support-v4:+' lalu tap 'Yes' untuk mengkonfirmasi.

Jika saat tap 'Add to Project' gak ada pilihan library tersebut berarti di dalam folder 'sdcard.aide' belum tersimpan kumpulan library android_m2repository. Solusi, buka file build.gradle dan cari bagian 'dependencies' lalu tambahkan line ini
'com.android.support:support-v4:+' lalu save dan biarkan aide mendownload library android_m2repository. Proses downloadnya termasuk library yang lain seperti support v7 dan v13. Jadi jika koneksi internetnya kurang kenceng harus sedikit sabar, namun setelah library-library tersebut terdownload apabila kita membutuhkan kita tinggal meng-import dan gak perlu download lagi.

Sekarang mulai mainan layout, masuk ke folder src/main/res/layout/ dan edit file main.xml. tambahkan object ViewPager disana.

Lanjut ke pembuatan layout.
Buat layout baru untuk digunakan sebagi tampilan dari setiap page dari viewpager yang akan kita buat.
Buat layout sebanyak jumlah halaman pager yang kita inginkan. Dalam contoh ini kita akan membuat 3 halaman pager jadi kita akan membuat 3 layout.
Kita mulai dengan layout pertama, tap 'Add New Xml File' dan namai filenya dengan yang agan mau, dalam contoh ini saya menaminya halaman_1.
Edit filenya sesuai kebutuhan agan.
ulangi pembuatan file sampai 3 file.

Ok, pembuatan layout untuk masing-masing halaman pager telah selesai, sekarang kita akan membuat tiga file java yang akan berfungsi meng-inflate (menampilkan) masing-masing layout tadi.
Masuk ke folder dimana file 'MainActivity.java' berada.

Tap 'Add New Class...' dan buat class dengan nama terserah agan, di contoh ini ane namai 'Halaman1' (Halaman1.java).

Sekarang edit isinya dan buat menjadi extends Fragment, saat mengimport class Fragmet harus diperhatikan yang diimport adalah class Fragment dari library support v4 (android.support.v4.app.Fragment), bukan class Fragment dari package android.app (android.app.Fragment).

Sebenarnya bisa aja kita menggunakan android.app.Fragment akan tetapi nanti kita akan membutuhkan library support v13. dan library ini diperuntukan untuk sdk 13 ke atas.

Tujuan (tugas) class Halaman.java adalah untuk menampilkan halaman (layout) halaman_1.xml yang tadi telah kita buat. untuk itu kita perlu meng-override method onCreateView() dan kita inflate layout halaman_1.xml.

Simpan filenya dan buatlah dua class lagi dengan nama Halaman2.java dan Halaman3.java.
Edit isinya seperti class Halaman1.java. yang membedakan adalah, jika class halaman1.java menampilkan (meng-inflate) layout halaman_1.xml maka untuk class Halaman2.java di dalam method onCreateView harus meng-inflate layout halaman_2.xml.

begitu juga class Halaman3.java yaitu meng-inflate layout halaman_3.xml.

Baiklah sekarang kita sudah mempunyai 3 layout dan 3 class yg bertugas menampilkan layout tersebut.

selanjutnya kita akan membuat class adapter yang bertugas menyatukan ketiga halam tersebut.

buatlah class baru dengan nama terserah (dalam contoh saya namai 'Adapter' (Adapter.java).

Edit isi classnya dan ubah menjadi extends FragmentPagerAdapter

Tap pada ikon error dan implements semua methodnya.

Buat constructor dengan parameter FragmentManager dan panggil super();

Pada method getcount() kita isi dengan jumlah halaman pager yg kita inginkan, karena kita akan membuat 3 halaman pager maka kita beri nilai 3 pada nilai kembalian (return value) dari method getcount().

Method getItem() adalah method yg digunakan oleh adpater untuk membuat (memanggil) fragment untuk setiap halaman pager. Dan method ini dipanggil sebanyak jumlah halaman yang kita buat dengan membawa nilai parameter (p1) dimulai dari nilai nol untuk halaman pertama sampai nilai dua untuk halaman ketiga. Karena kita akan menampilkan Frgament1.java untuk halaman satu, Fragment2.java untuk halaman dua dan Fragment3.java untuk halaman 3, maka kita harus membaca nilai parameter p1 dan kita return fragment sesuai dengan nilai p1. jika p1 nol berarti adapter sedang membuat halaman pertama maka kita beri kembalian fragment1.java, begitu seterusnya. (menggunkan if else).

OK, sekarang kita telah mempunyai 3 layout, 3 class fragment untuk meng-inflate 3 layout tersebut dan class adapter untuk menyatukan tiga fragment tersebut.
Sekarang langkah terakhir adalah menggabungkan (mempertemukan) object adapter dengan object view pager yang ada di layout main.xml.
Seperti kita ketahui layout main.xml ditampilkan oleh class mainActivity.java jadi kita akan mengubah isi file mainActivity.java.

Ubah dari extends Activity menjadi 'FragmentActivity'.
Import class FragmentActivity dari support library v4.

buat 3 variable private 

private Fragmentmanager fm;

private ViewPager vp;

private Adapter adapter;

 Jika ada error seperti ss di atas, hapus atau comment line import android.app.*;

Fragmentmanager akan kita gunakan untuk membuat object adapter (pada class adapter yg kita buat tadi constructornya meminta parameter fragmentmanager).
Viewpager adalah pager yang akan kita isi dengan adapter tadi.

Inisialisasi ketiga variable tadidi dalam method oncreate().

dan set adapter ke viewpager.

Ok, selesai sudah,,,,,sekarang waktunya kita compile projectnya. dan liat hasilnya. Jika tidak ada keslahan maka hasilnya seperti ss berikut ini.

Download apk demonya

Download source code

Referensi :
http://developer.android.com/reference/android/support/v4/view/ViewPager.html

Cara Membuat Custom Font di Android

Download contoh apk

Hallo sobat android mania, setelah pada postingan sebelumnya kita telah belajar cara membuat RecyrcleView dan CardView pada kesempatan kali ini mari kita sama-sama belajar cara membuat custom font. Textview dengan custom font.

Kita akan belajar membuat custom font dengan cara menyimpan file-file font yang akan kita pakai di folder assets aplikasi kita.

Prosesnya sangat simple.
Secara garis besar yaitu kita tinggal bikin object TypeFace baru dengan perintah:
TypeFace typeFace =TypeFace.createFromAssets(AssetManager, "namafileDiAasets");

Kemudian typeface tersebut kita terapkan ke object TextView yang ingin kita ubah jenis fontnya.
Perintahnya
TextView.setTypeFace(typeFace);

Ok langsung saja kita mulai dengan membuat proyek baru.

Buat Project Baru
Buat proyek baru dengan rincian sebagai berikut
Nama app : Custom_Font
Nama package : inyong.contoh.customfobt

Tambahkan File-file Font
Masuk ke folder app/src/main/ dan buat folder assets jika belum ada.
Kemudian masuk ke folder asssets yang baru saja kita buat kemudian buat folder lagi di dalamnya. Nama foldernya bebas. Dalam contoh ini kita namai foldernya fonts.
Copy file-file font (file berformat ttf) yang akan digunakan ke dalam folder assets/fonts/

Mengatur layout
Dalam contoh ini kita akan menampilkan pilihan fontnya menggunakan listview.
Saat klik pada item di listview textview utama akan kita set dengan typeface sesuai dengan urutan item yang diklik.

Ubah file res/layout/main.xml menjadi seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
android:gravity="center_horizontal">

<TextView
android:id="@+id/mainTextView"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="Android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60sp"/>
<ListView
android:id="@+id/mainListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

Membuat Adapter Untuk ListView
Masuk ke folder src/main/java/inyong/contoh/customfont/ dan buat class baru dengan nama AdapterListView. Kemudian edit dan masukkan code berikut:

package inyong.contoh.customfont;

import android.view.*;

import android.widget.*;

import java.util.*;

import android.content.*;

import android.content.res.*;

import java.io.*;

import android.graphics.*;

public class AdapterListView extends BaseAdapter

{

private Context context;

private String[] listFontDiAsset;

private AssetManager assetManager;

public AdapterListView(Context context){

this.context=context;

assetManager=context.getAssets();

try

{

listFontDiAsset = assetManager.list("fonts");

}

catch (IOException e)

{

listFontDiAsset=new String[0];

}

}

@Override

public int getCount()

{

// TODO: Implement this method

return listFontDiAsset.length;

}

@Override

public Object getItem(int p1)

{

// TODO: Implement this method

return Typeface.createFromAsset(assetManager,"fonts/"+listFontDiAsset[p1]);

}

@Override

public long getItemId(int p1)

{

// TODO: Implement this method

return p1;

}

@Override

public View getView(int posisi, View view, ViewGroup p3)

{

// TODO: Implement this method

TextView textView=new TextView(context);

textView.setPadding(20,20,20,20);

textView.setTextSize(20f);

textView.setText(listFontDiAsset[posisi]);

textView.setTypeface(Typeface.createFromAsset(assetManager,"fonts/"+listFontDiAsset[posisi]));

return textView;

}

}

Sesuaikan MainActivity
Langkah terakhir, ubah isi file MainActivity.java menjadi seperti berikut:

package inyong.contoh.customfont;

import android.app.*;
import android.os.*;
import android.widget.*;
import android.view.*;
import android.graphics.*;

public class MainActivity extends Activity
{
private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
textView=(TextView)findViewById(R.id.mainTextView);

ListView listView=(ListView)findViewById(R.id.mainListView);

final AdapterListView adapterKu=new AdapterListView(this);

listView.setAdapter(adapterKu);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> p1, View p2, int posisi, long p4)
{
// TODO: Implement this method
textView.setTypeface((Typeface)adapterKu.getItem(posisi));
}
});
    }
}


Compiling...
Ok sekarang kita compile proyeknya dan liat hasilnya.
Jika tidak ada error tampilannya seperti berikut dan saat klik pada item di listview font textview akan berubah sesuai pilihan yang diklik.

Download contoh apk

Download source code

Baca juga tutorial Membuat ViewPager dan Memahaminya

Cara Membuat RecyclerView dan CardView di Android

Download apk yang sudah jadi

Setelah pada postingan sebelumnya kita telah membahas Cara Membuat Custom ListView. Kali ini mari kita bersama - sama belajar membuat RecyclerView sekaligus dikombinasikan dengan CardView.

RecyclerView dan CardView adalah fitur baru yang diperkenalkan di android 5.+ (Android L). Namun demikian, kita masih dapat menerapkan fitur baru ini pada android di bawah Lolipop dengan bantuan support libary.

'com.android.support:cardview-v7:+' 'com.android.support:recyclerview-v7:+'

RecyclerView bisa kita katakan sebagai versi upgrade dari ListView, karena RecyclerView sifat dan penggunaannya hampir sama dengan ListView. Namun, RecyclerView lebih kompleks.

Pada ListView untuk meningkatkan performa kita bisa memakai ViewHolder di adapternya. Namun juga bisa tanpa menggunakan ViewHolder sama sekali.

Sedangkan di RecyclerView kita tidak ada pilihan selain harus menggunakan ViewHolder

Ok, mari kita mulai membuat aplikasi sederhana untuk mencoba mempadukan RecyclerView dan CardView.

Buat Project Gradle Baru

Buat proyek baru dengan rincian:
Nama app : Contoh_Recycler_CardView
Nama package : inyong.contoh.recyclercardview'

Tambahkan Library
Masuk ke folder app, dan klik pada Add to Project...
Kemudian dari dialog yg muncul pilih
com.android.support:cardview-v7:+'

Klik ok pada dialog konfirmasi yang muncul berikutnya.

Ulangi langkah diatas untuk menambahkan library
com.android.support:recyclerview-v7:+'

Jika saat klik Add to Project...
Tidak ada pilihan library di atas itu artinya di folder sdcard/.aide/ blm tersimpan library tersebut.
Solusinya masuk ke folder app (di project saat ini) dan edit file build.gradle.
Edit bagian dependencies dan samakan menjadi seperti berikut

dependencies {
compile 'com.android.support:cardview-v7:+'
compile 'com.android.support:recyclerview-v7:+'
    compile fileTree(dir: 'libs', include: ['*.jar'])
}

Kemudian simpan filenya. Begitu disimpan aide akan mendownload librarynya. Ada kemungkinan aide tidak hanya mendownload kedua library itu tapi seluruh support library. Ukurannya agak besar jadi harus sabar kalo koneksinya lelet. Tp setelah seluruh support library ada di aide kita selanjutnya jika kita butuh kita tinggal pake gak perlu download lagi.
Ok kembali ke laptop,.... Eh proyek :)

Buat layout untuk RecyrcleView

Pada contoh ini saya akan tempatkan RecyrcleViewnya di main.xml di bawah tulisan Hello World

Masuk ke folder src/app/main/res/layout dan edit file main.xml

Ubah isinya menjadi seperti berikut:

Buat Layout Untuk CardViewnya

Masih di folder layout buat file xml baru dengan nama list_cardview_item.xml dan masukkan code berikut:

Buat Class Model
Sama seperti cara membuat custom listview di sini juga diperlukan class model untuk menghandle setiap item pada list.
Masuk ke folder src/main/java/inyong.contoh.recyclercardview/
Buat class baru dengan nama DataModel.java lalu edit isinya seperti berikut

package inyong.contoh.recyclercardview;

public class DataModel

 {
protected String namaDepan;
protected String namaBelakang;
protected String website;

}

Buat class ViewHolder
Masih di folder yang sama buat class baru dengan nama DataModelViewHolder.java class ini harus meng-extends RecyclerView.ViewHolder.

Edit dan copas code berikut

package inyong.contoh.recyclercardview;
import android.support.v7.widget.*;
import android.view.*;
import android.widget.*;
import inyong.contoh.recyclercardview.*;

public class DataModelViewHolder extends RecyclerView.ViewHolder {
protected TextView vNamaDepan;
protected TextView vNamaBelakang;
protected TextView vWebsite;
protected TextView vTitle;

public DataModelViewHolder(View v) {
super(v);
vNamaDepan =  (TextView) v.findViewById(R.id.txtName);
vNamaBelakang = (TextView)  v.findViewById(R.id.txtSurname);
vWebsite = (TextView)  v.findViewById(R.id.txtEmail);
vTitle = (TextView) v.findViewById(R.id.title);
}
}

Membuat Adapter
Seperti halnya ListView adapter di sini juga digunakan sebagian penghubung antara Object RecyclerView dengan data yang ingin di tampilkan. Dalam hal ini berupa list dari CardView

Buat class baru dengan nama RecyclerViewAdapter.java dan ubah isinya menjadi

package inyong.contoh.recyclercardview;

import android.support.v7.widget.*;
import android.view.*;
import inyong.contoh.recyclercardview.*;
import java.util.*;

public class RecyclerViewAdapter extends RecyclerView.Adapter<DataModelViewHolder>
{

    private List<DataModel> contactList;

    public RecyclerViewAdapter(List<DataModel> contactList) {
this.contactList = contactList;
    }

    @Override
    public int getItemCount() {
return contactList.size();
    }

    @Override
    public void onBindViewHolder(DataModelViewHolder contactViewHolder, int i) {
        DataModel dataModel = contactList.get(i);
        contactViewHolder.vNamaDepan.setText(dataModel.namaDepan);
        contactViewHolder.vNamaBelakang.setText(dataModel.namaBelakang);
        contactViewHolder.vWebsite.setText(dataModel.website);
        contactViewHolder.vTitle.setText(dataModel.namaDepan + " " + dataModel.namaBelakang);
}

@Override
public DataModelViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.list_cardview_item, viewGroup, false);

        return new DataModelViewHolder(itemView);
}
}

Menghubungkan Antara Object RecyclerView dan Smua Class Pendukungnya
Untuk hal ini kita perlu edit MainActivity.java
Menambahkan data pada recyclerview diperlukan LinearLayoutManager yang diperlukan oleh RecyclerView untuk mengatur setiap item (child) pada listnya. Jadi sebelum kita menerapkan adapter, kita harus terlebih dulu menge-set LinearLayoutManagernya.

Untuk lebih jelasnya isi dari MainActivity pada contoh ini adalah sebagai berikut:

package inyong.contoh.recyclercardview;

import android.app.*;
import android.os.*;
import android.support.v7.widget.*;
import android.view.*;
import java.util.*;

public class MainActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

//inisialisasi object recyclerview yang ada di layout
RecyclerView recycleView = (RecyclerView) findViewById(R.id.main_recyclerview);
recycleView.setHasFixedSize(true);

//buat object Linear layout manager dan terapkan ke recycler view
LinearLayoutManager llm = new LinearLayoutManager(this);
llm.setOrientation(LinearLayoutManager.VERTICAL);
recycleView.setLayoutManager(llm);

//bikin list untuk percobaan
//listnya berupa object DataModel
List<DataModel> listTest=new ArrayList<DataModel>();
//bikin object DataModel disini untuk dipake dalam loop
//untuk menghindari pembuatan object DataModel dalam proses loop.
DataModel dataModel;

for (int i=0;i < 100;i++)
{
dataModel = new DataModel();
dataModel.namaDepan = i + " Supri";
dataModel.namaBelakang = "Yadi";
dataModel.website = "email : ?, blog : tutorial-aide.blogspot.com ";

listTest.add(dataModel);
}
//buat adapter dari hasil pembuatan list sebanyal 100 item DataModel di atas
RecyclerViewAdapter recyclerViewAdapter=new RecyclerViewAdapter(listTest);
//terapkan adapter yg baru saja kita buat ke objeck RecyclerViewnya
recycleView.setAdapter(recyclerViewAdapter);
//selesai.... :) :) :)
}

}

Compiling.....
Ok sekarang coba compile dan liat hasilnya.

Baca juga tutorial Cara membuat cutom font di android

Download
Apk dari project ini : download
Source code : download

Reference:

https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html

https://developer.android.com/reference/android/support/v7/widget/CardView.html

https://developer.android.com/training/material/lists-cards.html

Membuat Custom ListView Secara Mudah

Download, install dan rasakan dulu apk yang udah jadinya dari tutorial ini
Apk_Contoh.apk

Setelah sebelumnya kita telah membahas
Cara Membuat Aplikasi Hello World menggunakan AIDE
Sekarang mari kita sama - sama belajar membuat custom ListView.

Langsung Saja Berikut Langkah - Langkah Membuat Custom ListView Menggunakan AIDE

Buat project baru dengan nama "Apk_Contoh" dan nama Package "inyong.app.contoh".

Edit file main.xml dan tambahkan object ListView.
Masuk ke folder src/main/res/layout dan ubah isi file main.xml menjadi seperti berikut:

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

android:gravity="center"

    android:orientation="vertical">

    <TextView

        android:text="@string/hello_world"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

<ListView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/mainListView"/>

</LinearLayout>

Masih di dalam folder layout, buat file xml baru dengan nama list_item.xml kemudian edit dan masukkan code berikut:

<?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="wrap_content"

android:orientation="horizontal"

android:padding="10dp"

android:layout_gravity="center_vertical">

<ImageView

android:layout_width="40dp"

android:layout_height="40dp"

android:scaleType="fitCenter"

android:adjustViewBounds="true"

android:id="@+id/image"

android:layout_gravity="center_vertical"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginLeft="10dp"

android:orientation="vertical">

<TextView

android:layout_height="wrap_content"

android:text="Medium Text"

android:textAppearance="?android:attr/textAppearanceMedium"

android:layout_width="wrap_content"

android:id="@+id/text_utama"

android:textColor="#9C4E00"

android:textStyle="bold"/>

<TextView

android:layout_height="wrap_content"

android:text="Text"

android:layout_width="wrap_content"

android:id="@+id/text_kecil"

android:textColor="#E90D00"/>

</LinearLayout>

</LinearLayout>

Sekarang masuk ke folder src/main/java/inyong/app/contoh/.

Buat class baru dengan nama ItemKu.java. File ini akan kita gunakan untuk menghandle setiap item pada ListView.

Edit file ItemKu.java dan isikan code berikut:

package inyong.app.contoh;
import android.graphics.drawable.*;

public class ItemKu
{
 private String stringUtama;
 private String stringKecil;
 private Drawable gambar;

 public void setStringUtama(String stringUtama)
 {
  this.stringUtama = stringUtama;
 }

 public String getStringUtama()
 {
  return stringUtama;
 }

 public void setStringKecil(String stringKecil)
 {
  this.stringKecil = stringKecil;
 }

 public String getStringKecil()
 {
  return stringKecil;
 }


 public void setGambar(Drawable gambar)
 {
  this.gambar = gambar;
 }

 public Drawable getGambar()
 {
  return gambar;
 }}

Sekarang buat class satu lagi dengan nama AdapterKu.java. Class ini bertugas sebagai adapter untuk menghubungkan data (yg berupa list (daftar) dari object ItemKu) dengan Object ListView yang ada di main.xml.

Edit dan masukkan code berikut:

package inyong.app.contoh;
import android.content.*;
import android.view.*;
import android.widget.*;
import java.util.*;

public class AdapterKu extends BaseAdapter
{

 private ArrayList listKu;
 private LayoutInflater layoutInflaterKu;

 public AdapterKu(Context c, ArrayList list)
 {
  this.listKu = list;
  this.layoutInflaterKu = LayoutInflater.from(c);
 }

 @Override
 public int getCount()
 {
  // TODO: Implement this method
  return listKu.size();
 }

 @Override
 public Object getItem(int posisi)
 {
  // TODO: Implement this method
  return listKu.get(posisi);
 }

 @Override
 public long getItemId(int posisi)
 {
  // TODO: Implement this method
  return posisi;
 }

 private static class PenampungView
 {
  TextView textUtama;
  TextView textKecil;
  ImageView imageIkon;
 }

 @Override
 public View getView(int posisi, View view, ViewGroup p3)
 {
  // TODO: Implement this method
  PenampungView penampung;
  if (view == null)
  {
   view = layoutInflaterKu.inflate(R.layout.list_item, p3, false);
   penampung = new PenampungView();
   penampung.textUtama = (TextView)view.findViewById(R.id.text_utama);
   penampung.textKecil = (TextView)view.findViewById(R.id.text_kecil);
   penampung.imageIkon = (ImageView)view.findViewById(R.id.image);
   view.setTag(penampung);
  }
  else
  {
   penampung = (PenampungView)view.getTag();
  }

  penampung.textUtama.setText(listKu.get(posisi).getStringUtama());
  penampung.textKecil.setText(listKu.get(posisi).getStringKecil());
  penampung.imageIkon.setImageDrawable(listKu.get(posisi).getGambar());

  return view;
 }

}

Langkah terakhir yaitu kita edit MainActivity.java untuk menghubungkan class class yang tadi kita buat.

Edit class MainActivity.java dan rubah menjadi seperti berikut:

package inyong.app.contoh;

import android.app.*;
import android.os.*;
import java.util.*;
import android.widget.*;
import android.graphics.drawable.*;

public class MainActivity extends Activity
{
 private ListView listViewKu;
 private ArrayList listData;
 private AdapterKu adapterKu;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  listViewKu = (ListView)findViewById(R.id.mainListView);
  listData=new ArrayList();
  adapterKu = new AdapterKu(this, listData);
  listViewKu.setAdapter(adapterKu);

  testingSetUpListData();
    }

 private void testingSetUpListData()
 {
  String[] textUtamaTest={"Mobil","Motor","Kereta","Pesawat Terbang","Blogge Inyong"};
  String[] textKecilTest={"Roda 4","Roda dua","Roda banyak","Roda gak tau","tutorial-aide.blogspot.com"};

  ItemKu item;
  Drawable gambar=getResources().getDrawable(R.drawable.ic_launcher);
  for (int i=0;i < textUtamaTest.length;i++)
  {
   item = new ItemKu();
   item.setGambar(gambar);
   item.setStringUtama(textUtamaTest[i]);
   item.setStringKecil(textKecilTest[i]);
   listData.add(item);
  }

  adapterKu.notifyDataSetChanged();
 }
}

Sekarang Compile projectnya dengan meng-klik tombol Run. Dan Kita tunggu sejenak sambil berdoa semoga gak ada error atau kesalahan. Hehehe....

Jika tidak ada error maka aplikasi langsung terinstall dan saat terbuka tampilannya seperti berikut.

Berikut source code dan apk jadinya dari tutor ini silakan download dan mainkan.

Baca juga Cara Membuat RecyclerView Dan CardView

Download :
Apk_Conthoh.apk
Apk_Contoh.source_code (186 KB)

Reference:

http://developer.android.com/guide/topics/ui/layout/listview.html
http://developer.android.com/reference/android/widget/BaseAdapter.html