Membuat Aplikasi Android RecyclerView dan Menampilkan Gambar dengan Glide

Hai sobat, pada artikel kemarin yang berjudul Membuat Apikasi RecyclerView Sederhana, telah dijelaskan cara menampilkan list item ke dalam objek RecyclerView dan CardView. Dan kali pada artikel kali ini akan dijelaskan bagaimana menampilkan list data dengan gambar menggunakan objek Glide,

RecyclerView adalah teknologi baru dari ListView. RecyclerView memiliki kelebihan yang membuatnya lebih mudah untuk diatur, tampilan dari RecyclerView juga lebih bagus karena bersifat fleksibel serta animasi tampil dan hilang objek yang lebih bagus.

CardView adalah sebuah view atau widget yang memberikan tampian seperti kertas yang mengambang pada layar. Tampilan ini biasanya digunakan untuk menampilkan informasi berupa teks atau gambar di dalamnya. CardView sendiri termasuk dari bagian UI Material Design.

Glide adalah image loader library yang direkomendasikan oleh google untuk penampil gambar dalam aplikasi. Dengan menggunakan library ini, pembuatan aplikasi akan lebih mudah dan hasilnya pun menjadi lebih bagus karena library Glide memiliki fitur lebih.

Membuat Project Baru

Pertama, buat project baru dengan nama Recycler Image, sedangkan untuk packagenya beri nama blogsetyaaji.com. Pilih Empty Activity saat berada di jendela pemilihan activity.

Mengistal Dependencies

Untuk mengistal library ke dalam project, pertama tambahkan dependencies di dalam build.grandle. Untuk kodenya seperti berikut ini

compile 'com.android.support:cardview-v7:24.0.0'
compile 'com.android.support:recyclerview-v7:24.0.0' 

Jika sudah ditambahkan, pilih sync project agar library bisa digunakan.

Membuat Tampilan

Tampilan untuk aplikasi RecyclerView dan CardView ini hanya membutuhkan 4 objek yaitu RecyclerView, CardView TextView, dan ImageView. Pada activity_main.xml hanya terdapat objek RecyclerView yang nanatinya memasukkan objek CardVIew beserta TextView dan ImageView yang ada pada carditem.xml.

Buka activity_main.xml dan tambahkan kode RecylerView seperti berikut ini

<?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.recyclerimage.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lst_item"/>

</RelativeLayout>

Buat layout baru, beri nama carditem.xml dan tambahkan kode untuk CadView, TextView, dan ImageView seperti berikut ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/carditem_planet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">

        <!--Biar teks layout ada di kanan gambar-->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/img_icon"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:src="@mipmap/ic_launcher"
                android:padding="3dp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_toRightOf="@id/img_icon"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true">

                <TextView
                    android:id="@+id/txt_judul"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Ini Judul"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/txt_waktu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Ini Waktu"
                    android:textSize="16sp" />

            </LinearLayout>

        </RelativeLayout>

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

</RelativeLayout> 

Membuat Model Objek

Model objek digunkan untuk menyimpan teks nama, waktu dan gambar sebagai string.

Buat class baru bernama ItemObject.java dan kodenya seperti berikut

package com.blogsetyaaji.recyclerimage;

/**
 * Created by AJISETYA
 */
public class ItemObject {

    public String strJudul, strWaktu, strgambar;

    public ItemObject(String strJudul, String strWaktu, String strgambar) {
        this.strJudul = strJudul;
        this.strWaktu = strWaktu;
        this.strgambar = strgambar;
    }
}

Membuat Holder

Buat package baru dengan nama Holder, caranya seperti gambar di bawah ini

Buat class baru dengan nama Holder.java, untuk kodenya seperti di bawah ini

package com.blogsetyaaji.recyclerimage.Holder;

import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import com.blogsetyaaji.recyclerimage.R;

/**
 * Created by AJISETYA
 */
public class HolderItem extends RecyclerView.ViewHolder{
    public TextView txt_judul, txt_waktu;
    public ImageView img_icon;


    public HolderItem(View itemView) {
        super(itemView);

        /*mangenalkan objek*/
        txt_judul = (TextView) itemView.findViewById(R.id.txt_judul);
        txt_waktu = (TextView) itemView.findViewById(R.id.txt_waktu);
        img_icon = (ImageView) itemView.findViewById(R.id.img_icon);
    }
}

Membuat Adapter

Adapter ini yang akan mengatur objek RecyclerView dengan memasukkan ItemObject sebagai ArrayList dan Context sebagai constructor. Buat package baru dengan nama Adapter dan buat class baru dengan nama AdapterItem.java, untuk kodenya seperti berikut ini

package com.blogsetyaaji.recyclerimage.Adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.blogsetyaaji.recyclerimage.Holder.HolderItem;
import com.blogsetyaaji.recyclerimage.ItemObject;
import com.blogsetyaaji.recyclerimage.R;
import com.bumptech.glide.Glide;

