--> Skip to main content
Home Android Contoh Android Custom ListView untuk menampilkan Image dan Text

Contoh Android Custom ListView untuk menampilkan Image dan Text


Pada tutorial android sebelumnya, kita telah membahas bagaimana caranya untuk menampilkan data dalam bentuk list :"Contoh Android ListView".

Karena pada tutorial sebelumnya hanya menampilkan data berupa text, dalam tutorial android kali ini, kita akan mencoba membuat aplikasi android untuk dapat menampilkan kombinasi Image beserta Text dengan memanfaatkan bantuan dari container ListView.

Percobaan Pertama

1. Create project baru
Berinama Aplikasi Bendera pada Aplication name. Kemudian pada Target Android Device, pilihlah Phone and Table. Langkah selanjutnya anda melakukan seting untuk set Minimum SKD, disini kita memilih API 10 : Android 2.3.3 (Gingerbread). Kemudian untuk activitnya, pilih Blank Activity, serta biarkan nama defaultnya untuk Activity Name : MainActivity.

2. Buka file res/layout/content_main.xml
Dalam file ini kita akan tambahkan ListView, sehingga koding lengkap untuk file content_main.xml sebagai berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
    android:orientation="horizontal"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

3. Create file mylist.xml
Cara Untuk membuat(create) file mylist.xml, klik kanan pada folder res/layout.Kemudian pilih New->XML->Layout XML File seperti yang ditunjukkan oleh Gambar.1 dibawah ini :


(Gambar.1)

Kemudian berinama mylist.xml. Lalu copy past kode berikut ke dalam file mylist.xml :
<?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="horizontal">


    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/Itemname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:paddingTop="5dp"/>

</LinearLayout>

4. Buka file java/MainActivity.java
Dalam file ini, kita akan mengdefinisikan data-data dalam bentuk Array. Sehingga disini kita masih menggunakan ArrayAdapter. Namun bukannya hanya data dalam bentuk text yang akan ditampilkan, Image juga ikut disertakan, karena kita akan memanggil image yang terdapat pada file mylist.xml dalam kode android:src="@mipmap/ic_launcher". Kode lenkap untuk MainActivity.java :
package com.ilmudetil_blogspot.aplikasibendera;

import android.os.Bundle;
import android.app.ListActivity;
import android.widget.ArrayAdapter;


public class MainActivity extends ListActivity {
    String[] itemname ={
            "Indonesia",
            "Malasyia",
            "Thailand",
            "Filipina",
            "Kamboja",
            "Vietnam",
            "Singapura",
            "Laos"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.setListAdapter(new ArrayAdapter<String>(
                this, R.layout.mylist,
                R.id.Itemname,itemname));

    }

}

Sehingga aplikasi yang kita buat akan menghasilkan output seperti yang ditunjukkan oleh Gambar.2 dibawah ini



(Gambar.2)


Percobaan Kedua

Pada percobaan pertama, gambar yang dimunculkan akan selalu sama untuk setiap nama negara yang dimunculkan. Sekarang kita akan mencoba menampilkan gambar yang berbeda untuk setiap negara.

1. Lakukan langkah 1 seperti pada percobaan pertama.

2. Buka file res/layout/content_main.xml
Pada file ini kita akan tambahkan ListView, sehingga koding lengkap untuk file content_main.xml sebagai berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
    android:orientation="horizontal"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />


</LinearLayout>

3. Edit file mylist.xml
Edit file mylist.xml yang telah kita buat pada Percobaan Pertama, kemudian copy paste koding dibawah ini kedalam file mylist.xml
<?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="horizontal">


    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:padding="5dp" />

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

        <TextView
            android:id="@+id/item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:padding="2dp"
            android:textColor="#33CC33" />

    </LinearLayout>
</LinearLayout>

4. Menambah gambar bendera ke folder res/minimap
Tujuan langkah ke-4 ini adalah menambahkan gambar-gambar bendera setiap negara. Pada minimap sudah terdapat folder default ic_launcher. Biasanya setiap gambar kita tambahkan ke res/drawable pada IDE Android yang menggunakan Eclipse. Pada Android Studio kita letakkan pada res/minmap.

Silahkan copy file-file gambar kemudian paste ke folder res/minimap dan berinama, seperti yang ditunjukkan oleh Gambar.3 dibawah ini :


(Gambar.3)


Sehingga nantinya akan terdapat delapan gambar yang telah kita tambahkan seperti yang ditunjukkan oleh Gambar.4 dibawah ini :


(Gambar.4)


5. Create file BenderaAdapter.java
Untuk mengcreate BenderaAdapter.java, klik kanan pada nama package yang telah anda buat seperti yang ditunjukkan oleh Gambar.5 dibawah ini :


(Gambar.5)


Kemudian pilih New->Java Class dan berinama BenderaAdapter. Setelah itu copy paste koding dibawah ini ke file BenderaAdapter.java
package com.ilmudetil_blogspot.aplikasibendera;

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 android.support.v7.app.AppCompatActivity;


public class BenderaAdapter extends  ArrayAdapter<String>{

    private final AppCompatActivity context;
    private final String[] NamaNegara;
    private final Integer[] GbrBendera;

    public BenderaAdapter(AppCompatActivity context, String[] NamaNegara, Integer[] GbrBendera) {
        super(context, R.layout.mylist, NamaNegara);


        this.context=context;
        this.NamaNegara=NamaNegara;
        this.GbrBendera=GbrBendera;
    }

    public View getView(int position,View view,ViewGroup parent) {
        LayoutInflater inflater=context.getLayoutInflater();
        View rowView=inflater.inflate(R.layout.mylist, null,true);

        TextView txtTitle = (TextView) rowView.findViewById(R.id.item);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);


        txtTitle.setText(NamaNegara[position]);
        imageView.setImageResource(GbrBendera[position]);

        return rowView;

    };
}

6. Edit file MainActivity.java
Editi file MainActivity.java yang telah kita buat pada Percobaan Pertama, sehingga koding MainActivity.java menjadi :
package com.ilmudetil_blogspot.aplikasibendera;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    ListView list;
    String[] NamaNegara = {
            "Indonesia",
            "Malasyia",
            "Thailand",
            "Filipina",
            "Kamboja",
            "Vietnam",
            "Singapura",
            "Laos"
    };
    Integer[] GbrBendera={
            R.mipmap.indonesia,
            R.mipmap.malaysia,
            R.mipmap.thailand,
            R.mipmap.filipina,
            R.mipmap.kamboja,
            R.mipmap.vietnam,
            R.mipmap.singapura,
            R.mipmap.laos
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       BenderaAdapter adapter=new BenderaAdapter(this, NamaNegara, GbrBendera);
        list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);


        list.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                String Pilihitem = NamaNegara[+position];
                Toast.makeText(getApplicationContext(), Pilihitem, Toast.LENGTH_SHORT).show();

            }
        });


    }
}

Output dari percobaan kedua ini ditunjukkan oleh Gambar.6 dibawah ini :


(Gambar.6)

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar