recycler-view-tutorial-icoderslab

Android Recycler View and Card View Tutorial

Recycler view is a more advanced version of List View. It is used for displaying a larger data. You can show your data in list format as well as grid format. You have to implement custom layout in recycler view. Recycler view has built in view holder functionality while we explicitly make view holder in list view. Recycler view is much faster than the list view. Now we are moving towards the usability of recycler view.

1. Creating New Project

In Android Studio, go to file and create new project and enter the new project and enter the package name and click on next and select the minimum required version of android for your app and click next. In the last, select the blank activity and click on finish.

2. Including Dependency in gradle.build

For using recycler view, you have to include the dependency of recycler view in your gradle file. Open the build.gradle file and add the Recycler view dependency “com.android.support:recyclerview-v7:23.1.1” and I am also using cardview for making custom_list_row so also add the dependency of card view according to appcompat version. sync the project.

dependencies {
 compile 'com.android.support:appcompat-v7:24.2.1'
 compile 'com.android.support:design:24.2.1'
 compile 'com.android.support:recyclerview-v7:24.2.1'
 compile 'com.android.support:cardview-v7:24.2.1'
 }

3. Include Recycler View in activity_main.xml

When you create your project android studio will create the two files one is java file and another java file. I didn’t change the files name so android studio will create them as MainActivity.java and activity_main.xml. Open the activity_main.xl file and add the following code.

<RelativeLayout
 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="recyclerview.com.icoderslab.recyclerviewtutorial.MainActivity">

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

4. Creating Data Model Class

Now, create new java file for creating employee model and declare first_name, last_name, company, city, country and phone and also make the constructor. And also add the getter/setter method for all attribute.

package recyclerview.com.icoderslab.recyclerviewtutorial;

/**
 * Created by Faizan Abbas on 11/11/2016.
 */
 public class EmployeeInfo {
 private String FirstName;
 private String LastName;
 private String CompanyName;
 private String City;
 private String Country;
 private String PhoneNo;

public EmployeeInfo(){}

public EmployeeInfo(String firstName, String lastName, String companyName, String city, String country, String phoneNo) {
 FirstName = firstName;
 LastName = lastName;
 CompanyName = companyName;
 City = city;
 Country = country;
 PhoneNo = phoneNo;
 }

public String getCity() {
 return City;
 }

public void setCity(String city) {
 City = city;
 }

public String getCompanyName() {
 return CompanyName;
 }

public void setCompanyName(String companyName) {
 CompanyName = companyName;
 }

public String getCountry() {
 return Country;
 }

public void setCountry(String country) {
 Country = country;
 }

public String getFirstName() {
 return FirstName;
 }

public void setFirstName(String firstName) {
 FirstName = firstName;
 }

public String getLastName() {
 return LastName;
 }

public void setLastName(String lastName) {
 LastName = lastName;
 }

public String getPhoneNo() {
 return PhoneNo;
 }

public void setPhoneNo(String phoneNo) {
 PhoneNo = phoneNo;
 }
 }

5. Creating Custom Layout for Single Item

Now Create the layout file named as employee_list_row under the res -> layout folder for single item. The layout will render as a single item in a recycler view. Add the following code in the xml file.

<android.support.v7.widget.CardView
     xmlns:card_view="http://schemas.android.com/apk/res-auto"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/card_view"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     card_view:cardCornerRadius="4dp"
     android:layout_marginLeft="5dp"
     android:layout_marginRight="5dp"
     android:layout_marginTop="3dp"
     android:layout_marginBottom="3dp">
     <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_margin="10dp">
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:id="@+id/employee_first_name"
             android:text="Aleshia "
             android:textStyle="bold"
             android:textSize="16sp"
             />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_toEndOf="@+id/employee_first_name"
             android:layout_toRightOf="@+id/employee_first_name"
             android:id="@+id/employee_last_name"
             android:text="Tomkiewicz"
             android:textStyle="bold"
             android:textSize="16sp"/>
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@+id/employee_first_name"
             android:id="@+id/employee_compnay"
             android:layout_marginTop="3dp"
             android:text="Alan D Rosenburg Cpa Pc"
             android:textSize="12sp"
             />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@+id/employee_compnay"
             android:id="@+id/employee_city"
             android:layout_marginTop="2dp"
             android:text="St. Stephens Ward, "
             android:textSize="12sp"
             />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_toEndOf="@+id/employee_city"
             android:layout_toRightOf="@+id/employee_city"
             android:layout_marginTop="2dp"
             android:layout_below="@id/employee_compnay"
             android:id="@+id/employee_country"
             android:text="Kent"
             android:textSize="12sp"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@id/employee_first_name"
             android:id="@+id/employee_phone"
             android:layout_alignParentEnd="true"
             android:layout_alignParentRight="true"
             android:layout_marginTop="3dp"
             android:text="01835-703597"/>
     </RelativeLayout>
 </android.support.v7.widget.CardView>

6. Implement Custom Adapter for Recycler View

Create the java file named as EmployeeInfoAdapter.java and add the given code. Recycler view is just like the list view custom adapter but have some different override methods and has its own view holder. Here onCreateViewHolder() method inflates employee_list_row.xml. In onBindViewHolder() method the appropriate movie data (title, genre and year) set to each row.

public class EmployeeInfoAdapter extends RecyclerView.Adapter {

private List employeeInfoList;

public class MyViewHolder extends RecyclerView.ViewHolder {
 public TextView first_name, last_name, company,city,country,phone;

public MyViewHolder(View view) {
 super(view);
 first_name = (TextView) view.findViewById(R.id.employee_first_name);
 last_name = (TextView) view.findViewById(R.id.employee_last_name);
 company = (TextView) view.findViewById(R.id.employee_compnay);
 city = (TextView) view.findViewById(R.id.employee_city);
 country = (TextView) view.findViewById(R.id.employee_country);
 phone = (TextView) view.findViewById(R.id.employee_phone);
 }
 }

public EmployeeInfoAdapter(List employeeInfoList) {
 this.employeeInfoList = employeeInfoList;
 }

@Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 View itemView = LayoutInflater.from(parent.getContext())
 .inflate(R.layout.employee_list_row, parent, false);

return new MyViewHolder(itemView);
 }

@Override
 public void onBindViewHolder(MyViewHolder holder, int position) {
 EmployeeInfo employeeInfo = employeeInfoList.get(position);
 holder.first_name.setText(employeeInfo.getFirstName()+" ");
 holder.last_name.setText(employeeInfo.getLastName());
 holder.company.setText(employeeInfo.getCompanyName());
 holder.city.setText(employeeInfo.getCity()+", ");
 holder.country.setText(employeeInfo.getCountry());
 holder.phone.setText(employeeInfo.getPhoneNo());

}

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

7. Insert Data in List to show on Recycler View Using Custom Item

In MainActivity.java in the end add the following code for creating dummy data of employees in List.

private void PopulateEmployeeData() {
 EmployeeInfo employeeInfo = new EmployeeInfo("Aleshia", "Tomkiewicz", "Alan D Rosenburg Cpa Pc","St. Stephens Ward","Kent","01835-703597");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Evan", "Zigomalas", "Cap Gemini America","Abbey Ward","Buckinghamshire","01937-864715");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("France", "Andrade", "Elliott, John W Esq","East Southbourne and Tuckton W","Bournemouth","01347-368222");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Ulysses", "Mcwalters", "Mcmahan, Ben L","Hawerby cum Beesby","Lincolnshire","01912-771311");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Tyisha", "Veness", "Champagne Room","Greets Green and Lyng Ward","West Midlands","01547-429341");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Eric", "Rampy", "Thompson, Michael C Esq","Desborough","Northamptonshire","01969-886290");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Marg", "Grasmick", "Wrangle Hill Auto Auct & Slvg","Bargate Ward","Southampton","01865-582516");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Laquita", "Hisaw", "In Communications Inc","Chirton Ward","Tyne & Wear","01746-394243");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Lura", "Manzella", "Bizerba Usa Inc","Staple Hill Ward","South Gloucestershire","01907-538509");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Yuette", "Klapec", "Max Video","Parwich","Derbyshire","01903-649460");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Fernanda", "Writer", "K & R Associates Inc","Wilmington","Kent","01630-202053");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Charlesetta", "Erm", "Cain, John M Esq","Loundsley Green Ward","Derbyshire","01276-816806");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Corrinne", "Jaret", "Sound Vision Corp","Dee Ward","Dumfries and Galloway","01625-932209");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Niesha", "Bruch", "Rowley/hansell Petetin","Broxburn, Uphall and Winchburg","West Lothian","01874-856950");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Rueben", "Gastellum", "Industrial Engineering Assocs","Weston-Super-Mare","North Somerset","01976-755279");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Michell", "Throssell", "Weiss Spirt & Guyer","Carbrooke","Norfolk","01967-580851");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Edgar", "Kanne", "Crowan, Kenneth W Esq","New Milton","Hampshire","01326-532337");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Dewitt", "Julio", "Rittenhouse Motor Co","Parkham","Devon","01253-528327");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Charisse", "Spinello", "Modern Plastics Corp","Darnall Ward","Yorkshire, South","01719-831436");
 employeeInfoList.add(employeeInfo);

