Tutorial Membuat Tabel dengan RecyclerView | Android Studio

Azhar Rivaldi    11/07/2019    Tutorial Android Studio    2 comments   

Baca Juga

Membuat Tabel dengan RecyclerView

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Tabel dengan RecyclerView dengan Android Studio. Mungkin selama ini kita tahu bahwa untuk membuat Tabel di Android Studio menggunakan TableLayout dan TableRow. Tetapi, kita juga bisa membuat Tabel dengan RecyclerView. Selain itu, dengan RecyclerView kita bisa kostumisasi tampilannya agar lebih enak dilihat😄

Data dari API pun bisa kita tampilkan dalam bentuk Tabel dengan Tutorial ini. Jika kalian ingin SOURCE CODE sample aplikasi ini, silahkan download di GITHUB saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

Untuk kalian yang ingin mencoba membuat aplikasi ini dengan tutorial versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya.

2. Karena saya menggunakan AndroidX, maka ubah library di build.gradle menjadi :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
    //implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

3. Ubah MainActivity.java menjadi seperti ini :

package com.azhar.table.activities;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.azhar.table.R;
import com.azhar.table.adapter.TableViewAdapter;
import com.azhar.table.model.MovieModel;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Azhar Rivaldi on 03/11/2019.
 */

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.recyclerViewDeliveryProductList);

        TableViewAdapter adapter = new TableViewAdapter(getMovieList());

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);

        recyclerView.setAdapter(adapter);
    }

    private List getMovieList() {
        List movieList = new ArrayList<>();

        movieList.add(new MovieModel(1, "Pirates of the Caribbean: On Stranger Tides", 2011, 378));
        movieList.add(new MovieModel(2, "Avengers: Age of Ultron", 2015, 365));
        movieList.add(new MovieModel(3, "Avengers: Infinity War", 2018, 316));
        movieList.add(new MovieModel(4, "Pirates of the Caribbean: At World's End", 2007, 300));
        movieList.add(new MovieModel(5, "Justice League", 2017, 300));
        movieList.add(new MovieModel(6, "Solo: A Star Wars Story", 2018, 275));
        movieList.add(new MovieModel(7, "John Carter", 2012, 264));
        movieList.add(new MovieModel(8, "Batman v Superman: Dawn of Justice", 2016, 263));
        movieList.add(new MovieModel(9, "Star Wars: The Last Jedi", 2017, 263));
        movieList.add(new MovieModel(10, "Tangled", 2010, 260));

        return movieList;
    }
}

4. Ubah activity_main.xml menjadi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activities.MainActivity">

    <RelativeLayout
        android:id="@+id/llViewTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:text="Table RecyclerView"
            android:textSize="18sp" />

    </RelativeLayout>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/llViewTitle"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewDeliveryProductList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:nestedScrollingEnabled="false"
            tools:listitem="@layout/table_list_item" />

    </HorizontalScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:src="@drawable/ic_refresh" />

</RelativeLayout>

5. Buat TableViewAdapter.java :

package com.azhar.table.adapter;

import android.annotation.SuppressLint;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.azhar.table.R;
import com.azhar.table.model.MovieModel;

import java.util.List;

/**
 * Created by Azhar Rivaldi on 03/11/2019.
 */

public class TableViewAdapter extends RecyclerView.Adapter {

    private List movieList;

    public TableViewAdapter(List movieList) {
        this.movieList = movieList;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.
                from(parent.getContext()).
                inflate(R.layout.table_list_item, parent, false);

        return new RowViewHolder(itemView);
    }

    @SuppressLint("SetTextI18n")
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        RowViewHolder rowViewHolder = (RowViewHolder) holder;

        int rowPos = rowViewHolder.getAdapterPosition();

        if (rowPos == 0) {

            rowViewHolder.txtRank.setBackgroundResource(R.drawable.table_header_cell_bg);
            rowViewHolder.txtMovieName.setBackgroundResource(R.drawable.table_header_cell_bg);
            rowViewHolder.txtYear.setBackgroundResource(R.drawable.table_header_cell_bg);
            rowViewHolder.txtCost.setBackgroundResource(R.drawable.table_header_cell_bg);

            rowViewHolder.txtRank.setText("Rank");
            rowViewHolder.txtMovieName.setText("Name");
            rowViewHolder.txtYear.setText("Year");
            rowViewHolder.txtCost.setText("Budget");
        } else {
            MovieModel modal = movieList.get(rowPos - 1);

            rowViewHolder.txtRank.setBackgroundResource(R.drawable.table_content_cell_bg);
            rowViewHolder.txtMovieName.setBackgroundResource(R.drawable.table_content_cell_bg);
            rowViewHolder.txtYear.setBackgroundResource(R.drawable.table_content_cell_bg);
            rowViewHolder.txtCost.setBackgroundResource(R.drawable.table_content_cell_bg);

            rowViewHolder.txtRank.setText(modal.getRank() + "");
            rowViewHolder.txtMovieName.setText(modal.getMovieName());
            rowViewHolder.txtYear.setText(modal.getYear() + "");
            rowViewHolder.txtCost.setText(modal.getBudgetInMillions() + "");
        }
    }

    @Override
    public int getItemCount() {
        return movieList.size() + 1;
    }

    public class RowViewHolder extends RecyclerView.ViewHolder {
        TextView txtRank;
        TextView txtMovieName;
        TextView txtYear;
        TextView txtCost;

        RowViewHolder(View itemView) {
            super(itemView);
            txtRank = itemView.findViewById(R.id.txtRank);
            txtMovieName = itemView.findViewById(R.id.txtMovieName);
            txtYear = itemView.findViewById(R.id.txtYear);
            txtCost = itemView.findViewById(R.id.txtCost);
        }
    }
}

6. Buat table_list_item.xml untuk menampilkan isi tabel :

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

    <TextView
        android:id="@+id/txtRank"
        android:layout_width="56dp"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:background="@drawable/table_content_cell_bg"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtMovieName"
        android:layout_width="260dp"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@drawable/table_content_cell_bg"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtYear"
        android:layout_width="124dp"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:background="@drawable/table_content_cell_bg"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtCost"
        android:layout_width="128dp"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:background="@drawable/table_content_cell_bg"
        android:textAlignment="center"
        android:textSize="18sp" />

</LinearLayout>

7. Buat MovieModel.java Modelnya :

package com.azhar.table.model;

/**
 * Created by Azhar Rivaldi on 03/11/2019.
 */

public class MovieModel {
    private int rank;
    private String movieName;
    private int year;
    private int budgetInMillions;

    public MovieModel(int rank, String movieName, int year, int budgetInMillions) {
        this.rank = rank;
        this.movieName = movieName;
        this.year = year;
        this.budgetInMillions = budgetInMillions;
    }

    public int getRank() {
        return rank;
    }

    public void setRank(int rank) {
        this.rank = rank;
    }

    public String getMovieName() {
        return movieName;
    }

    public void setMovieName(String movieName) {
        this.movieName = movieName;
    }

    public int getYear() {
        return year;
    }

    public void setYear(int year) {
        this.year = year;
    }

    public int getBudgetInMillions() {
        return budgetInMillions;
    }

    public void setBudgetInMillions(int budgetInMillions) {
        this.budgetInMillions = budgetInMillions;
    }
}

8. Untuk background header dari tabelnya, kalian bisa unduh DISINI ya. Selesai dan kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Tabel dengan RecyclerView | Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_