Hướng dẫn lập trình Android Kotlin để lấy dữ liệu từ api hiển thị lên RecyclerView

Để lấy dữ liệu từ API và hiển thị nó lên một RecyclerView trong ứng dụng Android sử dụng Kotlin, bạn cần thực hiện các bước sau. (Dữ liệu json lấy từ api: https://jsonplaceholder.typicode.com/photos)

1. Tạo dự án Android mới.

• Mở Android Studio và tạo một dự án mới.
• Chọn Empty Activity hoặc một loại activity tùy ý.

2. Thêm quyền truy cập Internet.

• Mở tệp AndroidManifest.xml.
• Thêm quyền truy cập Internet vào trong <manifest>:

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

3. Thêm thư viện Retrofit vào dự án.

• Thêm dependency của Retrofit vào tệp build.gradle của mô-đun app:

dependencies {
    // ...
    implementation "com.squareup.retrofit2:retrofit:2.9.0"
    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
}

4. Tạo một lớp Retrofit để làm việc với API.

• Tạo một file ApiClient.kt:

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object ApiClient {
    private const val BASE_URL = "https://jsonplaceholder.typicode.com/"

    val retrofit: Retrofit by lazy {
        Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
    }
}

5. Tạo một Interface để định nghĩa các request API.

• Tạo một file ApiService.kt:

import retrofit2.Call
import retrofit2.http.GET

interface ApiService {
    @GET("photos")
    fun getPhotos(): Call<List<Photo>>
}

6. Tạo model cho dữ liệu.

• Tạo một file Photo.kt:

data class Photo(val id: Int, val title: String, val url: String)

7. Tạo Adapter cho RecyclerView.

• Tạo một file PhotoAdapter.kt:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.item_photo.view.*

class PhotoAdapter(private val photos: List<Photo>) :
    RecyclerView.Adapter<PhotoAdapter.PhotoViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PhotoViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_photo, parent, false)
        return PhotoViewHolder(view)
    }

    override fun onBindViewHolder(holder: PhotoViewHolder, position: Int) {
        val photo = photos[position]
        holder.bind(photo)
    }

    override fun getItemCount() = photos.size

    inner class PhotoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(photo: Photo) {
            itemView.titleTextView.text = photo.title
            Picasso.get().load(photo.url).into(itemView.photoImageView)
        }
    }
}

9. Thêm RecyclerView vào layout của Activity.

• Mở tệp activity_main.xml và thêm một RecyclerView:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/photoRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

10. Gọi API và cập nhật RecyclerView.

• Trong MainActivity.kt, gọi API và cập nhật RecyclerView:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class MainActivity : AppCompatActivity() {

    private lateinit var adapter: PhotoAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val apiService = ApiClient.retrofit.create(ApiService::class.java)
        val call = apiService.getPhotos()

        call.enqueue(object : Callback<List<Photo>> {
            override fun onResponse(call: Call<List<Photo>>, response: Response<List<Photo>>) {
                if (response.isSuccessful) {
                    val photos = response.body() ?: emptyList()
                    adapter = PhotoAdapter(photos)
                    photoRecyclerView.adapter = adapter
                    photoRecyclerView.layoutManager = LinearLayoutManager(this@MainActivity)
                }
            }

            override fun onFailure(call: Call<List<Photo>>, t: Throwable) {
                t.printStackTrace()
            }
        })
    }
}

11. Chạy ứng dụng trên máy Android.

Chạy ứng dụng của bạn và kiểm tra xem liệu danh sách ảnh từ API có hiển thị trên RecyclerView không.

Hy vọng rằng hướng dẫn trên giúp bạn lấy dữ liệu từ API và hiển thị nó lên RecyclerView trong ứng dụng Android của mình.

Code mẫu trong bài giảng: https://github.com/DuyLeHong/RecyclerViewDemo

Video hướng dẫn.

Liên hệ

Để được tư vấn lộ trình học chuẩn để học lấy nền tảng lập trình cơ bản / chuyển ngành / lên mức Lập trình viên chuyên nghiệp, đừng ngại inbox page fb.com/CodeFresherVN để Admin tư vấn lộ trình học với thời gian và chi phí phù hợp nhất cho bạn nhé!

Địa chỉ: Trung tâm CodeFresher – Tầng 5 tòa nhà Diamond Flower – số 1 Hoàng Đạo Thúy, Thanh Xuân, Hà Nội – SĐT: 081.318.8668