AndroidJavaTutorial

RecycleView Dengan Rest API (Java)

GubugCoding.com – Setelah sebelumnya saya membagikan tutorial tentang RecycleView Dengan Rest API (Kotlin), kali ini akan sedikit berbeda yaitu kita akan menggunakan RecycleView di Android Studio dengan bahasa Java

Sebenarnya langkah-langkah pembuatan RecycleView di Kotlin dan Java tidaklah berbeda, hanya saja pada syntaxnya yang berbeda

Jika diartikel sebelumnya ada 8 langkah pembuatan RecycleView menggunakan Rest API (Kotlin), maka di Java pun sama

Mari kita simak baik-baik langkah demi langkah berikut :

Pertama, Buat Project baru Empty Activity dengan nama RecycleView Java -> Language pilih Java-> Minimum SDK API 21 -> Lalu klik Finish

Kedua, tambahkan Library berikut ke build.gradle (Module: app)

implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.amitshekhar.android:android-networking:1.0.2'

catatan :

Kita menggunakan library ‘com.github.bumptech.glide:glide:4.9.0’ untuk menampilkan gambar dari URL dan ‘com.amitshekhar.android:android-networking:1.0.2’ untuk dapat mengakses REST API.

Ketiga, tambahkan permission berikut ke AndroidManifest.xml untuk dapat mengakses internet

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

Keempat, edit file activity_main.xml lalu tambahkan recycleview dan progressBar (optional), hasil akhirnya seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"/>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

Kelima, buat layout baru untuk tampilan recycle view nya, dengan cara klik kanan layout -> New -> Layout Resource File -> Beri nama news_row_item -> OK.

Sama seperti sebelumnya, disini saya akan menampilkan 3 buah View, yaitu ImageView, dan 2 TextView. ImageView untuk menampilkan gambar, dan 2 TextView masing-masing untuk menampilkan Author dan Judul berita

Ubah news_row_item.xml seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/itemImageView"
        android:layout_width="74dp"
        android:layout_height="74dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="4dp"
        android:contentDescription="gambar"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/newsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:paddingLeft="8dp"
        android:lineSpacingExtra="4sp"
        android:text="Deskripsi"
        android:textAlignment="viewStart"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/itemImageView"
        app:layout_constraintTop_toBottomOf="@+id/newsAuthor"
        app:layout_constraintVertical_bias="0.279" />
    <TextView
        android:id="@+id/newsAuthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Judul"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toEndOf="@+id/itemImageView"
        app:layout_constraintTop_toTopOf="parent" />
    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Nah, bisa kalian lihat. Proses pembuatan RecycleView Java sampai dengan langkah kelima, sama saja dengan pembuatan RecycleView Kotlin. Untuk langkah yang selanjutnya akan sedikit berbeda, coba perhatikan baik-baik

Keenam, buat kelas model untuk menampung datanya, caranya dengan Klik Kanan di Directory JAVA / Package Name kalian -> New -> Java Class -> beri nama News dan pilih Class -> lalu enter

Perhatikan pembuatan kelas model berikut. Ikuti langkah demi langkah. Masukan kode berikut ke News.java

public class News {
    private String title;
    private String description;
    private String photo;
}

Pembuatan kelas model belum selesai, kalian harus menambahkan Getter and Setter dengan Klik kanan pada workspace, pilih Generate (Alt+Insert) → Pilih Getter and Setter. Lihat gambar berikut :

Piih Getter and Setter
Pilih Semua lalu OK

Hasil akhir News.java akan seperti berikut

public class News {
    private String title;
    private String description;
    private String photo;
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public String getPhoto() {
        return photo;
    }
    public void setPhoto(String photo) {
        this.photo = photo;
    }
}

Ketujuh, buat adapter untuk RecycleView nya, caranya sama Klik Kanan di Directory JAVA / Package Name kalian -> New -> Java Class -> beri nama NewsAdapter dan pilih Class -> lalu enter

Kalau ada RecycleView pasti ada adapter. Supaya kalian lebih paham, saya jabarkan satu persatu pembuatan Adapter RecycleView nya, pertama lengkapi NewsAdapter.java seperti berikut:

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.NewsViewHolder> {
    
}

Maka akan ada garis merah dan NewsViewHolder juga akan merah. Kita resolve satu-persatu. Pertama adalah kita tekan alt+enter / klik tombol merah pada NewsViewHolder dan pilih Create class NewsViewHolder, kemudian pilih NewsAdapter karena kita akan membuat sebuah inner class

Maka akan menjadi seperti ini

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.NewsViewHolder> {
    public class NewsViewHolder {
    }
}

Masih ada garis merah, arahkan kursor ke teks class NewsAdapter, kita coba lakukan lagi alt+enter / klik tombol merah dan pilih implement methods

Kemudian pilihlah ketiga method dari RecycleView.Adapter lalu OK

Maka NewsAdapter.java akan menjadi seperti ini

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.NewsViewHolder> {
    @NonNull
    @Override
    public NewsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return null;
    }
    @Override
    public void onBindViewHolder(@NonNull NewsViewHolder holder, int position) {
    }
    @Override
    public int getItemCount() {
        return 0;
    }
    public class NewsViewHolder {
    }
}

