Working With RecyclerView And CardView In Android

Introduction

 

RecyclerView is one of the most important Views in Android development. Its name itself is a definition. It recycles a View. And, what is that view? It’s a card. The card holds the data of the user, and the RecyclerView displays it.

 

Think of your visiting card. It carries your information. Now, you make a stamp and it acts like a Recycler and prints your information on the card.

 

The relation of RecyclerView and CardView in Android is the same. Let us look at the crucial steps required to build your best View application.

1. RecyclerView.
2. CardView.
3. Adapter.
4. Holder.
5. Data (mostly in list form).
6. Send data to the Adapter class and assign that adapter to RecyclerView.

Step 1- Make a RecyclerView

 

In activity.xml, write the following code.

<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view_doctor_schedual" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" />// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

In Java back-end file, declare these global variables.

RecyclerView mSchedualRecyclerView;
private static RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager layoutManager;

And, write this private function. Remember to call it in onCreate.

private void initRecyclerView() {
    mSchedualRecyclerView = (RecyclerView) findViewById(R.id.recycler_view_doctor_schedual);
    mSchedualRecyclerView.setHasFixedSize(true);
    mSchedualRecyclerView.setItemAnimator(new DefaultItemAnimator());
    layoutManager = new LinearLayoutManager(this);
    mSchedualRecyclerView.setLayoutManager(layoutManager);
}

So far, we have added a RecyclerView and initialized it. Now, we will make a card that will take data.

 

Step 2- Create a Card

 

Add a layout resource file and name it. I will recommend to start the name with card prefix so that you can find it easily in any project.

 

 

Now, add this code in your resource file.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
    <android.support.v7.widget.CardView android:id="@+id/card_view" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardBackgroundColor="@android:color/transparent" card_view:cardElevation="0dp">
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
            <TextView android:id="@+id/text_view_name" android:layout_width="match_parent" android:layout_height="wrap_content" />
            <TextView android:id="@+id/text_view_address" android:layout_width="match_parent" android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Remember

 

Always, make heights as “wrap_content,” otherwise it will create UI problems. At this point, your RecyclerView and Card both are ready. Now, we need the data and an adapter.

 

Step 3- Create an Adapter

 

You can think of an adapter as a switchboard base that will hold all the switches i.e list of customer names and addresses.

 

Make a model class.

public class Customer {
    public static String mCustomerName;
    public static String mCustomerAddress;
}

So far, everything has been simple. Now, a little tricky portion comes in, i.e. making an adapter. But, don’t worry! Just follow the following steps.

 

Make a class

public class CustomerAdapter {}

Step 4- Make a ViewHolder Class inside Adapter Class

 

Create a class inside CustomerAdapter, that will extend RecyclerView.ViewHolder.

 

Now, your code will look like this.

public class CustomerAdapter {
    public class CustomerViewHolder extends RecyclerView.ViewHolder {
        public CustomerViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Now, extend the main class with extends RecyclerView.Adapter<CustomerAdapter.CustomerViewHolder>

 

And then, implement the methods. Now, your final adapter code will look like this.

public class CustomerAdapter extends RecyclerView.Adapter < CustomerAdapter.CustomerViewHolder > {
    @Override
    public CustomerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }
    @Override
    public void onBindViewHolder(CustomerViewHolder holder, int position) {}
    @Override
    public int getItemCount() {
        return 0;
    }
    public class CustomerViewHolder extends RecyclerView.ViewHolder {

        public CustomerViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Now, your adapter is ready. So, you need to tell your adapter which card it will use to show the data.

 

Make the following changes in the above onCreate View Holder Override function.

@Override
public CustomerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_layout_schedual, parent, false);
    return new CustomerViewHolder(view);
}

The adapter's main function is to take a list of customers to bind with the card. Then, the RecyclerView will show that card to the user. For this purpose, add the following in CustomerAdapter class.

List < Customer > mCustomerList;
public CustomerAdapter(List < Customer > customerList) {
this.mCustomerList = customerList;
}

The above constructor will provide a list of customers and in order to show data, now your final adapter will look like this.

public class CustomerAdapter extends RecyclerView.Adapter < CustomerAdapter.CustomerViewHolder > {
    List < Customer > mCustomerList;
    public CustomerAdapter(List < Customer > customerList) {
        this.mCustomerList = customerList;
    }
    @Override
    public CustomerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_customer, parent, false);
        return new CustomerViewHolder(view);
    }
    @Override
    public void onBindViewHolder(CustomerViewHolder holder, int position) {
        Customer customer = mCustomerList.get(position);
        holder.tvName.setText(customer.mCustomerName);
        holder.tvAddress.setText(customer.mCustomerAddress);
    }
    @Override
    public int getItemCount() {
        return mCustomerList.size();
    }
    public class CustomerViewHolder extends RecyclerView.ViewHolder {
        TextView tvName, tvAddress;
        public CustomerViewHolder(View itemView) {
            super(itemView);
            this.tvName = (TextView) itemView.findViewById(R.id.text_view_name);
            this.tvAddress = (TextView) itemView.findViewById(R.id.text_view_address);
        }
    }
}

The CustomerViewHolder initializes the TextViews and on BindViewHolder set the text of TextViews from the data in the list.

 

Step 5- Get your Data

 

Now, go to your activity and add a method to add customers in list.

private List < Customer > setmCustomerList() {
    mCustomerList = new ArrayList < Customer > ();
    Customer customer = new Customer();
    customer.mCustomerName = "First Customer Name";
    customer.mCustomerAddress = "First CustomerAddress";
    customer = new Customer();
    mCustomerList.add(customer);
    customer.mCustomerName = "2nd Customer Name";
    customer.mCustomerAddress = "2nd CustomerAddress";
    customer = new Customer();
    mCustomerList.add(customer);
    customer.mCustomerName = "3rd Customer Name";
    customer.mCustomerAddress = "3rd CustomerAddress";
    mCustomerList.add(customer);
    customer = new Customer();
    customer.mCustomerName = "4th Customer Name";
    customer.mCustomerAddress = "4th CustomerAddress";
    mCustomerList.add(customer);
    return mCustomerList;
}

Step 6 Give Adapter to RecyclerView

 

Now, edit initRecyclerView(). It will look like this.

private void initRecyclerView() {
    mSchedualRecyclerView = (RecyclerView) findViewById(R.id.recycler_view_doctor_schedual);
    mSchedualRecyclerView.setHasFixedSize(true);
    //setting animation
    mSchedualRecyclerView.setItemAnimator(new DefaultItemAnimator());
    layoutManager = new LinearLayoutManager(this);
    //binding layout with recycler view
    mSchedualRecyclerView.setLayoutManager(layoutManager);
    //assigning adapter to RecyclerView
    adapter = new CustomerAdapter(setmCustomerList());
    mSchedualRecyclerView.setAdapter(adapter);
}

Now, you are good to go.