Manage API using Library Retrofit 2 and Picasso, then store to list view [Android Studio]

Referensi untuk artikel ini:
http://services.hanselandpetal.com/feeds/flowers.json
http://themakeinfo.com/2015/04/retrofit-android-tutorial/
https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit
http://square.github.io/retrofit/

Bagaimana kita mengelola API dan menampilkannya dalam bentuk list view pada aplikasi android? disini kita akan membahas topik tersebut menggunakan Library Retrofit 2 dan Picasso.

Langsung saja kita ke langkah2 bembuatannya.

1. compile gradle

compile 'com.squareup.retrofit:retrofit:2.0.0-beta2'
compile 'com.squareup.retrofit:converter-gson:2.0.0-beta2'
compile 'com.squareup.picasso:picasso:2.5.2'

2.  custom list view <pesan_list_row.xml>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="8dp" >

    <!-- Thumbnail Image -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/thumbnail"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="8dp"
        android:src="@android:drawable/sym_action_chat" />

    <TextView
        android:id="@+id/title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:textStyle="bold"
        android:layout_marginBottom="12dp"
        android:text="Gojek" />

    <TextView
        android:id="@+id/isi_pesan"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="isi pesan isi pesan isi pesan isi pesan isi pesan isi pesan isi pesan isi pesan "
        android:lines="3"
        android:layout_below="@+id/title1"
        android:layout_alignLeft="@+id/title1"
        android:layout_alignStart="@+id/title1" />

    <TextView
        android:id="@+id/waktu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1 Jam lalu"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/isi_pesan"
        android:layout_alignEnd="@+id/isi_pesan" />

</RelativeLayout>

3. Main List View <fragment_pesan.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list_pesan"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="1dp"/>

</LinearLayout>

4. Adapter List <ProfileListViewAdapter.java>

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import <yourpakages>.R;
import <yourpakages>.model.Profile;
import com.squareup.picasso.Picasso;

import java.util.List;


/**
 * Created by erdearik on 11/13/15.
 */
public class ProfileListViewAdapter extends ArrayAdapter<Profile> {

    String url = "http://services.hanselandpetal.com/photos/";
    private Context context;
    private List<Profile> profileList;
    public ProfileListViewAdapter(Context context, int resource, List<Profile> object){
        super(context, resource, object);
        this.context = context;
        this.profileList = object;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //return super.getView(position, convertView, parent);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.pesan_list_row,parent,false);
        Profile flower = profileList.get(position);
        TextView tv = (TextView) view.findViewById(R.id.isi_pesan);
        tv.setText(flower.getCategory());
        TextView tv1 = (TextView) view.findViewById(R.id.title1);
        tv1.setText(flower.getName());
        TextView tv2 = (TextView) view.findViewById(R.id.waktu);
        tv2.setText(flower.getPhoto());
        ImageView img = (ImageView) view.findViewById(R.id.thumbnail);
        Picasso.with(getContext()).load(url+flower.getPhoto()).resize(100,100).into(img);
        return view;
    }
}

5. Main class <PesanFragment.java>

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

import <yourpakages>.R;
import <yourpakages>.model.Profile;
import <yourpakages>.network.ApiService;
import <yourpakages>.views.adapters.ProfileListViewAdapter;

import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;
import retrofit.Call;
import retrofit.Callback;
import retrofit.GsonConverterFactory;
import retrofit.Response;
import retrofit.Retrofit;

public class PesanFragment extends BaseFragment {
    public static final String TAG_PESAN = "pesan_fragment";
    String API = "http://services.hanselandpetal.com";

    @Bind(R.id.list_pesan)
    ListView lv;

    List<Profile> lp;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_pesan, container, false);
        ButterKnife.bind(this, view);

        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(API)
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        ApiService api = retrofit.create(ApiService.class);
        Call<List<Profile>> call = api.loadRepo();
        call.enqueue(new Callback<List<Profile>>() {
            @Override
            public void onResponse(Response<List<Profile>> response, Retrofit retrofit) {
                lp = response.body();
                ProfileListViewAdapter adapt = new ProfileListViewAdapter(getActivity(), R.layout.pesan_list_row, lp);
                lv.setAdapter(adapt);
                lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                    }
                });
            }

            @Override
            public void onFailure(Throwable t) {

            }
        });

        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Toast.makeText(getActivity(), "MULAI LAGI", Toast.LENGTH_SHORT).show();
    }
}

6. API <ApiService.java>

import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;

public class Profile {

    @SerializedName("category")
    @Expose
    private String category;
    @SerializedName("price")
    @Expose
    private Double price;
    @SerializedName("instructions")
    @Expose
    private String instructions;
    @SerializedName("photo")
    @Expose
    private String photo;
    @SerializedName("name")
    @Expose
    private String name;
    @SerializedName("productId")
    @Expose
    private Integer productId;

    /**
     *
     * @return
     * The category
     */
    public String getCategory() {
        return category;
    }

    /**
     *
     * @param category
     * The category
     */
    public void setCategory(String category) {
        this.category = category;
    }

    /**
     *
     * @return
     * The price
     */
    public Double getPrice() {
        return price;
    }

    /**
     *
     * @param price
     * The price
     */
    public void setPrice(Double price) {
        this.price = price;
    }

    /**
     *
     * @return
     * The instructions
     */
    public String getInstructions() {
        return instructions;
    }

    /**
     *
     * @param instructions
     * The instructions
     */
    public void setInstructions(String instructions) {
        this.instructions = instructions;
    }

    /**
     *
     * @return
     * The photo
     */
    public String getPhoto() {
        return photo;
    }

    /**
     *
     * @param photo
     * The photo
     */
    public void setPhoto(String photo) {
        this.photo = photo;
    }

    /**
     *
     * @return
     * The name
     */
    public String getName() {
        return name;
    }

    /**
     *
     * @param name
     * The name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     *
     * @return
     * The productId
     */
    public Integer getProductId() {
        return productId;
    }

    /**
     *
     * @param productId
     * The productId
     */
    public void setProductId(Integer productId) {
        this.productId = productId;
    }
}