(Tutorial Android) RecyclerView and CardView Android Material Design

Mulai dari Android versi Lollipop memperkenalkan fitur terbarunya yakni RecyclerView dan CardView. Dua widget ini dapat memberikan kemudahan.

RecyclerView lebih advanced dan fleksibel dibandingkan dengan ListView, mampu menampilkan jumlah data yang besar dan lebih efisien dalam mengolah view yang terbatas.

CardView merupakan widget dengan tampilan yang lebih menarik dengan shadow dan rounded corners bawaannya. Selain itu kita dapat customizing tampilannya.

Mari kita coba membuat recyclerview dan cardview.

Pertama, tambahkan dependencies recyclerview dan cardview berikut.

Buat layout untuk activity utama.

activity_main.xml

Buatlah beberapa layout lagi untuk menampilkan list data.

fragment_member.xml
Pada layout ini tambahkan recyclerview.

list_item_member.xml
Pada layout ini buat desain list itemnya dengan cardview.

Buat kelas untuk model dengan nama Member.java

package com.example.wim.androidrecyclerview.model;

import android.os.Parcel;
import android.os.Parcelable;
/**
 * Created by docotel on 3/7/16.
 */
public class Member implements Parcelable {

    private int id;
    private String name;
    private String team;
    private int thumb;

    public Member() {
    }

    protected Member(Parcel in) {
        id = in.readInt();
        name = in.readString();
        team = in.readString();
        thumb = in.readInt();
    }

    public static final Creator CREATOR = new Creator() {
        @Override
        public Member createFromParcel(Parcel in) {
            return new Member(in);
        }
        @Override
        public Member[] newArray(int size) {
            return new Member[size];
        }
    };

    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

    public String getTeam() {
        return team;
    }

    public void setTeam(String team) {
        this.team = team;
    }

    public int getThumb() {
        return thumb;
    }

    public void setThumb(int thumb) {
        this.thumb = thumb;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeInt(id);
        dest.writeString(name);
        dest.writeString(team);
        dest.writeInt(thumb);
    }

}

Buat Adapter untuk list dan implementasikan recyclerview di sini.

MemberListAdapter.java

package com.example.wim.androidrecyclerview.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.wim.androidrecyclerview.R;
import com.example.wim.androidrecyclerview.model.Member;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by docotel on 3/7/16.
 */
public class MemberListAdapter extends RecyclerView.Adapter>MemberListAdapter.MemberViewHolder>{

    private List<Member> memberList;

    public MemberListAdapter() {
        memberList = new ArrayList<>();
    }

    private void add(Member item) {
        memberList.add(item);
        notifyItemInserted(memberList.size() - 1);
    }

    public void addAll(List memberList) {
        for (Member member : memberList) {
            add(member);
        }
    }

    public void remove(Member item) {
        int position = memberList.indexOf(item);
        if (position > -1) {
            memberList.remove(position);
            notifyItemRemoved(position);
        }
    }

    public void clear() {
        while (getItemCount() > 0) {
            remove(getItem(0));
        }
    }

    public Member getItem(int position){
        return memberList.get(position);
    }

    @Override
    public MemberViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_member, parent, false);
        MemberViewHolder memberViewHolder = new MemberViewHolder(view);
        return memberViewHolder;
    }

    @Override
    public void onBindViewHolder(MemberViewHolder holder, int position) {
        final Member member = memberList.get(position);
        holder.memberThumb.setImageResource(member.getThumb());
        holder.memberName.setText(member.getName());
        holder.memberTeam.setText(member.getTeam());
    }

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

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }

    @Override
    public void onDetachedFromRecyclerView(RecyclerView recyclerView) {
        super.onDetachedFromRecyclerView(recyclerView);
    }

    static class MemberViewHolder extends RecyclerView.ViewHolder {

        ImageView memberThumb;
        TextView memberName;
        TextView memberTeam;

        public MemberViewHolder(View itemView) {
            super(itemView);
            memberThumb = (ImageView) itemView.findViewById(R.id.thumb);
            memberName = (TextView) itemView.findViewById(R.id.name);
            memberTeam = (TextView) itemView.findViewById(R.id.team);
        }
    }

}

