Hai, pada artikel sebelumnya yang berjudul Android Grid RecyclerVew dan Menampilkan Gambar dengan Picasso, telah dijelaskan cara membuat aplikasi android yang menampilkan data dengan grid layout menggunakan RecyclerView. Pada artikel tersebut juga diterangkan cara untuk menampilkan data dengan menggunakan library Picasso. Dan kali ini, akan dijelaskan cara menggunakan Retrofit di dalam aplikasi untuk mengambil json dan menampilkan data ke aplikasi.
Retrofit adalah library android yang dibuat oleh Squre yang digunakan sebagai REST Client pada Android, yang pasti akan memudahkan kita dalam programing. Karena kita tidak perlu lagi untuk membuat method-method sendiri untuk menggunakan REST Client API dari backend. Library ini menyediakan framework yang powerfull untuk authenticating dan berinteraksi dengan API dengan mengirimkan request menggunakan OkHTTP.
Menyiapkan API
Pada artikle ini kita akan menggunakan API dari sebuah website bernama
The Movie DB, website penyedia informasi tentang film dan juga menyediakan API secara gratis dengan syarat harus register terlebih dahulu.
Untuk mendapatkan API, masuk ke website tersebut, lalu pilih Sign Up. Selanjutnya masuk ke akun, lalu pilih menu API dan lakukan langkah sesuai dengan yang dibituhkan, jika sudah maka akan tampil data seperti ini
Membuat Project BaruPertama buat project baru dengan nama Retrofit HTTP Library. Pilih empty activity pada pilihan activity.
Membuat Request Pertama
Menginstal Library
Untuk menggunakan Retrofit, kiata harus menginstal terlebih dahulu library Retrofit dan library Gson. Library gson sendiri adalah library yang dilincurkan oleh Google untuk memparsing data json.
Buka build:grandle dan masukkan kode berikut ini, setelah itu pilih sync project
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.0.0'
// retrofit, gson
compile 'com.google.code.gson:gson:2.6.2'
compile 'com.squareup.retrofit2:retrofit:2.0.2'
compile 'com.squareup.retrofit2:converter-gson:2.0.2'
compile 'com.android.support:recyclerview-v7:24.0.0'
}
Membuat Model
Pertama, kita harus mengetahui tipe respon json yang akan kita terima. Buka link berikut ini
http://api.themoviedb.org/3/movie/top_rated?api_key=(api sobat). Maka kita akan mendapatkan 50 data film. Gunakan
JsonViewer untuk melihat struktur json. Setelah dibuka, salin seluruh data yang tampil ke dalam JsonViewer dan pilih tab Viewer. Dari situ kita bisa melihat struktur data seperti field dan parent data yang nantinya akan kita panggil dalam aplikasi ini
Masuk ke aplikasi Android Studio, klik kanan dan tambahkan package baru dengan nama Model, kemudian buat class baru dengan nama Movie.java dan buat kodenya seperti berikut ini
package com.blogsetyaaji.retrofithttplibrary.Model;
import com.google.gson.annotations.SerializedName;
import java.util.ArrayList;
import java.util.List;
/**
* Created by AJISETYA
*/
public class Movie {
@SerializedName("poster_path")
private String posterPath;
@SerializedName("adult")
private boolean adult;
@SerializedName("overview")
private String overview;
@SerializedName("release_date")
private String releaseDate;
@SerializedName("genre_ids")
private List<Integer> genreIds = new ArrayList<Integer>();
@SerializedName("id")
private Integer id;
@SerializedName("original_title")
private String originalTitle;
@SerializedName("original_language")
private String originalLanguage;
@SerializedName("title")
private String title;
@SerializedName("backdrop_path")
private String backdropPath;
@SerializedName("popularity")
private Double popularity;
@SerializedName("vote_count")
private Integer voteCount;
@SerializedName("video")
private Boolean video;
@SerializedName("vote_average")
private Double voteAverage;
public Movie(String posterPath, boolean adult, String overview, String releaseDate, List<Integer> genreIds, Integer id,
String originalTitle, String originalLanguage, String title, String backdropPath, Double popularity,
Integer voteCount, Boolean video, Double voteAverage) {
this.posterPath = posterPath;
this.adult = adult;
this.overview = overview;
this.releaseDate = releaseDate;
this.genreIds = genreIds;
this.id = id;
this.originalTitle = originalTitle;
this.originalLanguage = originalLanguage;
this.title = title;
this.backdropPath = backdropPath;
this.popularity = popularity;
this.voteCount = voteCount;
this.video = video;
this.voteAverage = voteAverage;
}
public Double getVoteAverage() {
return voteAverage;
}
public void setVoteAverage(Double voteAverage) {
this.voteAverage = voteAverage;
}
public String getPosterPath() {
return posterPath;
}
public void setPosterPath(String posterPath) {
this.posterPath = posterPath;
}
public boolean isAdult() {
return adult;
}
public void setAdult(boolean adult) {
this.adult = adult;
}
public String getOverview() {
return overview;
}
public void setOverview(String overview) {
this.overview = overview;
}
public String getReleaseDate() {
return releaseDate;
}
public void setReleaseDate(String releaseDate) {
this.releaseDate = releaseDate;
}
public List<Integer> getGenreIds() {
return genreIds;
}
public void setGenreIds(List<Integer> genreIds) {
this.genreIds = genreIds;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getOriginalTitle() {
return originalTitle;
}
public void setOriginalTitle(String originalTitle) {
this.originalTitle = originalTitle;
}
public String getOriginalLanguage() {
return originalLanguage;
}
public void setOriginalLanguage(String originalLanguage) {
this.originalLanguage = originalLanguage;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getBackdropPath() {
return backdropPath;
}
public void setBackdropPath(String backdropPath) {
this.backdropPath = backdropPath;
}
public Double getPopularity() {
return popularity;
}
public void setPopularity(Double popularity) {
this.popularity = popularity;
}
public Integer getVoteCount() {
return voteCount;
}
public void setVoteCount(Integer voteCount) {
this.voteCount = voteCount;
}
public Boolean getVideo() {
return video;
}
public void setVideo(Boolean video) {
this.video = video;
}
}
Di dalam class Moview, fild dala data json dideklarasikan dan dijadikan variable untuk diproses di dalam aplikasi. Dalam class tersebut juga menggunakan getter dan setter untuk mengatur dan mendapatkan data.
Selanjutnya buat class baru dengan nama MoviewResponse.java. Class ini digunakan untuk mendapatkan data tambahan yang nanatinya dibutuhkan dalam aplaikasi. Untuk kodenya seperti berikut ini
package com.blogsetyaaji.retrofithttplibrary.Model;
import com.google.gson.annotations.SerializedName;
import java.util.List;
/**
* Created by AJISETYA
*/
public class MovieResponse {
@SerializedName("page")
private int page;
@SerializedName("results")
private List<Movie> results;
@SerializedName("total_results")
private int totalResults;
@SerializedName("total_pages")
private int totalPages;
public int getTotalPages() {
return totalPages;
}
public void setTotalPages(int totalPages) {
this.totalPages = totalPages;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public List<Movie> getResults() {
return results;
}
public void setResults(List<Movie> results) {
this.results = results;
}
public int getTotalResults() {
return totalResults;
}
public void setTotalResults(int totalResults) {
this.totalResults = totalResults;
}
}
Membuat Instansi RetrofitKita membutuhkan Retrofit Builder dan URL dasar. Maka buat package baru dengan nama Rest, dan buat class baru dengan nama ApiClient.java, kemudian buat kodenya seperti berikut ini
package com.blogsetyaaji.retrofithttplibrary.Rest;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
/**
* Created by AJISETYA
*/
public class ApiClient {
public static final String BASE_URL = "http://api.themoviedb.org/3/";
private static Retrofit retrofit = null;
public static Retrofit getClient() {
if (retrofit==null) {
retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
}
return retrofit;
}
}
Mendefinisikan EndpointsEndpoint didefinisikan di dalam interface menggunakan anotasi spesial retrofit untuk untuk mengkodekan rincian tentang parameter dan metode permintaan.
Buat Interface baru dengan nama ApiInterface.java di dalam package Rest dan buat kodenya seperti berikut
package com.blogsetyaaji.retrofithttplibrary.Rest;
import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse;
import retrofit2.Call;
import retrofit2.http.GET;
import retrofit2.http.Path;
import retrofit2.http.Query;
/**
* Created by AJISETYA
*/
public interface ApiInterface {
@GET("movie/top_rated")
Call<MovieResponse> getTopRatedMovies(@Query("api_key") String apiKey);
@GET("movie/{id}")
Call<MovieResponse> getMovieDetails(@Path("id") int id, @Query("api_key") String apiKey);
}
Setiap EndPoint menentukan anotasi dari method HTTP (GET, POST, dll) dan parameter dari method ini juga memiliki anotasi spesial (@Query, @Path, @Body, dll)
Memangil Permintaan PertamaBuka MainActivity.java dan buat kodenya menjadi seperti di bawah ini. Jangan lupa masukkan Api ilik sobat.
package com.blogsetyaaji.retrofithttplibrary;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.blogsetyaaji.retrofithttplibrary.Model.Movie;
import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse;
import com.blogsetyaaji.retrofithttplibrary.Rest.ApiClient;
import com.blogsetyaaji.retrofithttplibrary.Rest.ApiInterface;
import java.util.List;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
// TODO - insert your themoviedb.org API KEY here
private final static String API_KEY = "e5013e88aad0bad4821bdac93d1d6a30";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (API_KEY.isEmpty()) {
Toast.makeText(getApplicationContext(), "Please obtain your API KEY first from themoviedb.org", Toast.LENGTH_LONG).show();
return;
}
ApiInterface apiService =
ApiClient.getClient().create(ApiInterface.class);
Call<MovieResponse> call = apiService.getTopRatedMovies(API_KEY);
call.enqueue(new Callback<MovieResponse>() {
@Override
public void onResponse(Call<MovieResponse>call, Response<MovieResponse> response) {
List<Movie> movies = response.body().getResults();
Log.d(TAG, "Number of movies received: " + movies.size());
Toast.makeText(MainActivity.this, "Number of movies received: " + movies.size(), Toast.LENGTH_LONG).show();
}
@Override
public void onFailure(Call<MovieResponse>call, Throwable t) {
// Log error here since request failed
Log.e(TAG, t.toString());
}
});
}
}
Retrofit akan mendownload dan memparsing data API dan mengembalikan ke User Interface lewat metode onResponse dan onFailure. Tapi sebelum menjalankan aplikasi, terlebih dahulu beri izin akses internet pada AndroidManifest.xml seperti kode di bawah ini
<uses-permission android:name="android.permission.INTERNET"/>
Jalankan aplikasi dengan memilih menu Run 'app', hasilnya akan seperti berikut
Dan itu adalah percobaan pertama untuk mengetes apakah permintaan bisa diproses pada tahap selanjutnya. Sekarang kita akanmelakukan langkah selanjutnya yaitu menampilkan data dari web The Movie Db. Berikut langkah-langkahnya.
Menampilkan Data di RecyclerView
Selain kita menampilkan data di RecyclerView, kita juga akan menampilkan gambar di library Picasso. Jadi untuk pertama kali, kita lakukan langkah di bawah ini
Menambah Dependencies
Tambahkan dependencies baru di dalam
build:grandle untuk menambah library recyclerview dan picasso. Kodenya seperti berikut ini
compile 'com.android.support:recyclerview-v7:24.0.0'
compile 'com.squareup.picasso:picasso:2.3.2'
Membuat Tampilan
Buka
color.xml dan tambahkan kode hingga menjadi seperti di bawah ini untuk menambah warna yang nantinya akan ditampilkan.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="orange">#FF3909</color>
<color name="colorAccentDark">#00B482</color>
<color name="colorBlack">#555555</color>
<color name="colorWhite">#FFFFFF</color>
<color name="colorGrey">#707070</color>
<color name="colorGreyLight">#8A8A8A</color>
</resources>
Selanjutnya kita buat gambar bintang untuk menunjukka rate dari film. Buat layout baru di dalam folder drawable dengan nama
star.xml dan buat kodenya seperti berikut ini
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<path
android:fillColor="#000"
android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>
Kita butuh layout untuk menampng informasi yang akan ditampilkan. Kita membutuhkan 4 TextView dan dua ImageView dalam layout tersebut. Buat layout baru dengan nama
list_item_movie.xml dan buat kodenya seperti berikut ini
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/movies_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="72dp"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/backbg"
android:layout_marginRight="7dp"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingRight="16dp"
android:textStyle="bold"
android:textColor="@color/colorBlack"
android:textSize="16sp" />
<TextView
android:id="@+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:textColor="@color/colorGreyLight" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="3"
android:paddingRight="16dp"
android:textColor="@color/colorGreyLight" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="35dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/rating_image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@drawable/star"
android:tint="@color/colorAccent" />
<TextView
android:id="@+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="5.0" />
</LinearLayout>
</LinearLayout>
Tambahkan objek RecyclerViewada di dalam
activity_main.xml dengan membuat kodenya seperti berikut ini
<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.retrofithttplibrary.MainActivity">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/movie_recycler"/>
</RelativeLayout>
Membuat Adapter
RecylerView membutuhkan adapter yang berfungsi untuk melihat, mengikat, dan memproses data. Untuk membuatnya, buat class baru dengan nama
MovieAdapter.java di dalam package Adapter dan buat kodenya seperti berikut ini
package com.blogsetyaaji.retrofithttplibrary.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.LinearLayout;
import android.widget.TextView;
import com.blogsetyaaji.retrofithttplibrary.Model.Movie;
import com.blogsetyaaji.retrofithttplibrary.R;
import com.squareup.picasso.Picasso;
import java.util.List;
/**
* Created by AJISETYA
*/
public class MoviesAdapter extends RecyclerView.Adapter<MoviesAdapter.MovieViewHolder> {
private List<Movie> movies;
private int rowLayout;
private Context context;
public static class MovieViewHolder extends RecyclerView.ViewHolder {
LinearLayout moviesLayout;
TextView movieTitle;
TextView data;
TextView movieDescription;
TextView rating;
ImageView backbg;
public MovieViewHolder(View v) {
super(v);
moviesLayout = (LinearLayout) v.findViewById(R.id.movies_layout);
movieTitle = (TextView) v.findViewById(R.id.title);
data = (TextView) v.findViewById(R.id.subtitle);
movieDescription = (TextView) v.findViewById(R.id.description);
rating = (TextView) v.findViewById(R.id.rating);
backbg = (ImageView) v.findViewById(R.id.backbg);
}
}
public MoviesAdapter(List<Movie> movies, int rowLayout, Context context) {
this.movies = movies;
this.rowLayout = rowLayout;
this.context = context;
}
@Override
public MoviesAdapter.MovieViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(rowLayout, parent, false);
return new MovieViewHolder(view);
}
@Override
public void onBindViewHolder(MovieViewHolder holder, final int position) {
holder.movieTitle.setText(movies.get(position).getTitle());
holder.data.setText(movies.get(position).getReleaseDate());
holder.movieDescription.setText(movies.get(position).getOverview());
holder.rating.setText(movies.get(position).getVoteAverage().toString());
Picasso.with(context).load("https://image.tmdb.org/t/p/w300_and_h450_bestv2" + movies.get(position).getBackdropPath()).resize(200, 250).into(holder.backbg);
}
@Override
public int getItemCount() {
return movies.size();
}
}
Di dalam kode adapter di atas, terdapat satu baris kode picasso untuk menampilkan gambar dari sumber API dengan mengunakan tambahan link dasar.
Membuat Activity
Sekarang buka
MainActivity.java untuk menambahkan data ke activity objek RecyclerView. Buat kodenya seperti berikut ini
package com.blogsetyaaji.retrofithttplibrary;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.widget.Toast;
import com.blogsetyaaji.retrofithttplibrary.Adapter.MoviesAdapter;
import com.blogsetyaaji.retrofithttplibrary.Model.Movie;
import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse;
import com.blogsetyaaji.retrofithttplibrary.Rest.ApiClient;
import com.blogsetyaaji.retrofithttplibrary.Rest.ApiInterface;
import java.util.List;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
// TODO - insert your themoviedb.org API KEY here
private final static String API_KEY = "e5013e88aad0bad4821bdac93d1d6a30";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (API_KEY.isEmpty()) {
Toast.makeText(getApplicationContext(), "Please obtain your API KEY first from themoviedb.org", Toast.LENGTH_LONG).show();
return;
}
final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.movie_recycler);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
ApiInterface apiService =
ApiClient.getClient().create(ApiInterface.class);
Call<MovieResponse> call = apiService.getTopRatedMovies(API_KEY);
call.enqueue(new Callback<MovieResponse>() {
@Override
public void onResponse(Call<MovieResponse>call, Response<MovieResponse> response) {
List<Movie> movies = response.body().getResults();
Log.d(TAG, "Number of movies received: " + movies.size());
Toast.makeText(MainActivity.this, "Number of movies received: " + movies.size(), Toast.LENGTH_LONG).show();
recyclerView.setAdapter(new MoviesAdapter(movies, R.layout.list_item_movie, getApplicationContext()));
}
@Override
public void onFailure(Call<MovieResponse>call, Throwable t) {
// Log error here since request failed
Log.e(TAG, t.toString());
}
});
}
}
Menjalankan Aplikasi
Setelah semuanya selesai, saatnya menjalankan aplikais dengan memilih menu Run 'app'. Tampilanya akan seperti berikut ini
SIlahkan jika sobat ingin melihat hasil projectnya di github saya
Follow @AjiSetyaWatchStarData telah berhasil ditampilkan, mungki sobat bisa menambahkan CardView untuk mempercantik tampilanya. Sekian artikel tentang Tutorial Android dengan Retrofit HTTP Library. semoga bermanfaat. Ikuti terus Blog Setya Aji dan nanikan artikel menarik lainya.
