Android Grid RecyclerView dan Menampilkan Gambar dengan Picasso

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

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.

Picasso adalah sebuah library yang berguna untuk mempercepat pengambilan gambar atau mempercepat aplikasi untuk menampilkan gambar. Selain itu, dengan menggunakan library picasso, seorang pembuat aplikasi android bisa cepat menyelesaikan tugasnya. Library Picasso juga memiliki fitur yang hampir sama dengan library Glide, untuk lebih jelasnya, silahkan bisa sobat baca di sini.

Membuat Project Baru

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

Menginstal Dependencies

Untuk bisa menggunakan library RecylerView dan Picasso, kita instal librarynya dengan memasukkan kode 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 kode di atas, sobat pilih sync project.

Membuat Tamplan

Untuk membuat tampilannya, hanya membutuhkan dua layout yaitu activity_main.xml dan row_layout.xml. activity_main.xml digunakan untuk menampilkan objek RecyclerView sedangkan row_layout.xml digunakan 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 digunakan untuk mengatur dan mengambil data ArrayList dengan menggunakan getter dan setter. Untuk membuat model class, pertama but package baru dengan nama Model, lalu di dalam package tersebut, buat class baru dengan nama Planet.java, dan untuk kodenya seperti 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 seperti artikel RecyclerView kemarin, adapter ini digunakan untuk mengambil layout pada row_layout.xml dan mengubah objek sesuai data, serta menampilkan gambar. Buat package baru dengan nama Adapter, lalu buat class baru dengan nama DataAdapter.java. Untuk kodenya seperti 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 seperti 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 final String nama_planets[] = {
            "Merkurius",
            "Venus",
            "Bumi",
            "Mars",
            "Yupiter",
            "Saturnus",
            "Uranus",
            "Neptunus",
            "Pluto"
    };

    private final 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/AVvXsEi0s1p16HTRBcWHdBJhbHo-cpVp1uF58k4KH4x2mUiw4IXUwV1aJZ3w4ND7J3Tsd2sueaW12b_8DWTTgbj_T8zFtY2IMlFk6_nUZ6VSJtzTCEgT3E6DQOFSavaEO9cFjW29FcNvFnpNtFUj/s1600/yupiter.png",
            "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeo-Y3vd4ISnjc_ItLi09ZtPIE1puAjVaOV2rjoA8mL1_XO19Q7seFOpdJFKzmaJ3ET2fFbqTNz3i5rFyrQPPdX3OoYxHkXM3f-6j5p7VW5XASgtFrQrQUDjFRdqzm7CRKqWO7tPjpXYnU/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 seperti di bawah ini ke AndroidManifest.xml

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

Menjalankan Program

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

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