Buat sebuah fragment untuk menampilkan list dengan recyclerview

MemberFragment.java

package com.example.wim.androidrecyclerview.fragments;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidrecyclerview.R;
import com.example.wim.androidrecyclerview.adapter.MemberListAdapter;
import com.example.wim.androidrecyclerview.model.Member;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by docotel on 3/7/16.
 */
public class MemberFragment extends Fragment {

    private RecyclerView listMember;
    private LinearLayoutManager linearLayoutManager;
    private MemberListAdapter memberListAdapter;
    protected Context context;

    public static MemberFragment newInstance(){
        return new MemberFragment();
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_member, container, false);
        listMember = (RecyclerView) rootView.findViewById(R.id.listMember);
        return rootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        linearLayoutManager = new LinearLayoutManager(context);
        memberListAdapter = new MemberListAdapter();
        listMember.setLayoutManager(linearLayoutManager);
        listMember.setAdapter(memberListAdapter);
        loadData();
    }
 
   private void loadData(){
        List<Member> memberList = new ArrayList<>();
        Member member;

        int thumb[] = {R.drawable.ayana_shahab, R.drawable.beby_chaseara_anadila, R.drawable.delima_rizky,
                R.drawable.dena_siti_rohyati, R.drawable.elaine_hartanto, R.drawable.frieska_anastasia_laksani,
                R.drawable.gabriella, R.drawable.ghaida, R.drawable.jennifer_rachel_natasya,
                R.drawable.jessica_vania_widjaja, R.drawable.jessica_veranda, R.drawable.melody_nurramdhani_laksani,
                R.drawable.nabilah_ratna_ayu, R.drawable.rezky_wiranti_dhike, R.drawable.sendy_ariani,
                R.drawable.shania_junianantha, R.drawable.shinta_naomi, R.drawable.sofia_meifaliani,
                R.drawable.sonia_natalia, R.drawable.thalia_ivanka_elizabeth_frederik};
        String name[] = {"Ayana Shahab", "Beby Chaesara Anadila", "Delima Rizky", "Dena Siti Rohyati",
                "Elaine Hartanto", "Frieska Anastasia Laksani", "Gabriella M. W.", "Ghaida Farisya",
                "Jennifer Rachel Natasya", "Jessica Vania Widjaja", "Jessica Veranda", "Melody Nurramdhani Laksani",
                "Nabilah Ratna Ayu Azalia", "Rezky Wiranti Dhike", "Sendy Ariani", "Shania Junianatha",
                "Shinta Naomi", "Sofia Meifaliani", "Sonia Natalia", "Thalia Ivanka Elizabeth"};
        String team = "Team J";

        for(int i=0; i < thumb.length; i++){
            member = new Member();
            member.setId(i+1);
            member.setName(name[i]);
            member.setTeam(team);
            member.setThumb(thumb[i]);
            memberList.add(member);
        }

        memberListAdapter.addAll(memberList);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }
}

Buat activity utama dan instance fragment yang telah dibuat.

MainActivity.java

package com.example.wim.androidrecyclerview;

import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.example.wim.androidrecyclerview.fragments.MemberFragment;

public class MainActivity extends AppCompatActivity {

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

        Fragment fragment = getSupportFragmentManager().findFragmentById(android.R.id.content);
        if(fragment == null){
            fragment = MemberFragment.newInstance();
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(android.R.id.content, fragment, "")
                    .commit();
        } else {
            getSupportFragmentManager()
                    .beginTransaction()
                    .attach(fragment)
                    .commit();
        }
    }

}

Deploy dan jalankan di device maka hasilnya seperti ini. *sory TS nya ngidol :v

Source code dapat dilihat di https://github.com/wimsonevel/AndroidRecyclerView

Sekian dan terima kasih.
Happy Coding :)

My Personal Blog

(Tutorial Android) RecyclerView and CardView Android Material Design

Share this :

Wim Sonevel

11 Komentar

Penulisan markup di komentar

Ads