Android: Sử dụng Retrofit Gson để hiển thị dữ liệu từ JSON và dùng Glide hiển thị Image (Android Studio)

Examp hiển thị title và image từ API JSON

Ở đây lý do sử dung Retrofit là vì  cấu trúc và cách hoạt động của nó nhẹ và nhanh vì vậy nó rất thích hợp với App Android

Đầu tiên chúng ta tao project và đến build.gradle (Module: app) thêm thư viện Retrofit, Gson, Glide rồi bấm Sync now để Android Studio tự động download thư viện về cho chúng ta.

https://square.github.io/retrofit/

compile 'com.squareup.retrofit2:retrofit:2.1.0'
compile 'com.squareup.retrofit2:converter-gson:2.1.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

Tiếp theo ở bài này ta tạo ứng dụng xem thời tiết. Vì vậy cần cấp quyềnINTERNET

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

Bước tiếp theo chúng ta sẽ làm các bước để lấy dữ liệu từ URI có dữ liệu là JSON dưới đây
http://tindohanghieu.net/wp-json/wp/v2/posts?categories=51&page=1&per_page=100
-Sử dụng tiện ích Chrome Boomerang - SOAP & REST Client để test và hiển thị dữ liệu JSON của URI đó

Chúng ta sẽ chỉ lấy: title , excerpt, better_featured_image để hiển thị dưới đây là JSON lọc từ URI ở trên.

[
    {
 
        "title": {
            "rendered": "Những mánh khoé lừa đảo của các đối tượng khi giao dịch online"
        },
     
        "excerpt": {
            "rendered": "<p>Khi giao dịch online phát triển, người bán người mua không phải gặp nhau trực tiếp mà chỉ cần một tài khoản mạng xã hội, tài khoản chuyển tiền là đã có thể mua bán với nhau. Sự lỏng lẻo và không có một ai đứng ra quản lý những giao dịch như vậy đã [&hellip;]</p>\n"
        },
        
        "better_featured_image": {
           
            "source_url": "http://tindohanghieu.net/wp-content/uploads/12-1.jpg"
        }
            
    }
]

Tiếp theo tạo package model  

Nhìn vào cấu trúc dữ liệu JSON phía trên thì chúng ta tạo lần lượt các class theo thứ tự:

Chú ý: Tạo class nhanh dự vào ToolSite http://pojo.sodhanalibrary.com/

Title.java

Java Android 2017

package com.example.lonely.myapplication.model;

/**
 * Created by Lonely on 1/15/2017.
 */

public class Title {
    private String rendered;

    public String getRendered() {
        return rendered;
    }

    public void setRendered(String rendered) {
        this.rendered = rendered;
    }

}

Excerpt.java

Java Android 2017

package com.example.lonely.myapplication.model;

/**
 * Created by Lonely on 1/15/2017.
 */

public class Excerpt {
    private String rendered;

    public String getRendered() {
        return rendered;
    }

    public void setRendered(String rendered) {
        this.rendered = rendered;
    }

}

Better_featured_image.java

Java Android 2017

package com.example.lonely.myapplication.model;

/**
 * Created by Lonely on 1/15/2017.
 */

public class Better_featured_image {
    private String source_url;

    public String getSource_url() {
        return source_url;
    }

    public void setSource_url(String source_url) {
        this.source_url = source_url;
    }

}

MyPojo.java

Java Android 2017

package com.example.lonely.myapplication.model;

/**
 * Created by Lonely on 1/15/2017.
 */

public class MyPojo {
    private Title title;
    private Excerpt excerpt;
    private Better_featured_image better_featured_image;

    public Title getTitle() {
        return title;
    }

    public void setTitle(Title title) {
        this.title = title;
    }

    public Excerpt getExcerpt() {
        return excerpt;
    }

    public void setExcerpt(Excerpt excerpt) {
        this.excerpt = excerpt;
    }

    public Better_featured_image getBetter_featured_image() {
        return better_featured_image;
    }

    public void setBetter_featured_image(Better_featured_image better_featured_image) {
        this.better_featured_image = better_featured_image;
    }

}

Tạo package network

APIManager.java

Java Android 2017

package com.example.lonely.myapplication.network;

import com.example.lonely.myapplication.model.MyPojo;

import java.util.List;

import retrofit2.Call;
import retrofit2.http.GET;

/**
 * Created by anhtran on 1/13/17.
 */

public interface APIManager {

    public static String BASE_URL = "http://tindohanghieu.net/";

    @GET("wp-json/wp/v2/posts?categories=51&page=1&per_page=100")
    Call<List<MyPojo>> apiGetNews();

}

Tạo Layout

activity_main.xml

Java Android 2017

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.lonely.myapplication.activity.MainActivity">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <TextView
        android:id="@+id/tvDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_below="@+id/tvTitle"
        android:layout_marginTop="20dp"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/ivCover"
        android:layout_below="@+id/tvDescription"
        android:layout_marginTop="20dp"/>
</RelativeLayout>

Tạo package activity

MainActivity.java

Java Android 2017

package com.example.lonely.myapplication.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.lonely.myapplication.R;
import com.example.lonely.myapplication.model.MyPojo;
import com.example.lonely.myapplication.network.APIManager;

import java.util.List;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class MainActivity extends AppCompatActivity {
    private TextView tvTitle;
    private TextView tvDes;
    private ImageView ivCover;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tvTitle = (TextView)findViewById(R.id.tvTitle);
        tvDes = (TextView)findViewById(R.id.tvDescription);
        ivCover = (ImageView) findViewById(R.id.ivCover);

        getData();

    }

    private void getData() {
        //Đoạn code này lấy từ https://square.github.io/retrofit/
        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(APIManager.BASE_URL)
                .addConverterFactory(GsonConverterFactory.create())
                .build();

        APIManager service = retrofit.create(APIManager.class);
        //====================================================//

        service.apiGetNews().enqueue(new Callback<List<MyPojo>>() {
            @Override
            public void onResponse(Call<List<MyPojo>> call, Response<List<MyPojo>> response) {

                // Get data from server
                List<MyPojo> list = response.body();

                // Show data in view
                MyPojo newsItem = list.get(0);
                tvTitle.setText(newsItem.getTitle().getRendered());
                tvDes.setText(Html.fromHtml(newsItem.getExcerpt().getRendered()));

                // Download image
                String linkImage = newsItem.getBetter_featured_image().getSource_url();
                Glide.with(MainActivity.this).load(linkImage).into(ivCover);

            }

            @Override
            public void onFailure(Call<List<MyPojo>> call, Throwable t) {
                Toast.makeText(MainActivity.this,"On Fail",Toast.LENGTH_SHORT).show();
            }
        });


    }
}

Download project zip