Android Grid Recyclerview Dan Menampilkan Gambar Dengan Picasso

Oleh Pojok Guru

Rabu, 24 Agustus 2016

Bagikan :

Tweet

Hai sobat, pada artikel kemarin yang berjudul Membuat Aplikasi RecyclerView dan Menampilkan Gambar dengan Glide, telah dijelaskan cara menciptakan aplikasi android yang menampilkan list item dengan RecyclerView dan CardView serta menampilkan gambar dengan library Glide. Dan untuk kali ini akan dijelaskan cara menciptakan aplikasi android yang menampilkan grid RecyclerView dan menampilkan gambar memakai library Picasso.

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

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

Picasso yaitu sebuah library yang mempunyai kegunaan untuk mempercepat pengambilan gambar atau mempercepat aplikasi untuk menampilkan gambar. Selain itu, dengan memakai library picasso, seorang pembuat aplikasi android dapat cepat menuntaskan tugasnya. Library Picasso juga mempunyai fitur yang hampir sama dengan library Glide, untuk lebih jelasnya, silahkan dapat sahabat baca di sini.

Membuat Project Baru

Pertama buat project gres dengan nama Recycler Grid Image, sedangkan package beri nama blogsetyaaji.com

Menginstal Dependencies

Untuk dapat memakai library RecylerView dan Picasso, kita instal librarynya dengan memasukkan isyarat berikut ini ke build:grandle

 dependencies {     compile fileTree(include: ['*.jar'], dir: 'libs')     testCompile 'junit:junit:4.12'     compile 'com.android.support:appcompat-v7:24.0.0'     compile 'com.android.support:recyclerview-v7:24.0.0'     compile 'com.squareup.picasso:picasso:2.5.2'     compile 'com.android.support:design:24.0.0'     compile 'com.android.support:cardview-v7:24.0.0' } 

Jika sudah memasukkan isyarat di atas, sahabat pilih sync project.

Membuat Tamplan

Untuk menciptakan tampilannya, hanya membutuhkan dua layout yaitu activity_main.xml dan row_layout.xml. activity_main.xml dipakai untuk menampilkan objek RecyclerView sedangkan row_layout.xml dipakai untuk menampilkan data per list item, yaitu CardView, ImageView, dan TextView.

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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.recyclergridimage.MainActivity">       <android.support.v7.widget.RecyclerView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:id="@+id/card_recycler_view"         android:scrollbars="vertical"/>  </android.support.design.widget.CoordinatorLayout> 

 

row_layout.xml

 <?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_marginTop="10dp"     android:layout_marginLeft="5dp"     android:layout_marginRight="5dp">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">          <ImageView             android:id="@+id/img_planet"             android:adjustViewBounds="true"             android:layout_width="match_parent"             android:layout_height="wrap_content" />          <TextView             android:id="@+id/nm_planet"             android:layout_gravity="center"             android:textStyle="bold"             android:text="asa"             android:textSize="20dp"             android:layout_width="wrap_content"             android:layout_height="50dp"             android:gravity="center_vertical"/>     </LinearLayout>  </android.support.v7.widget.CardView> 

Membuat Model Class

Model class di sini dipakai untuk mengatur dan mengambil data ArrayList dengan memakai getter dan setter. Untuk menciptakan model class, pertama but package gres dengan nama Model, kemudian di dalam package tersebut, buat class gres dengan nama Planet.java, dan untuk kodenya menyerupai berikut

 package com.blogsetyaaji.recyclergridimage.Model;  /**  * Created by AJISETYA  */ public class Planet {     private String nama_planet;     private String url_planet;      public String getUrl_planet() {         return url_planet;     }      public void setUrl_planet(String url_planet) {         this.url_planet = url_planet;     }      public String getNama_planet() {         return nama_planet;     }      public void setNama_planet(String nama_planet) {         this.nama_planet = nama_planet;     } } 

 

Membuat Adapter