import java.util.List;

/**
 * Created by AJISETYA.
 */
public class AdapterItem extends RecyclerView.Adapter<HolderItem> {

    Context context;
    List<ItemObject> itemObjects;

    public AdapterItem(Context context, List<ItemObject> itemObjects) {
        this.context = context;
        this.itemObjects = itemObjects;
    }

    @Override
    public HolderItem onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.carditem, null);
        HolderItem holderItem=new HolderItem(view);
        return holderItem;
    }

    @Override
    public void onBindViewHolder(HolderItem holder, int position) {
        holder.txt_judul.setText(itemObjects.get(position).strJudul);
        holder.txt_waktu.setText(itemObjects.get(position).strWaktu);
        Glide.with(context)
                .load(itemObjects.get(position).strgambar)
                .placeholder(R.mipmap.ic_launcher)
                .into(holder.img_icon);

    }

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

Membuat Activity

Di dalam activity, nama planet, waktu, dan url gambar didefinisikan di dalam array itemObject, lalu memasukkanya ke dalam adapter. Pada MainActivity.java, kodenya seperti berikut

package com.blogsetyaaji.recyclerimage;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.blogsetyaaji.recyclerimage.Adapter.AdapterItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView list_item;
    private android.support.v7.widget.LinearLayoutManager LinearLayoutManager;
    private List<ItemObject> itemObjects;
    private AdapterItem adapter;

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

        /*casting variable*/
        list_item = (RecyclerView)findViewById(R.id.lst_item);

        /*memasukkan layout ini ke recyclerView*/
        LinearLayoutManager = new LinearLayoutManager(this);
        list_item.setLayoutManager(LinearLayoutManager);


        itemObjects = new ArrayList<>();
        itemObjects.add(new ItemObject("Merkurius", "16:33:50 19 Agustus 2016", "https://sulchana.files.wordpress.com/2013/04/merkurius.jpg?w=584"));
        itemObjects.add(new ItemObject("Venus", "16:33:50 19 Agustus 2016", "http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/AW_Venus_nli6oy.jpg"));
        itemObjects.add(new ItemObject("Bumi", "16:33:50 19 Agustus 2016", "https://hanifweb.files.wordpress.com/2013/04/bumi.jpg"));
        itemObjects.add(new ItemObject("Mars", "16:33:50 19 Agustus 2016", "http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/Mars_ICE_CAP_BACK0000_ozkwko.jpg"));
        itemObjects.add(new ItemObject("Yupiter", "16:33:50 19 Agustus 2016", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g1nbo7pJkQcsOnXPF53B19icyr77uth3Ad85nKD-C_4aiHINpkLsfYIyGMEGau-s2wPhMDa1NTBYoUndrgki_mseZuRBNGcuwRzYMfvUk_xhIX-w9Y7gTkQYSBfx1aA6RLfKFljY1cc/s1600/jupiter.jpg"));
        itemObjects.add(new ItemObject("Saturnus", "16:33:50 19 Agustus 2016", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeo-Y3vd4ISnjc_ItLi09ZtPIE1puAjVaOV2rjoA8mL1_XO19Q7seFOpdJFKzmaJ3ET2fFbqTNz3i5rFyrQPPdX3OoYxHkXM3f-6j5p7VW5XASgtFrQrQUDjFRdqzm7CRKqWO7tPjpXYnU/s1600/saturn.png"));
        itemObjects.add(new ItemObject("Uranus", "16:33:50 19 Agustus 2016", "https://s2.graphiq.com/sites/default/files/600/media/images/t2/Uranus_4394249.png"));
        itemObjects.add(new ItemObject("Neptunus", "16:33:50 19 Agustus 2016", "https://talithaqiute.files.wordpress.com/2014/05/neptunus.jpg?w=665"));
        itemObjects.add(new ItemObject("Pluto", "16:33:50 19 Agustus 2016", "https://openclipart.org/image/2400px/svg_to_png/223415/pluto.png"));
        /*membuat adapter*/
        adapter = new AdapterItem(getApplicationContext(),itemObjects);
        /*masukkan ke recyclerview*/
        list_item.setAdapter(adapter);
    }
}

Membuat Permission

Berikan akses internet kepada aplkasi dengan memasukkan permission pada AndroidManifest.xml, kodenya seperti berikut ini

 <uses-permission android:name="android.permission.INTERNET"/> 

Menjalankan Program

Jika semuanya sudah, pilih menu Run 'app' dan tampilanya akan seperti berikut ini

Sekian artikel tentang Aplikasi RecyclerView dan Menampilkan Gambar dengan Glide, semoga membantu dan bermanfaat, terus ikuti dan temuka artikel menarik lainya.