employeeInfoAdapter.notifyDataSetChanged();
 }

8. Initializing RecyclerView and setting Adapter

Now, create custom adapter object and send the list to the adapter and also Reference the recycler view from xml to Recycler widget provided by java and set the adapter to recycler view.


 recyclerView = (RecyclerView) findViewById(R.id.employee_recycler_view);
 employeeInfoAdapter = new EmployeeInfoAdapter(employeeInfoList);
 RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
 recyclerView.setLayoutManager(mLayoutManager);
 recyclerView.setItemAnimator(new DefaultItemAnimator());
 recyclerView.setAdapter(employeeInfoAdapter);

9. Implementation of MainActivity

Here is the complete code of MainActivity.java.

public class MainActivity extends AppCompatActivity {
 private List employeeInfoList = new ArrayList();
 private RecyclerView recyclerView;
 private EmployeeInfoAdapter employeeInfoAdapter;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 recyclerView = (RecyclerView) findViewById(R.id.employee_recycler_view);

employeeInfoAdapter = new EmployeeInfoAdapter(employeeInfoList);
 RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
 recyclerView.setLayoutManager(mLayoutManager);
 recyclerView.setItemAnimator(new DefaultItemAnimator());
 recyclerView.setAdapter(employeeInfoAdapter);
 PopulateEmployeeData();

}

private void PopulateEmployeeData() {
 EmployeeInfo employeeInfo = new EmployeeInfo("Aleshia", "Tomkiewicz", "Alan D Rosenburg Cpa Pc","St. Stephens Ward","Kent","01835-703597");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Evan", "Zigomalas", "Cap Gemini America","Abbey Ward","Buckinghamshire","01937-864715");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("France", "Andrade", "Elliott, John W Esq","East Southbourne and Tuckton W","Bournemouth","01347-368222");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Ulysses", "Mcwalters", "Mcmahan, Ben L","Hawerby cum Beesby","Lincolnshire","01912-771311");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Tyisha", "Veness", "Champagne Room","Greets Green and Lyng Ward","West Midlands","01547-429341");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Eric", "Rampy", "Thompson, Michael C Esq","Desborough","Northamptonshire","01969-886290");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Marg", "Grasmick", "Wrangle Hill Auto Auct & Slvg","Bargate Ward","Southampton","01865-582516");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Laquita", "Hisaw", "In Communications Inc","Chirton Ward","Tyne & Wear","01746-394243");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Lura", "Manzella", "Bizerba Usa Inc","Staple Hill Ward","South Gloucestershire","01907-538509");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Yuette", "Klapec", "Max Video","Parwich","Derbyshire","01903-649460");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Fernanda", "Writer", "K & R Associates Inc","Wilmington","Kent","01630-202053");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Charlesetta", "Erm", "Cain, John M Esq","Loundsley Green Ward","Derbyshire","01276-816806");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Corrinne", "Jaret", "Sound Vision Corp","Dee Ward","Dumfries and Galloway","01625-932209");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Niesha", "Bruch", "Rowley/hansell Petetin","Broxburn, Uphall and Winchburg","West Lothian","01874-856950");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Rueben", "Gastellum", "Industrial Engineering Assocs","Weston-Super-Mare","North Somerset","01976-755279");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Michell", "Throssell", "Weiss Spirt & Guyer","Carbrooke","Norfolk","01967-580851");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Edgar", "Kanne", "Crowan, Kenneth W Esq","New Milton","Hampshire","01326-532337");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Dewitt", "Julio", "Rittenhouse Motor Co","Parkham","Devon","01253-528327");
 employeeInfoList.add(employeeInfo);

employeeInfo = new EmployeeInfo("Charisse", "Spinello", "Modern Plastics Corp","Darnall Ward","Yorkshire, South","01719-831436");
 employeeInfoList.add(employeeInfo);

employeeInfoAdapter.notifyDataSetChanged(); }
 }

recycler-view-tutorialDownload Code

By: Faizan Abbas

Leave a Reply

Your email address will not be published. Required fields are marked *