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
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
Buat layout baru, beri nama carditem.xml dan tambahkan kode untuk CadView, TextView, dan ImageView seperti berikut ini
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
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
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
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
Membuat Permission
Berikan akses internet kepada aplkasi dengan memasukkan permission pada AndroidManifest.xml, kodenya seperti berikut ini
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.
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/AVvXsEhwiKCcCQRQemUm9kPuMKxNRGcNjJd-uLaeMZgjnx3KsB1MdEypi_GG9peS18Q8yLRfwq46zyTMGJBDKG-6e-_nzk-Mu2YD-dDjHoNyw9o3G7jR3pm1oCrf255My9OlS7NufcCUAfVJfdw/s1600/jupiter.jpg"));
itemObjects.add(new ItemObject("Saturnus", "16:33:50 19 Agustus 2016", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvSIoRHIgGJeBnoBF0u3Ezp55tsmSIBwCRi4Nuc-hfz7rsFfNEJJCODGDHgF_tXBy-1UqUAkL-3A-60xFp94M5TFQ6pRSvIlXSJXjweVnZDov8i0so_MfFGNjgAkupTuwjwOGai0i1sZ2/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.