Table pada Android Studio

By | February 1, 2022
Print Friendly, PDF & Email
157 Views

Table merupakan komponen untuk menyajikan data dalam bentuk tabular. Android sudah menyediakan component tersendiri dengan nama Table Layout dan dipadukan dengan class TableRow. Keuntungan menggunakan TableRow yaitu memudahkan akses lanjutan seperti action listener. Untuk tutorialnya kita akan gunakan sebuah class POJO/entitas (setter/getter) namun kalian juga bisa menggunakan teknik lain, ini hanya sekedar contoh saja cara menggunakan table pada android studio.

Membuat class entitas product

Kita mulai dari membuat class entitas product dengan implementasi serialisasi tentunya.

public class Product implements Serializable {

    private String id;

    private String name;

    private double price;

    private String description;

    private int photo;

    public String getId() {
        return this.id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return this.price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getDescription() {
        return this.description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public int getPhoto() {
        return this.photo;
    }

    public void setPhoto(int photo) {
        this.photo = photo;
    }

    public Product() {
    }

    public Product(String id, String name, double price, String description, int photo) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.description = description;
        this.photo = photo;
    }
}

 

Tambahkan Gambar di Drawble

Agar nanti tampilkan table menarik, kita letakan gambar sebagai demo yaitu drawable/flower.png

Activity Layout

Kita buat activity Layout sederhana saja tanpa ada tombol yang berguna untuk menampilkan data table. Jangan lupa untuk menggunakan Scroll View

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity3">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="MissingConstraints">
        <TableLayout
            android:id="@+id/tableLayoutProduct"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
        </TableLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Main Activity

Pada main activity akan dibuat beberapa method yaitu

  • initView() untuk init component TableLayout
  • loadData() untuk init item product
  • createColumn() untuk membuat column
  • fillData() untuk mengisi data table yang didalamnya juga kita tambahkan action listener
public class MainActivity3 extends AppCompatActivity {

    private TableLayout tableLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        initView();
        loadData();
    }
    private void initView() {
        tableLayout = (TableLayout) findViewById(R.id.tableLayoutProduct);
    }

    private void loadData() {
        List<Product> products = new ArrayList<Product>();
        products.add(new Product("p01", "Name 1", 4, "Product 1", R.drawable.flower));
        products.add(new Product("p02", "Name 2", 8, "Product 2", R.drawable.flower));
        products.add(new Product("p03", "Name 3", 9, "Product 3", R.drawable.flower));
        products.add(new Product("p04", "Name 4", 11, "Product 4", R.drawable.flower));
        products.add(new Product("p05", "Name 5", 5, "Product 5", R.drawable.flower));
        products.add(new Product("p06", "Name 6", 21, "Product 6", R.drawable.flower));
        products.add(new Product("p07", "Name 7", 15, "Product 7", R.drawable.flower));
        products.add(new Product("p08", "Name 8", 8, "Product 8", R.drawable.flower));
        products.add(new Product("p09", "Name 9", 32, "Product 9", R.drawable.flower));

        createColumns();

        fillData(products);

    }

    private void createColumns() {
        TableRow tableRow = new TableRow(this);
        tableRow.setLayoutParams(new TableRow.LayoutParams(
                TableRow.LayoutParams.MATCH_PARENT,
                TableRow.LayoutParams.WRAP_CONTENT));

        // Id Column
        TextView textViewId = new TextView(this);
        textViewId.setText("Id");
        textViewId.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewId.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewId);

        // Name Column
        TextView textViewName = new TextView(this);
        textViewName.setText("Name");
        textViewName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewName.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewName);

        // Price Column
        TextView textViewPrice = new TextView(this);
        textViewPrice.setText("Price");
        textViewPrice.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewPrice.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewPrice);

        // Photo Column
        TextView textViewPhoto = new TextView(this);
        textViewPhoto.setText("Photo");
        textViewPhoto.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewPhoto.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewPhoto);

        tableLayout.addView(tableRow, new TableLayout.LayoutParams(
                TableRow.LayoutParams.FILL_PARENT,
                TableRow.LayoutParams.WRAP_CONTENT));

        // Add Divider
        tableRow = new TableRow(this);
        tableRow.setLayoutParams(new TableRow.LayoutParams(
                TableRow.LayoutParams.FILL_PARENT,
                TableRow.LayoutParams.WRAP_CONTENT));

        // Id Column
        textViewId = new TextView(this);
        textViewId.setText("-----------");
        textViewId.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewId.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewId);

        // Name Column
        textViewName = new TextView(this);
        textViewName.setText("-----------");
        textViewName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewName.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewName);

        // Price Column
        textViewPrice = new TextView(this);
        textViewPrice.setText("-----------");
        textViewPrice.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewPrice.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewPrice);

        // Photo Column
        textViewPhoto = new TextView(this);
        textViewPhoto.setText("-------------------------");
        textViewPhoto.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
        textViewPhoto.setPadding(5, 5, 5, 0);
        tableRow.addView(textViewPhoto);

        tableLayout.addView(tableRow, new TableLayout.LayoutParams(
                TableRow.LayoutParams.MATCH_PARENT,
                TableRow.LayoutParams.WRAP_CONTENT));

    }

    private void fillData(List<Product> products) {
        int i = 0;
        for (Product product : products) {
            System.out.println("urutan "+i);
            TableRow tableRow = new TableRow(this);
            tableRow.setLayoutParams(new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));

            tableRow.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    TableRow currentRow = (TableRow) view;
                    TextView textViewId = (TextView) currentRow.getChildAt(0);
                    String id = textViewId.getText().toString();
                    Toast.makeText(getApplicationContext(), id, Toast.LENGTH_LONG).show();
                }
            });

            // Id Column
            TextView textViewId = new TextView(this);
            textViewId.setText(product.getId());
            textViewId.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
            textViewId.setPadding(5, 5, 5, 0);
            tableRow.addView(textViewId);

            // Name Column
            TextView textViewName = new TextView(this);
            textViewName.setText(product.getName());
            textViewName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
            textViewName.setPadding(5, 5, 5, 0);
            tableRow.addView(textViewName);

            // Price Column
            TextView textViewPrice = new TextView(this);
            textViewPrice.setText("Rp "+ String.valueOf(product.getPrice()));
            textViewPrice.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
            textViewPrice.setPadding(5, 5, 5, 0);
            tableRow.addView(textViewPrice);

            // Photo Column
            ImageView imageViewPhoto = new ImageView(this);
            imageViewPhoto.setImageResource(product.getPhoto());
            tableRow.addView(imageViewPhoto);

            tableLayout.addView(tableRow, new TableLayout.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));
        }
    }
}

Berikut aplikasi Table pada Android Studio

Menggunakan component datatable

Selain cara diatas, saya juga menemukan component yang dibuat oleh https://github.com/salehyarahmadi/DataTable hanya saja component tersebut belum adanya fitur action listener.

Leave a Reply

Your email address will not be published.




Enter Captcha Here :