Membuat Tabel dengan RecyclerView

Tutorial Membuat Tabel dengan RecyclerView | Android Studio

Membuat Tabel dengan RecyclerView – 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. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

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.

TRENDING:  Melihat Histori Video Youtube yang Sudah Pernah Ditonton

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.