Custom Android lists with CardView and RecyclerView

android 5.0 (Lollipop), Google introduced two new Widgets: RecyclerView and CardView. The RecyclerView is a more advanced and more flexible version of the ListView. This new component is a big step because the ListView is one of the most used UI widgets. The CardView widget, on the other hand, is a new component that does not “upgrade” an existing component. In this tutorial I will show you how to make custom lists using these two new widgets.

In this Tutorial, I will be showing you how to make an app with a Card-like list. This app is just a very simple example to get you started, It is designed very similiarly to the image example Google provides in their documentations ( Learn More). Please follow the steps below to make the app:

Getting Started

1. Create a new project in Android Studio, I have left my main activty name as MainActivity.java and gave the package name as exoguru.lists.com.naturepics.

2. Add the following libraries to the Build.Gradle file.

apply plugin: com.android.application
android {
compileSdkVersion 21
buildToolsVersion 21.1.1
defaultConfig {
applicationId exoguru.lists.com.naturepics
minSdkVersion 16
targetSdkVersion 21
versionCode 1
versionName 1.0
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile(proguard-android.txt), proguard-rules.pro
}
}
}
dependencies {
compile fileTree(dir: libs, include: [*.jar])
compile com.android.support:appcompat-v7:21.0.3
compile com.android.support:recyclerview-v7:21.0.3
compile com.android.support:cardview-v7:21.0.3
compile com.android.support:support-v4:21.0.3
}
view rawbuild1.gradle hosted with ❤ by GitHub

3. Now add the follwoing code in your styles.xml to add the material theme color palette, click here learn more about Material Themes.

<resources>
<!– Base application theme. –>
<style name=Theme parent=Theme.AppCompat.Light.DarkActionBar>
<!– customize the color palette –>
<item name=colorPrimary>@color/primary</item>
<item name=colorPrimaryDark>@color/primary_dark</item>
<item name=colorAccent>@color/accent</item>
</style>
</resources>
view rawstyles1.xml hosted with ❤ by GitHub

Adding The Layout Files

4. Firstly we need to add the RecyclerView to our layout. In order to do this, you need to place to following into your activity_main.xml file.

<?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.support.v7.widget.RecyclerView
android:id=@+id/recycler_view
android:layout_width=match_parent
android:layout_height=match_parent/>
</LinearLayout>

5. Now you need to create the Layout for the list Item using CardView. In order to do this, firstly you have to make an xml file in the Layouts Directory and then paste the following code into it. I have called itrecycler_view_card_item.xml.

<?xml version=1.0 encoding=utf-8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
xmlns:card_view=http://schemas.android.com/apk/res-auto
android:layout_width=match_parent
android:layout_height=match_parent
android:orientation=vertical>
<android.support.v7.widget.CardView
android:layout_width=fill_parent
android:layout_height=wrap_content
card_view:cardCornerRadius=3dp
android:layout_marginTop=9dp
android:layout_marginLeft=9dp
android:layout_marginRight=9dp
card_view:cardElevation=0.01dp
android:layout_marginBottom=0dp>
<RelativeLayout
android:id=@+id/top_layout
android:layout_width=fill_parent
android:layout_height=338dp>
<ImageView
android:id=@+id/img_thumbnail
android:layout_width=fill_parent
android:layout_height=250dp
android:scaleType=fitXY
android:layout_marginBottom=50dp/>
<TextView
android:id=@+id/tv_nature
android:layout_width=fill_parent
android:layout_height=50dp
android:paddingLeft=@dimen/activity_horizontal_margin
android:paddingRight=@dimen/activity_horizontal_margin
android:layout_gravity=bottom
android:gravity=center_vertical
android:background=#5c1b1b1b
android:alpha=0.8
android:textColor=#fff
android:textSize=26sp
android:text=Test
android:layout_alignBottom=@+id/img_thumbnail
android:layout_alignParentLeft=true
android:layout_alignParentStart=true />
<TextView
android:id=@+id/tv_des_nature
android:layout_width=fill_parent
android:layout_height=wrap_content
android:paddingLeft=@dimen/activity_horizontal_margin
android:paddingRight=@dimen/activity_horizontal_margin
android:paddingTop=5dp
android:paddingBottom=2dp
android:alpha=0.8
android:textColor=#ff272727
android:textSize=15dp
android:text=Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
android:layout_below=@+id/tv_nature
android:layout_alignParentLeft=true
android:layout_alignParentStart=true
android:layout_alignParentBottom=true />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

