Membuat Custom List View dengan gambar ~ Progammer's Blog

Hai coder, pada tuturial sebelumnya yang berjudul Membuat Splash Screen / Welcome Screen pada Android, telah saya jelaskan tentang cara membuat splash screen / welcome screen di android.

Pada artikel kali ini saya akan membuat tutorial tentang membuat Custom List View dengan gambar. Kita akan membuat aplikasi daftar harga mobil.

Membuat Project

Langkah pertama yang harus kita siapkan adalah Create New Project pada Android Studio dan pada menu pilihan Activity pilih Empty Activity.

Tunggu beberapa saat hingga proses selesai. Jika sudah, kita bisa lanjut ke tahap berikutnya yaitu membuat tampilan untuk aplikasi kita

Pada nantinya kita akan menggunakan CardView. CardView digunakan untuk memperbagus tampilan layout pada aplikasi kita. Untuk menggunakan CardView, kita harus menginstall dulu librarynya dengan memasukkan kode berikut ini pada file build.gradle (Module: app), untuk kodenya seperti berikut :

dependencies {
    ...
    compile 'com.android.support:appcompat-v7:24.1.1'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:cardview-v7:24.1.1'
}

Membuat Tampilan

Pada aplikasi ini kita akan tampilkan data pada komponen ListView. Sekarang buka file activity_main.xml dan tambahkan komponen ListView, untuk kodenya seperti 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"
    android:id="@+id/activity_main"
    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="id.co.horveno.customlistview.MainActivity">

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

Untuk tampilan aplikasi ini, kita akan menampilkan data harga mobil, harga, beserta spesifikasinya. Buat layout baru dan berinama list_item.xml dan tambahkan 1 komponen CardView, 4 komponen TextView dan 1 komponen ImageView. Buat file XML baru dengan nama list_item.xml pada Res(klik kanan)>lalu pilih new > android resource file. Untuk kodenya seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    >
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="260dp">
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:src="@mipmap/ic_launcher"
                    android:id="@+id/ListImage"/>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="4dp"
                    android:background="#AA000000"
                    android:layout_gravity="bottom|left"
                    android:layout_marginBottom="35dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="7 Penumpang"
                        android:textColor="@android:color/white"
                        android:id="@+id/textkapasitas"
                        android:textSize="20sp"
                        android:textStyle="bold"/>
                </LinearLayout>
            </FrameLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/re"
                android:layout_below="@+id/ListImage">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="DAIHATSU Sigra 1.0 D M/T"
                    android:textColor="@color/primarytext"
                    android:layout_margin="5dp"
                    android:id="@+id/textNama"
                    android:textSize="15dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Rp. 108.900.000"
                    android:textColor="@color/secondarytext"
                    android:layout_margin="5dp"
                    android:layout_below="@+id/textNama"
                    android:id="@+id/textHarga"
                    android:textSize="15dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2017"
                    android:textColor="@color/primarytext"
                    android:textStyle="bold"
                    android:layout_margin="5dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:id="@+id/texttahun"
                    android:textSize="15dp"/>

            </RelativeLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

Menyiapkan Data

Pada aplikasi ini, kita akan mendapatkan datanya secara offline (dengan array). Oleh karena itu, langsung saja kita buka file Strings.xml yang berada pada Res>Values>Strings.xml dan lengkapi kode berikut :

<resources>
    <string name="app_name">Custom List View</string>

    <!--String untuk nama-nama mobil-->
    <array name="namamobil">
        <item>DAIHATSU Sigra 1.0 D M/T</item>
        <item>SUZUKI Ertiga GL A/T</item>
        <item>HONDA Civic All New 1.5 ES Turbo A/T</item>
    </array>

    <!--String untuk harga mobil-->
    <array name="harga">
        <item>Rp. 108.900.000</item>
        <item>Rp. 215.000.000</item>
        <item>Rp. 480.000.000</item>
    </array>

    <!--String untuk tahun mobil-->
    <array name="tahun">
        <item>2017</item>
        <item>2017</item>
        <item>2017</item>
    </array>
    <array name="kapasitas">
        <item>7 Penumpang</item>
        <item>7 Penumpang</item>
        <item>5 Penumpang</item>
    </array>

