Membuat Aplikasi CardView dan RecyclerView Sederhana

Hai sobat, lama tidak posting tentang pemrograman android karena jadwal yang padat dan project pada numpuk hehe. Pada artikel andriod sebelumnya saya telah menjelaskan tentang Membuat Aplikasi Portal Berita , dan kali ini saya akan memjelaskan cara membuat aplikasi sederhana yang menggunakan CardView dan RecyclerView, berikut caranya

RecyclerView adalah teknologi baru dari ListView. RecyclerView memiliki kelebihan yang membuatnya lebih mudah untuk diatur, tampilan dari RecyclerView juga lebih bagus karena bersifat fleksibel serta animasi tampil dan hilang objek yang lebih bagus.

CardView adalah sebuah view atau widget yang memberikan tampian seperti kertas yang mengambang pada layar. Tampilan ini biasanya digunakan untuk menampilkan informasi berupa teks atau gambar di dalamnya. CardView sendiri termasuk dari bagian UI Material Design.

Membuat/ Project Baru

Buat project baru dengan nama Recycler View 1, dan untuk package beri nama blogsetyaaji.com. Saat berada pada jendela pilihan activity, pilih empty activity.

Menginstal Library Dependencies

Instal RecyclerView dan CardView dependencies dengan membuka build:grandle lalu tambahkan kode di bawah ini

compile 'com.android.support:cardview-v7:24.0.0'
    compile 'com.android.support:recyclerview-v7:24.0.0'

Pada bagian atas akan muncul pilihan untuk mensingkronisasi dependencies, pilih sync the project dan library akan terdownload.

Membuat Layout

Pada activity_main.xml hanya menampilkan satu widget RecyclerView, kodenya seperti berikut ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blogsetyaaji.recyclerview1.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:id="@+id/card_recycler_view"/>
</LinearLayout>

Kemudian buat layout baru dengan nama card_row.xml, layout ini untuk menampilkan item dari RecyclerView yaitu CardView dengan TextView di dalamnya. Untuk kodenya seperti berikut ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    android:layout_marginTop="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    card_view:cardCornerRadius="5dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nama_kota"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_gravity="center"
        android:textSize="18sp"
        android:textStyle="bold"/>

</android.support.v7.widget.CardView>

Membuat Adapter 

Sebelum mengimplementasikan RecyclerView ke MainActivity, kita perlu membuat adapter untuk megatur tiap data ke satuan list item. Di dalam adapter terdapat inner ViewHolder yang mengextend ke RecyclerView.ViewHolder untuk menginisialkan TextView. RecyclerView.Adapter adalah induk class, contructor pada class ini menggunakan parameter ArrayList dan kota sebagai nilainya. Pada method onCreateViewHolder(), kita inflate atau masukkan layout yang akan menampikan list data lalu mengembalikan sebagai object ViewHolder. Pada method onBindViewHolder() berguna untuk mengatur TextView menjadi List item data dari ArrayList, dan getItemCount() berguna untuk mengembalikan ukuran/jumlah data yang akan ditampilkan.

package com.blogsetyaaji.recyclerview1;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by AJISETYA on 8/18/2016.
 */
public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {
    private ArrayList<String> kota;

    public DataAdapter(ArrayList<String> kota){
        this.kota = kota;
    }


    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_row, viewGroup, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(DataAdapter.ViewHolder viewHolder, int i) {

        viewHolder.txtkota.setText(kota.get(i));
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView txtkota;
        public ViewHolder(View view) {
            super(view);

            txtkota = (TextView)view.findViewById(R.id.nama_kota);
        }
    }
}

Membuat Activity

Dalam MainActivity, kita membuat ArrayList baru untuk memasukkan data ke dalam list. Adapter akan menginialisis data dengan menggunakan new DataAdapter(kota) dan kota adalah ArrayList yang tadi dibuat. Adapter diatur dengan menggunakan setAdapter().

package com.blogsetyaaji.recyclerview1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ArrayList<String> kota;

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

    private void initView(){
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
        recyclerView.setHasFixedSize(true);

        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(layoutManager);

        kota = new ArrayList<>();
        kota.add("Semarang");
        kota.add("Jakarta");
        kota.add("Surabaya");
        kota.add("Bandung");
        kota.add("Srakarta");
        kota.add("Depok");
        kota.add("Semarang");
        kota.add("Kendal");
        kota.add("Bogor");

        RecyclerView.Adapter adapter = new DataAdapter(kota);
        recyclerView.setAdapter(adapter);

        recyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            GestureDetector gestureDetector = new GestureDetector(getApplicationContext(), new GestureDetector.SimpleOnGestureListener() {

                public boolean onSingleTapUp(MotionEvent e){
                    return true;
                }
            });

            @Override
            public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
                View child = rv.findChildViewUnder(e.getX(), e.getY());
                if (child != null && gestureDetector.onTouchEvent(e)){
                    int position = rv.getChildAdapterPosition(child);
                    Toast.makeText(getApplicationContext(), kota.get(position), Toast.LENGTH_SHORT).show();
                }
                return false;
            }

            @Override
            public void onTouchEvent(RecyclerView rv, MotionEvent e) {

            }

            @Override
            public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

            }
        });
    }
}

Menjalankan Program

Jika sudah selesai, jalankan aplikasi denganmemilih menu Run 'app'