Adding the Java code

6. Create a new java file in the same directory as the MainActivity.java and call it NatureItem.java

Paste the following code into the NatureItem.java file.

package exoguru.lists.com.naturepics;
/**
* Created by Exoguru on 23/01/2015.
*/
public class NatureItem {
private String mName;
private String mDes;
private int mThumbnail;
public String getName() {
return mName;
}
public void setName(String name) {
this.mName = name;
}
public String getDes() {
return mDes;
}
public void setDes(String des) {
this.mDes = des;
}
public int getThumbnail() {
return mThumbnail;
}
public void setThumbnail(int thumbnail) {
this.mThumbnail = thumbnail;
}
}
view rawNatureItem.java hosted with ❤ by GitHub

7. Create another Java file and call it CardAdapter.java, this is probably one of the most important part of the list as this is where you add the data and other stuff.

Paste the following code into the CardAdapter.java class.

package exoguru.lists.com.naturepics;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Edwin on 18/01/2015.
*/
public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
List<NatureItem> mItems;
public CardAdapter() {
super();
mItems = new ArrayList<NatureItem>();
NatureItem nature = new NatureItem();
nature.setName(The Great Barrier Reef);
nature.setDes(Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +
ut labore et dolore magna aliqua. Ut enim ad minim veniam.);
nature.setThumbnail(R.drawable.great_barrier_reef);
mItems.add(nature);
nature = new NatureItem();
nature.setName(Grand Canyon);
nature.setDes(Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +
ut labore et dolore magna aliqua.);
nature.setThumbnail(R.drawable.grand_canyon);
mItems.add(nature);
nature = new NatureItem();
nature.setName(Baltoro Glacier);
nature.setDes(Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.);
nature.setThumbnail(R.drawable.baltoro_glacier);
mItems.add(nature);
nature = new NatureItem();
nature.setName(Iguazu Falls);
nature.setDes(Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +
ut labore et dolore magna aliqua. Ut enim ad minim veniam.);
nature.setThumbnail(R.drawable.ig);
mItems.add(nature);
nature = new NatureItem();
nature.setName(Aurora Borealis);
nature.setDes(Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.);
nature.setThumbnail(R.drawable.aurora_borealis);
mItems.add(nature);
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext())
.inflate(R.layout.recycler_view_card_item, viewGroup, false);
ViewHolder viewHolder = new ViewHolder(v);
return viewHolder;
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
NatureItem nature = mItems.get(i);
viewHolder.tvNature.setText(nature.getName());
viewHolder.tvDesNature.setText(nature.getDes());
viewHolder.imgThumbnail.setImageResource(nature.getThumbnail());
}
@Override
public int getItemCount() {
return mItems.size();
}
class ViewHolder extends RecyclerView.ViewHolder{
public ImageView imgThumbnail;
public TextView tvNature;
public TextView tvDesNature;
public ViewHolder(View itemView) {
super(itemView);
imgThumbnail = (ImageView)itemView.findViewById(R.id.img_thumbnail);
tvNature = (TextView)itemView.findViewById(R.id.tv_nature);
tvDesNature = (TextView)itemView.findViewById(R.id.tv_des_nature);
}
}
}
view rawCardAdapter.java hosted with ❤ by GitHub

8. Finally paste the following code in to your MainActivity.java

package exoguru.lists.com.naturepics;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends ActionBarActivity {
RecyclerView mRecyclerView;
RecyclerView.LayoutManager mLayoutManager;
RecyclerView.Adapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView)findViewById(R.id.recycler_view);
mRecyclerView.setHasFixedSize(true);
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
mAdapter = new CardAdapter();
mRecyclerView.setAdapter(mAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Now you can run the app and it should be working, you can get the source code form the following:

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s