</resources>

Membuat Logika Java

Langkah selanjutnya adalah membuat logika Java, Buka file MainActivity.java dan salin kode berikut :

package id.co.horveno.customlistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import android.widget.ListView;


public class MainActivity extends AppCompatActivity {
    int  img_mobil[] =  {
        R.drawable.sigra_blue,
        R.drawable.ertiga,
        R.drawable.cosmic_blue
    };
    ListView listView;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView)findViewById(R.id.ListView);

        //Mencari sumber data Array
        String[] namamobil = getResources().getStringArray(R.array.namamobil);
        String[] harga = getResources().getStringArray(R.array.harga);
        String[] tahun = getResources().getStringArray(R.array.tahun);
        String[] kapasitas = getResources().getStringArray(R.array.kapasitas);


        CustomAdapter adapter = new CustomAdapter(this, namamobil,harga,tahun,kapasitas,img_mobil);
        listView.setAdapter(adapter);
    }

    }

Jika sudah, maka langkah terakhir adalah membuat Adapter untuk ListView-nya. Adapter digunakan untuk memproses data. Adapter yang kita gunakan sesuai dengan kemauan kita, data yang akan muncul pada komponen yang berada di list_item.xml akan dikelola pada Adapter ini. Oke, buat file Java baru dengan nama CustomAdapter.java dan lengkapi kode berikut :

package id.co.horveno.customlistview;


import android.app.Activity;
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;

/**
 * Created by ASUS on 27/02/2017.
 */

public class CustomAdapter extends ArrayAdapter {
    Activity context;
    String[] namamobil;
    String[] harga;
    String[] tahun;
    String[] kapasitas;
    int[] img_mobil;

    public CustomAdapter(Activity context, String[]namamobil, String[]harga, String[]tahun, String[]kapasitas, int[] img_mobil) {
        super(context,R.layout.list_item,namamobil);
        this.context = context;
        this.namamobil = namamobil;
        this.harga = harga;
        this.tahun = tahun;
        this.kapasitas = kapasitas;
        this.img_mobil = img_mobil;


    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //Memanggil layout (inflate) list_item
        LayoutInflater inflater = context.getLayoutInflater();
        View list = inflater.inflate(R.layout.list_item, null, true);
        //Mengenalkan id yang ada pada layout list_item
        TextView mobil = (TextView)list.findViewById(R.id.textNama);
        TextView hargamobil = (TextView)list.findViewById(R.id.textHarga);
        TextView tahunmobil = (TextView)list.findViewById(R.id.texttahun);
        TextView kapasitaspenumpang = (TextView)list.findViewById(R.id.textkapasitas);
        ImageView gambar_mobil = (ImageView)list.findViewById(R.id.ListImage);
        //isi data sesuai dengan index array
        mobil.setText(namamobil[position]);
        hargamobil.setText(harga[position]);
        tahunmobil.setText(tahun[position]);
        kapasitaspenumpang.setText(kapasitas[position]);
        gambar_mobil.setImageResource(img_mobil[position]);

        return list;
    }


}

Menjalankan Aplikasi

Jika kode diatas sudah ada pada project kita, maka langkah terakhir adalah menjalankan aplikasi kita yang telah dibuat sebelumnya tadi. Jika sudah, maka ketika dijalankan kurang lebih akan seperti gambar berikut :

Oke sob, mungkin itu saja yang bisa saya sampaikan, kurang lebihnya mohon maaf, dan jangan sungkan untuk berkomentar di blog ini😆.

About ALVIN

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Adblock Detected

Progammer's Blog

Membuat Custom List View dengan gambar

About ALVIN

Related Post

1 komentar: