(Tutorial Android) RecyclerView and CardView Android Material Design

Thursday, March 10, 2016

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 :)

Share this :

Previous
Next Post »
8 Komentar
avatar

bang tuh kalo di klik saah satu dari list nya terus pindah ke actvity lain . gimana caranya ??? kirim ke email saya bang.. mohon bantuannya priuuk@gmail.com

Balas
avatar

gimana caranya kalo salah satu list di klik akan menjalankan suatu fungsi?

Balas
avatar

contohnya ada di tutorial ini gan https://wimsonevel.blogspot.co.id/2016/05/tutorial-android-tutorial-cud-with.html

Balas
avatar

contohnya ada di tutorial ini gan https://wimsonevel.blogspot.co.id/2016/05/tutorial-android-tutorial-cud-with.html

Balas
avatar

Simple juga ya gan ternyata cara membuatnya. Terimakasih sudah membagikan ilmunya gan.

Balas
This comment has been removed by the author. - Hapus
avatar

http://wimsonevel.blogspot.co.id/2016/05/tutorial-android-tutorial-crud-with.html
maksud e iki a?

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