Now lets add a RcyclerView to our layout. Open layout/activity_main.xml file and add the RecycleView.
<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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Let's define our Model for the list item, Let's create a Java class named AndroidVersion.
package com.technoguff.recyclerviewexample;
public class AndroidVersion {
private String codeName;
private String version;
private int icon;
public String getCodeName() {
return codeName;
}
public void setCodeName(String codeName) {
this.codeName = codeName;
}
public String getVersion() {
return version;
}
public void setVersion(String version) {
this.version = version;
}
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
}
Then , create a layout for the item view. Create new layout file named layout_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/ivIcon"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_margin="5dp"/>
<TextView
android:id="@+id/codeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/ivIcon"
android:textStyle="bold"
android:textSize="20sp"
/>
<TextView
android:id="@+id/version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/ivIcon"
android:layout_below="@+id/codeName"
/>
</RelativeLayout>
Now, Create some sample data for our listview by creating an ArrayList of AndroidVersions in MainActivity and create drawable-mdpi folder in res folder of our project. And then place the icons for different versions.
GET THE ICONS HERE.
public class MainActivity extends AppCompatActivity {
private ArrayList<AndroidVersion> mVersionList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Sample Data :: For this tutorial, let's just create sample data in the main activity. In real projects
// we will either get the data for our list item from webservices or local storage.
mVersionList = new ArrayList<AndroidVersion>();
AndroidVersion version = new AndroidVersion();
version = new AndroidVersion();
version.setCodeName("Cupcake");
version.setVersion("Android 1.5");
version.setIcon(R.drawable.cupcake);
mVersionList.add(version);
version = new AndroidVersion();
version.setCodeName("Donut");
version.setVersion("Android 1.6");
version.setIcon(R.drawable.donut);
mVersionList.add(version);
version = new AndroidVersion();
version.setCodeName("Eclair");
version.setVersion("Android 2.0");
version.setIcon(R.drawable.eclair);
mVersionList.add(version);
version = new AndroidVersion();
version.setCodeName("Froyo");
version.setVersion("Android 2.2");
version.setIcon(R.drawable.froyo);
mVersionList.add(version);
version = new AndroidVersion();
version.setCodeName("Gingerbread");
version.setVersion("Android 2.3");
version.setIcon(R.drawable.gingerbread);
mVersionList.add(version);
....
....
....
..
Now we have created the sample data for the list we will now populate it to our RecyclerView. For that let's create an Adapter. RecyclerView provides RecyclerView.Adapter class for creating the adapter. Let's add the adapter.
Create a Java class and extend it from RecyclerView.Adapter, we will have define the ViewHolder for the Adapter so create a View holder. Let's name it MyViewHolder.
Create the required constructor and add the override methods required by the Adapter class.
Now our Adapter looks like this,
public class AndroidVersionAdapter extends RecyclerView.Adapter<AndroidVersionAdapter.MyViewHolder>{
@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
return null;
}
@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
}
@Override
public int getItemCount() {
return 0;
}
class MyViewHolder extends RecyclerView.ViewHolder{
public MyViewHolder(View itemView) {
super(itemView);
}
}
}
Next, we will need the data for the Adapter let's add a constructor to AndroidVersionAdapter.
ArrayList<AndroidVersion> mVersionList;
public AndroidVersionAdapter(ArrayList<AndroidVersion> versionList) {
mVersionList = versionList;
}
Now update MyViewHolder class so that it finds the views in our itemLayout.
//ViewHolder
class MyViewHolder extends RecyclerView.ViewHolder{
TextView codeName;
TextView version;
ImageView iconImage;
public MyViewHolder(View itemView) {
super(itemView);
codeName = (TextView)itemView.findViewById(R.id.codeName);
version = (TextView)itemView.findViewById(R.id.version);
iconImage = (ImageView) itemView.findViewById(R.id.ivIcon);
}
}
Now let's have a look at the three methods that we override.
1)
onCreateViewHolder
onCreateViewHolder is called by the Layout manager when ViewHolder is created to inflate the layout we defined in XML, and ViewHolder finds each view in the given Layout.
2)
onBindViewHolder
onBindViewHolder is also called by the LayoutManager to populate the data to the views.
3)
getItemCount
This method is used by LayoutManager to know the size of our Data.
Let's implement these three methods.
@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
View view = inflater.inflate(R.layout.layout_item, viewGroup, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
AndroidVersion version = mVersionList.get(i);
myViewHolder.codeName.setText(version.getCodeName());
myViewHolder.version.setText(version.getVersion());
myViewHolder.iconImage.setImageResource(version.getIcon());
}
@Override
public int getItemCount() {
return mVersionList.size();
}
Next step is to set this adapter to the RecyclerView.
private RecyclerView mRecyclerView;
private AndroidVersionAdapter mAdapter;
and in onCreate,
LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setAdapter(mAdapter);
We used LinearLayoutManager to arrange our items, Let't run the app and see how it looks.
Now let's change it to GridLayoutManager with span value of 2 which makes the view arrange in two columns.
GridLayoutManager mLayoutManager = new GridLayoutManager(this, 2);