Jika kalian lihat masih ada garis merah, hal ini karena NewsViewHolder seharusnya inherit ke RecycleView.ViewHolder, kita lakukan lagi seperti tadi, klik alt+enter pilih Make ‘NewsViewHolder’ extend ‘androidx…..’

Masih ada error juga kita lakukan lagi alt+enter / klik tombol merah dan pilih Create constructor matching super.

Maka hasilnya akan seperti berikut:

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.NewsViewHolder> {
.
.
.
    public class NewsViewHolder extends RecyclerView.ViewHolder {
        public NewsViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}

Selanjutnya lengkapi kelas NewsAdapter.java dari turunan RecycleView.Adapter seperti berikut :

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.NewsViewHolder> {
    private ArrayList<News> mData = new ArrayList<>();
    private OnItemClickCallback onItemClickCallback;
    public void setOnItemClickCallback(OnItemClickCallback onItemClickCallback) {
        this.onItemClickCallback = onItemClickCallback;
    }
    public void setData(ArrayList<News> items) {
        mData.clear();
        mData.addAll(items);
        notifyDataSetChanged();
    }
    @NonNull
    @Override
    public NewsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View mView = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_row_item, parent, false);
        return new NewsViewHolder(mView);
    }
    @Override
    public void onBindViewHolder(@NonNull final NewsViewHolder holder, int position) {
        holder.bind(mData.get(position));
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onItemClickCallback.onItemClicked(mData.get(holder.getAdapterPosition()));
            }
        });
    }
    @Override
    public int getItemCount() {
        return mData.size();
    }
    class NewsViewHolder extends RecyclerView.ViewHolder {
        TextView textViewAuthor;
        TextView textViewJudul;
        ImageView imageViewPhoto;
        public NewsViewHolder(@NonNull View itemView) {
            super(itemView);
            textViewAuthor = itemView.findViewById(R.id.newsAuthor);
            textViewJudul = itemView.findViewById(R.id.newsTitle);
            imageViewPhoto = itemView.findViewById(R.id.itemImageView);
        }
        void bind(News news) {
            Glide.with(itemView.getContext())
                    .load(news.getPhoto())
                    .apply(new RequestOptions().override(55, 55))
                    .into(imageViewPhoto);
            textViewAuthor.setText(news.getAuthor());
            textViewJudul.setText(news.getJudul());
        }
    }
    public interface OnItemClickCallback {
        void onItemClicked(News data);
    }
}

Sejauh ini kita sudah selesai membuat Adapter untuk RecycleView nya, lanjut ketahap berikutnya

Kedelapan, kita setting di MainActivity.java

Setelah membuat adapter, selanjutnya kita inisialisasikan RecycleView.Adapter di class MainActivity.java seperti berikut

public class MainActivity extends AppCompatActivity {
    private NewsAdapter adapter;
    private ProgressBar progressBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = findViewById(R.id.progressBar);
        RecyclerView recyclerView = findViewById(R.id.recycleView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new NewsAdapter();
        adapter.notifyDataSetChanged();
        recyclerView.setAdapter(adapter);
        showLoading(true);
        getNews();
    }
    private void getNews() {
        final ArrayList<News> listNews = new ArrayList<>();
        String baseUrl = "http://newsapi.org/v2/top-headlines?country=id&category=technology&apiKey=YOURAPIKEY";
        AndroidNetworking.get(baseUrl)
                .setPriority(Priority.MEDIUM)
                .build()
                .getAsJSONObject(new JSONObjectRequestListener() {
                    @Override
                    public void onResponse(JSONObject response) {
                        Log.e("_kotlinResponse", response.toString());
                        try {
                            JSONArray jsonArray = response.getJSONArray("articles");
                            for (int i = 0; i < jsonArray.length(); i++) {
                                JSONObject news = jsonArray.getJSONObject(i);
                                News itemNews = new News();
                                itemNews.setTitle(news.getString("author"));
                                itemNews.setDescription(news.getString("description"));
                                itemNews.setPhoto(news.getString("urlToImage"));
                                listNews.add(itemNews);
                            }
                            adapter.setData(listNews);
                            showLoading(false);
                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }
                    @Override
                    public void onError(ANError anError) {
                        Log.d("onFailure", anError.getMessage());
                    }
                });
    }
    private void showLoading(Boolean state) {
        if (state) {
            progressBar.setVisibility(View.VISIBLE);
        } else {
            progressBar.setVisibility(View.GONE);
        }
    }
}

Terakhir, silahkan run project kalian dan hasilnya kurang lebih seperti berikut :

recycleview java with rest api

Bagaimana ? Cukup membuat kalian bingung bukan ? Hehe..

Itulah step by step pembuatan RecycleView di Java dengan memanfaatkan Rest API, kalian bisa membandingkan dengan artikel sebelumnya di RecycleView Dengan Rest API (Kotlin) mana yang lebih mudah

Seperti janji saya di artikel sebelumnya, untuk selanjutnya akan saya tambahkan ItemClickSupport pada RecyclerView supaya dapat menampilkan data yang kita klik

Sekian dulu tutorial tentang Penggunaan RecycleView menggunakan Rest API di Java, semoga bermanfaat. Untuk yang butuh source codenya dapat download dibawah ini.

Happy Coding !

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close

Adblock Detected

Tolong Matikan AdBlock dulu Gan :)