Sama menyerupai artikel RecyclerView kemarin, adapter ini dipakai untuk mengambil layout pada row_layout.xml dan mengubah objek sesuai data, serta menampilkan gambar. Buat package gres dengan nama Adapter, kemudian buat class gres dengan nama DataAdapter.java. Untuk kodenya menyerupai berikut ini

 package com.blogsetyaaji.recyclergridimage.Adapter;  import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView;  import com.blogsetyaaji.recyclergridimage.Model.Planet; import com.blogsetyaaji.recyclergridimage.R; import com.squareup.picasso.Picasso;  import java.util.ArrayList;  /**  * Created by AJISETYA  */ public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {      private ArrayList<Planet> planets;     private Context context;      public DataAdapter(Context context, ArrayList<Planet> planets) {         this.context = context;         this.planets = planets;     }      @Override     public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int i) {         View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_layout, parent, false);         return new ViewHolder(view);     }      @Override     public void onBindViewHolder(DataAdapter.ViewHolder holder, int position) {         holder.nama_planet.setText(planets.get(position).getNama_planet());         Picasso.with(context).load(planets.get(position).getUrl_planet()).resize(240, 240).into(holder.img_planet);     }      @Override     public int getItemCount() {         return planets.size();     }      public class ViewHolder extends RecyclerView.ViewHolder {         public ImageView img_planet;         public TextView nama_planet;          public ViewHolder(View itemView) {             super(itemView);              nama_planet = (TextView)itemView.findViewById(R.id.nm_planet);             img_planet = (ImageView)itemView.findViewById(R.id.img_planet);         }     } } 

 

Membuat Activity

Dalam MainActivity akan dimasukkan data ArrayList yang akan dimasukkan ke dalam Model Class kemudian dimasukkan ke dalam Adapter. Di dalam ArrayList, diberikan url gambar untuk ditampilkan oleh library Picasso. Untuk membuatnya, buak MainActivity.java dan buat kodenya menyerupai berikut ini

 package com.blogsetyaaji.recyclergridimage;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView;  import com.blogsetyaaji.recyclergridimage.Adapter.DataAdapter; import com.blogsetyaaji.recyclergridimage.Model.Planet;  import java.util.ArrayList;  public class MainActivity extends AppCompatActivity {      private tamat String nama_planets[] = {             "Merkurius",             "Venus",             "Bumi",             "Mars",             "Yupiter",             "Saturnus",             "Uranus",             "Neptunus",             "Pluto"     };      private tamat String url_planets[] = {             "https://sulchana.files.wordpress.com/2013/04/merkurius.jpg?w=584",             "http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/AW_Venus_nli6oy.jpg",             "https://hanifweb.files.wordpress.com/2013/04/bumi.jpg",             "http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/Mars_ICE_CAP_BACK0000_ozkwko.jpg",             "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK23rK4IcWQkmJEJes8BChHVXflNRVLpDdKyrNog8I4WTmAhymcxyNLmskwNn_BGxAyqx9HPuZsekYvSXLzDHC9Og9Vgr7IXqPZjnDxWQjn1KfGFkz2OdZjIo-Forx6pj_BQER-OTxoVyn/s1600/yupiter.png",             "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhog2HJVcLvSb2hLCFhCXBThwEfop1eeGR_LnI4eA-LSToKq4J66RF-JL0tQWjsS2qpatt8m9e8kbVV1M5e5Ib_7X4xnf9M_xKCy6o60YUlURDg2DdJD7N59HfBd5nDrhoRMh__KmYb_c9R/s1600/saturn.png",             "https://s2.graphiq.com/sites/default/files/600/media/images/t2/Uranus_4394249.png",             "https://talithaqiute.files.wordpress.com/2014/05/neptunus.jpg?w=665",             "https://openclipart.org/image/2400px/svg_to_png/223415/pluto.png"     };      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         tampilplanet();     }      private void tampilplanet() {         RecyclerView recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);         recyclerView.setHasFixedSize(true);         RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(),2);         recyclerView.setLayoutManager(layoutManager);          ArrayList<Planet> planet = prepareData();         DataAdapter adapter = new DataAdapter(getApplicationContext(),planet);         recyclerView.setAdapter(adapter);     }      private ArrayList<Planet> prepareData() {         ArrayList<Planet> planets = new ArrayList<>();         for(int i=0;i<nama_planets.length;i++){             Planet planet = new Planet();             planet.setNama_planet(nama_planets[i]);             planet.setUrl_planet(url_planets[i]);             planets.add(planet);         }         return planets;     } } 

 

Membuat Izin yang Diperlukan

Berikan izin untuk mengakses internet dengan memasukkan user permission menyerupai di bawah ini ke AndroidManifest.xml

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

Menjalankan Program

Jika semuanya sudah, pilih hidangan Run 'app', maka tampilanya akan menyerupai berikut ini

Demikian artikel tentang Android Grid RecyclerView dan Menampilkan Gambar dengan Picasso biar bermanfaat.

Tag : Pemrograman, Pemrograman Android