Android RecyclerView is more advanced version of ListView with improved performance and other benefits. In this tutorial i am using creating vertical and horizontal listing with card view.
Steps to use recycle view in your project.
- Crate a project in android studio.
- Open build.gradle(app) and add some dependency
//add dependency for card view
compile 'com.android.support:cardview-v7:21.0.+'
//add dependency for recycler view
compile 'com.android.support:recyclerview-v7:21.0.+' - Open your main_activity.xml and update it-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:background="#30000000"
android:padding="@dimen/activity_vertical_margin"
tools:context="com.pankaj.recycler.cardview.demo.MainActivity">
<!--title of the horizontal listing-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horizontal Listing"
android:textColor="@color/colorPrimary"
android:textStyle="bold" />
<!--recycler view for horizontal listing-->
<android.support.v7.widget.RecyclerView
android:id="@+id/rvHorizontal"
android:layout_width="match_parent"
android:layout_height="60dp" />
<!--title of the vertical listing-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Vertical Listing"
android:textColor="@color/colorPrimary"
android:textStyle="bold" />
<!--recycler view for vertical listing-->
<android.support.v7.widget.RecyclerView
android:id="@+id/rvVertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout> - Create a custom child view for vertical listing(row_of_vertical_listing.xml).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="2dp">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:elevation="3dp"
android:foreground="?android:selectableItemBackground"
card_view:cardCornerRadius="5dp"
card_view:contentPadding="5dp">
<!--contant of the row-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--title text-->
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="title"
android:textStyle="bold" />
<!--message text-->
<TextView
android:id="@+id/tvMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="message" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout> - Create a custom child view for horizontal listing(row_of_horizontal_listing.xml).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="2dp">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:elevation="3dp"
android:foreground="?android:selectableItemBackground"
card_view:cardCornerRadius="5dp"
card_view:contentPadding="5dp">
<!--contant of the row-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--title text-->
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="title"
android:textStyle="bold" />
<!--message text-->
<TextView
android:id="@+id/tvMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="message" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout> - Create a custom recyclers view adapter (MyAdapter.JAVA)
package com.pankaj.recycler.cardview.demo;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;
/**
* Created by android_studio on 7/12/16.
*/
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
//________create number of objects according to your need
private ArrayList<String> titleDataList;
private ArrayList<String> messageDataList;
boolean isHorizontalList;
//________create constructor with required parameter
public MyAdapter(ArrayList<String> titleDataList, ArrayList<String> messageDataList, boolean isHorizontalList) {
//________initialize
this.titleDataList = titleDataList;
this.messageDataList = messageDataList;
this.isHorizontalList = isHorizontalList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView;
//________show data in the horizontal listing
if (isHorizontalList) {
itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_of_horizontal_listing, parent, false);
}
//________show data in the vertical listing
else {
itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_of_vertical_listing, parent, false);
}
//________return child view
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
//________set data to the objects of each row widget
holder.tvTitle.setText(titleDataList.get(position));
holder.tvMessage.setText(messageDataList.get(position));
}
@Override
public int getItemCount() {
return titleDataList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
//________create objects of each row widget
public TextView tvTitle, tvMessage;
public ViewHolder(View view) {
super(view);
//________initialize objects of each row widget
tvTitle = (TextView) view.findViewById(R.id.tvTitle);
tvMessage = (TextView) view.findViewById(R.id.tvMessage);
}
}
} - Open your MainActivity.JAVA class and update it -
package com.pankaj.recycler.cardview.demo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
//________create object
private RecyclerView rvVertical, rvHorizontal;
private ArrayList<String> titleDataList;
private ArrayList<String> messageDataList;
private RecyclerView.LayoutManager mLayoutManagerHorizontal;
private RecyclerView.LayoutManager mLayoutManagerVertical;
private MyAdapter verticalAdapter;
private MyAdapter horizontalAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//________initialize
rvVertical = (RecyclerView) findViewById(R.id.rvVertical);
rvHorizontal = (RecyclerView) findViewById(R.id.rvHorizontal);
titleDataList = new ArrayList<>();
messageDataList = new ArrayList<>();
//________add dummy titles and message
for (int i = 1; i <= 50; i++) {
titleDataList.add("Title " + i);
messageDataList.add("message " + i);
}
//________initialize adapters
verticalAdapter = new MyAdapter(titleDataList, messageDataList, false);
horizontalAdapter = new MyAdapter(titleDataList, messageDataList, true);
//________initialize layout managers
mLayoutManagerHorizontal = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
mLayoutManagerVertical = new LinearLayoutManager(this);
//________set layout managers
rvHorizontal.setLayoutManager(mLayoutManagerHorizontal);
rvVertical.setLayoutManager(mLayoutManagerVertical);
//________set adapters
rvHorizontal.setAdapter(horizontalAdapter);
rvVertical.setAdapter(verticalAdapter);
}
} - Now all the development steps for recycler view and card view with horizontal and vertical listing has completed, Please run the application and see the screen of device.
- Good bye, Thanks to read this blog.
