Recycler view is a more advanced version of List View. It is used for displaying 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 going to start our Android Recycler View and Card 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. Lastly, 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 card view 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 is java as well. I didn’t change the file names 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(); }
}
By: Faizan Abbas
Leave a Reply