Wednesday, March 9, 2016

(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 :)
Share This
Previous Post
Next Post

Pellentesque vitae lectus in mauris sollicitudin ornare sit amet eget ligula. Donec pharetra, arcu eu consectetur semper, est nulla sodales risus, vel efficitur orci justo quis tellus. Phasellus sit amet est pharetra

0 komentar: