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",
            "http://4.bp.blogspot.com/-5yrpfhL1O1k/UlkuVbEZNnI/AAAAAAAABws/Hi2USkvyDus/s1600/yupiter.png",
            "http://2.bp.blogspot.com/-kFVjaebe9QA/VVmxCGg3uEI/AAAAAAAAAJk/M7R6hU0zPkY/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.
Previous
Next Post »

5 komentar

Click here for komentar
5 June 2017 at 13:06 ×

mas kalo di sambung ke database cara nya gimana

Reply
avatar
Aji Setya
admin
5 June 2017 at 23:16 ×

silahkan mas pelajari di artikel link di bawah ini
http://babblecase.com/2gsL

kemudian ubah pengeturan recycler view dan layout manager di main activity jadi LinearLayoutManager..

semoga membantu hhee

Reply
avatar
9 June 2017 at 02:08 ×

di link itu udah sama ditail nya mas

Reply
avatar
18 August 2017 at 12:17 ×

Gan kalau itu kan pakek gambar kalau pakek video via embed gimana gan
#thanks

Reply
avatar
Aji Setya
admin
18 August 2017 at 22:58 ×

kalau embed video caranya banyak mas, bisa pakai imageview biasa atau youtube api kalau video dari youtube..

Reply
avatar

Terimakasih atas kunjunganya.
Silahkan berkomentar dan beri kritik serta saran.
Jangan lupa difollow.

ConversionConversion EmoticonEmoticon