Membuat Main Activity dan Loop Blogspot Post dengan Android Studio

Table of contents

Membuat Main Activity dan Loop Blogspot Post dengan Android Studio - Selamat malam, Mari dilanjutkan kembali artikel lanjutan dari artikel saya sebelumnya yaitu Membuat aplikasi portal berita Blogger.com dengan Android Studio - Android Manifest dan Splash Activity yang mana pada artikel kali ini sudah sampai ke part 9. Dengan menggunakan Blogger API v3 pada aplikasi android studio sudah saatnya untuk membuat tampilan dasar dari aplikasi yaitu MainActivity yang nantinya akan menampilkan Loop dari post yang sudah diposting di platform blogspot anda. Artikel kali ini merupakan part ke-9 dari seri Membuat website portal berita dengan blogger.com. Jadi, silahkan dibaca terlebih dahulu artikel sebelumnya agar bisa mengikuti artikel kali Membuat Main Activity dan Loop Blogspot Post dengan Android Studio.

Post List XML

Buka project android studio, pada folder res >> layout buat sebuah Tampilan layout yang berfungsi untuk menampilkan Image, Post Title dan Post Description. Klik Kanan pada folder layout >> New >> Layout resource File dan kemudian beri nama post_list.xml.

Copy kode berikut, paste pada post_list.xml dan simpan.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:elevation="6dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <ImageView
            android:id="@+id/postImage"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/postTitle"
            style="@style/TextAppearance.AppCompat.Headline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="Post title"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/postDescription"
            style="@style/TextAppearance.AppCompat.Body2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:ellipsize="end"
            android:text="Post description"
            android:maxLines="2" />


    </LinearLayout>

</androidx.cardview.widget.CardView>

Lihat tampilan split dari kode diatas

Screen Shot 2021-03-13 at 23.37.02

Main Activity XML

Masih di folder layout, buat sebuah file dengan nama activity_main.xml dimana saya akan menggunakan sebuah RecyclerView. RecyclerView memiliki keunggulan dari sisi cara mengimplementasikannya yang lebih terstruktur, sehingga performa untuk menampilkan data berbentuk loop atau list akan lebih baik. silahkan anda explore lebih jauh tentang penggunaan RecyclerView disini.

Silahkan copy kode berikut, paste pada activity_main.xml dan simpan.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    tools:context=".MainActivity">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/postList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </androidx.recyclerview.widget.RecyclerView>

</androidx.drawerlayout.widget.DrawerLayout>

Perhatikan baris kode dibawah yang mengindetifikasikan id dari post_list.xml yang sudah dibuat sebelumnya.

android:id="@+id/postList"

Sementara, tampilan split code akan seperti gambar dibawah.

Screen Shot 2021-03-13 at 23.40.00

Main Activity Java

Saatnya masuk ke bagian logika program/aplikasi, masuk ke folder blogger dan buat sebuah file Java dengan nama MainActivity.java

Copy java code dibawah, paste pada MainActivity.java dan simpan

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.widget.Toast;

import com.teknologi.adapter.PostAdapter;
import com.teknologi.api.PostList;
import com.teknologi.api.Api;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class MainActivity extends AppCompatActivity{

    RecyclerView recyclerView;


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

        recyclerView = findViewById(R.id.postList);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        getData();

    }

    private void getData() {
        Call<PostList> postList = Api.getService().getPostList();
        postList.enqueue(new Callback<PostList>() {
            @Override
            public void onResponse(Call<PostList> call, Response<PostList> response) {
                PostList list = response.body();
                recyclerView.setAdapter(new PostAdapter(MainActivity.this, list.getItems()));

            }

            @Override
            public void onFailure(Call<PostList> call, Throwable t) {
                Toast.makeText(MainActivity.this, "Error Occured Here", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Post Adapter

File PostAdapter.java akan berfungsi untuk menghubungkan post_list.xml dengan activity_main.xml. Secara logika PostAdapter lah yang mengisi data ke post_list.xml.

Klik kanan pada folder adapter >> New >> Java Class kemudian beri nama PostAdapter.java

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.teknologi.api.Item;
import com.teknologi.blogger.DetailActivity;
import com.teknologi.blogger.R;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;

import java.util.List;

public class PostAdapter extends RecyclerView.Adapter<PostAdapter.PostViewHolder>
{

    private Context context;
    private List<Item> items;


    public PostAdapter(Context context, List<Item> items) {
        this.context = context;
        this.items = items;
    }

    @Override
    public PostViewHolder onCreateViewHolder(ViewGroup parent, int i) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = (View) inflater.inflate(R.layout.post_list, parent, false);
        return new PostViewHolder(view);
    }

    @Override
    public void onBindViewHolder(PostViewHolder holder, int position) {
        final Item item = items.get(position);
        holder.postTitle.setText(item.getTitle());
        final String id = item.getId();


        Document document = Jsoup.parse(item.getContent());
        holder.postDescription.setText(document.text());
        Elements elements = document.select("img");
        Glide.with(context).load(elements.get(0).attr("src")).into(holder.postImage);

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(context, DetailActivity.class);
                intent.putExtra("postId",id);
                context.startActivity(intent);
            }
        });

    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    public class PostViewHolder extends RecyclerView.ViewHolder {
        ImageView postImage;
        TextView postTitle;
        TextView postDescription;

        public PostViewHolder(View itemView) {
            super(itemView);
            postImage = itemView.findViewById(R.id.postImage);
            postTitle = itemView.findViewById(R.id.postTitle);
            postDescription = itemView.findViewById(R.id.postDescription);
        }
    }
}

Perhatikan baris kode dibawah, bagaimana ketika Post Title di klik maka akan diarahkan ke DetailActivity dengan menggunakan Intent. Apa itu Intent? Intent adalah suatu objek yang terdapat dalam suatu activity dimana objek tersebut dapat berkomunikasi dengan activity lainnya yang masih berada dalam satu project.

public void onClick(View v) {
                Intent intent = new Intent(context, DetailActivity.class);
                intent.putExtra("postId",id);
                context.startActivity(intent);
            }

Silahkan run Project dan lihat apakah program berjalan baik atau tidak.

Loop pada blogspot pada android studio