Membuat Aplikasi Android Recyclerview Dan Menampilkan Gambar Dengan Glide

Oleh Pojok Guru

Rabu, 24 Agustus 2016

Bagikan :

Tweet

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 memakai objek Glide,

RecyclerView ialah teknologi gres dari ListView. RecyclerView mempunyai kelebihan yang membuatnya lebih gampang untuk diatur, tampilan dari RecyclerView juga lebih anggun alasannya bersifat fleksibel serta animasi tampil dan hilang objek yang lebih bagus.

CardView ialah sebuah view atau widget yang menawarkan tampian menyerupai kertas yang mengambang pada layar. Tampilan ini biasanya dipakai untuk menampilkan info berupa teks atau gambar di dalamnya. CardView sendiri termasuk dari bab UI Material Design.

Glide ialah image loader library yang direkomendasikan oleh google untuk penampil gambar dalam aplikasi. Dengan memakai library ini, pembuatan aplikasi akan lebih gampang dan balasannya pun menjadi lebih anggun alasannya library Glide mempunyai fitur lebih.

Membuat Project Baru

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

Mengistal Dependencies

Untuk mengistal library ke dalam project, pertama tambahkan dependencies di dalam build.grandle. Untuk kodenya menyerupai 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 semoga library sanggup 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 instruksi RecylerView menyerupai 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 instruksi untuk CadView, TextView, dan ImageView menyerupai 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 gres berjulukan ItemObject.java dan kodenya menyerupai 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 gres dengan nama Holder, caranya menyerupai gambar di bawah ini

Buat class gres dengan nama Holder.java, untuk kodenya menyerupai 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 gres dengan nama Adapter dan buat class gres dengan nama AdapterItem.java, untuk kodenya menyerupai 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, kemudian memasukkanya ke dalam adapter. Pada MainActivity.java, kodenya menyerupai 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/AVvXsEigpeS-mfLZw0Qh1A-0Q7gKUFnbEuR_RdiVB14gM2A-tZbX4LZs3fOiqDfPeChPnA87Smh78WOtysx1ZZNnR8OYrxpBkZLbkU4n9-TMI7DII4zq0nbdrrhq9b1uF-xM4DjVgktzJhxYYDQ/s1600/jupiter.jpg"));         itemObjects.add(new ItemObject("Saturnus", "16:33:50 19 Agustus 2016", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhog2HJVcLvSb2hLCFhCXBThwEfop1eeGR_LnI4eA-LSToKq4J66RF-JL0tQWjsS2qpatt8m9e8kbVV1M5e5Ib_7X4xnf9M_xKCy6o60YUlURDg2DdJD7N59HfBd5nDrhoRMh__KmYb_c9R/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 susukan internet kepada aplkasi dengan memasukkan permission pada AndroidManifest.xml, kodenya menyerupai berikut ini

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

Menjalankan Program

Jika semuanya sudah, pilih sajian Run 'app' dan tampilanya akan menyerupai berikut ini

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

Tag : Pemrograman, Pemrograman Android