(Tutorial Android) Recyclerview And Cardview Android Material Design


Mulai dari Android versi Lollipop memperkenalkan fitur terbarunya yaitu RecyclerView dan CardView. Dua widget ini sanggup memperlihatkan kemudahan.

RecyclerView lebih advanced dan fleksibel dibandingkan dengan ListView, bisa 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 sanggup customizing tampilannya.

Mari kita coba menciptakan 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 simpulan 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) {         simpulan 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 risikonya ibarat ini. *sory TS nya ngidol :v


Source code sanggup dilihat di https://github.com/andronut/AndroidRecyclerView

Sekian dan terima kasih.
Happy Coding :)

Comments

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Tugas Komplemen Terakhir

Konsep Oop Encapsulation