Listview Dengan Gambar Android Tutorial

Oleh Pojok Guru

Senin, 01 Agustus 2016

Bagikan :

Tweet

Pada artikel sebelumnya aku telah menjelskan cara menciptakan listview di android, dan kali ini aku akan memperlihatkan pola cara menambahkan komponen gambar ke dalam listview. Berikut penjelasanya

ListView pada android mempunyai banyak fungsi menyerupai seolah-olah menciptakan daftar data, daftar pilihan bahkan menampilkan isu yang sangat komplek dengan banyak sekali komponen di dalamnya. Untuk membuatnya kita perlu menyiapkan gambar yang ingin kita tampilkan, kalau sudah siap sahabat dapat mengikuti langkah pembuatannya di bawah ini

Pertama buat file project gres berjulukan ListView untuk package beri nama blogsetyaaji.com
Pada activity_main.xml, buat kodenya menyerupai berikut

 ml<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="com.blogsetyaaji.multipleactivity.MainActivity">      <ListView         android:id="@+id/mobilelist"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />  </RelativeLayout>

Setelah itu tambahkan satu file layout lagi dengan cara mengklik kanan folder layout > new > layout resource file, akan muncul jendela baru, beri nama dengan activity_list.

Untuk isyarat pada activity_list.xml, buat menyerupai 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">      <ImageView         android:id="@+id/imageView"         android:layout_width="75dp"         android:layout_height="75dp"         android:layout_marginBottom="1dp"         android:layout_marginLeft="10dp"         android:layout_marginRight="5dp"         android:layout_marginTop="1dp"         android:src="@mipmap/ic_launcher" />      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">          <TextView             android:id="@+id/menuItem"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginTop="3dp"             android:text="Medium Text"             android:textAppearance="?android:attr/textAppearanceMedium"             android:textSize="30sp" />          <TextView             android:id="@+id/menuLagi"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginTop="3dp"             android:text="Large text"             android:textAppearance="?android:attr/textAppearanceMedium"             android:textSize="20sp" />      </LinearLayout>  </LinearLayout>

Setelah selesai, sahabat tambahkan 1 lagi file java dengan cara mengklik kanan pada folder java > new > javaresource file, akan muncul jendela baru, beri nama dengan CostumListAdapter. Untuk kodenya silahkan buat menyerupai berikut

 package com.blogsetyaaji.listview;  import android.app.Activity; import android.text.Layout; 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.content.Context;  import org.w3c.dom.Text;  /**  * Created by AJISETYA on 7/30/2016.  */ public class CostumListAdapter extends ArrayAdapter<String>{     private simpulan Activity context;     private simpulan String[] menuItem;     private simpulan String[] menuLagi;     private simpulan Integer[] menuGambar;      public CostumListAdapter(Activity context, String[] menuItem, Integer[] menuGambar, String[] menuLagi) {         super(context, R.layout.activity_list, menuItem);         this.context = context;         this.menuItem = menuItem;         this.menuGambar = menuGambar;         this.menuLagi = menuLagi;     }      public View getView(int position, View view, ViewGroup parent){         LayoutInflater inflater = context.getLayoutInflater();         View rowView = inflater.inflate(R.layout.activity_list, null, true);          TextView textMenu = (TextView)rowView.findViewById(R.id.menuItem);         TextView textLagi = (TextView)rowView.findViewById(R.id.menuLagi);         ImageView imgMenu = (ImageView)rowView.findViewById(R.id.imageView);          textMenu.setText(menuItem[position]);         textLagi.setText(menuLagi[position]);         imgMenu.setImageResource(menuGambar[position]);          return rowView;     } }

Pindah ke MainActivity.java, buat kodenya sampai menyerupai berikut ini

 package com.blogsetyaaji.multipleactivity;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast;  public class Halaman1 extends AppCompatActivity {      String[] menuItem = {"Gamepad", "Keyboard", "Mouse", "Phone", "Camera", "Computer", "Headphone", "Headset", "Dock"};     Integer[] menuImage = {             R.drawable.gamepad,             R.drawable.keyboard,             R.drawable.mouse,             R.drawable.phone,             R.drawable.camera,             R.drawable.computer,             R.drawable.headphones,             R.drawable.headset,             R.drawable.dock};     String[] menuLagi = {"Alat untuk bermain game", "Alat untuk mengetik", "Alat untuk mengerakkan kursor", "Alat untuk menelepon",             "Alat untuk mengambil gambar", "Alat untuk banyak sekali keperluan", "Alat untuk mrndengarkan musik", "Alat untuk mendengarkan musik",             "Alat untuk menmpilkan gambar"};      ListView listView;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_halaman1);          CostumListAdapter adapter = new CostumListAdapter(this, menuItem, menuImage, menuLagi);         listView = (ListView)findViewById(R.id.mobilelist);         listView.setAdapter(adapter);          listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){             @Override             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                 Toast.makeText(getApplicationContext(), "Yang diklik ialah posisi ke : " + position, Toast.LENGTH_LONG).show();             }         });     } }

Jika sudah silahkan sahabat masukkan gambar yang tadi disiapkan dengan menyalin gambar ke dalam folder drawable. Setelah gambar siap silahkan sahabat jalankan aplikasinya dan tampilanya akan menyerupai gambar di bawah ini

Untuk menambahkan komponen gres di lstview, kita hanya perlu menambahkan objek gres di layout list dan memanggilnya di isyarat listview. Bisa juka kita memakai cara yang sama untuk komponen lain menyerupai radio button atau checkbox, tinggal sahabat kembangkan sendiri.
Dan itulah cara menambahkan komponen gambar pada ListView biar bermanfaat.

Tag : Pemrograman, Pemrograman Android