Android listview using cardview example

Cardview is a new widget for Android, which can be used to display a card sort of a layout in android. I am recomending you refer Android cardview example before starting to implement this .Android cardview example will show you how to implement a basic cardview in android. In this tutorial we will learn how to implement a listview using cardview in android. Let us start by creating new project in android studio.

1.Creating New Project

1. Create a new project in Android Studio from File -> New Project
2. Fill the required fields like Application name and package name and click Next
3.  Select Basic activity and click Next, and click  Finish Button.A default activity will be created as MainActivity.java with layouts activity_main.xml and content_main.xml

2. Here is the code for your activity_main.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="codes4.com.simplelistview.MainActivity">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

3. following is the code for content_main.xml

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="codes4.com.simplelistview.MainActivity"
tools:showIn="@layout/activity_main">

<ListView
android:id="@+id/lv_languages"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>


</RelativeLayout>

4.create a file layout_language_list_item.xml for list item under res/layout/ , this is the layout which will be used inside each list item. Since our aim to have list cards we need have CardView inside this layout.

layout_language_list_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="horizontal">

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<ImageView
android:id="@+id/im_language"
android:layout_width="60dp"
android:layout_height="60dp" />


<TextView
android:id="@+id/tv_language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp" />
</LinearLayout>

</android.support.v7.widget.CardView>

</LinearLayout>

5. Since this is a custom listview with imageview and textview inside a list item we need to have a custom listview adapter . So we need to create a custom adapter class LanguagesListAdapter.java under java/your package/

LanguagesListAdapter.java

package codes4.com.simplelistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.squareup.picasso.Picasso;


public class LanguagesListAdapter extends BaseAdapter{
String [] result;
Context context;
int [] imageId;
private static LayoutInflater inflater=null;

public LanguagesListAdapter(MainActivity mainActivity, String[] prgmNameList, int[] prgmImages) {
// TODO Auto-generated constructor stub
result=prgmNameList;
context=mainActivity;
imageId=prgmImages;
inflater = ( LayoutInflater )context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return result.length;
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

public class Holder
{
TextView tv_language;
ImageView im_language;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Holder holder=new Holder();
View view;
view = inflater.inflate(R.layout.layout_language_list_item, null);

holder.tv_language=(TextView) view.findViewById(R.id.tv_language);
holder.im_language=(ImageView) view.findViewById(R.id.im_language);

holder.tv_language.setText(result[position]);
Picasso.with(context).load(imageId[position]).into(holder.im_language);

view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(context, "You Clicked " + result[position], Toast.LENGTH_LONG).show();
}
});
return view;
}

}

6. following is the code for MainActivity.java

MainActivity.java

package codes4.com.simplelistview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
ListView lv_languages;


LanguagesListAdapter list_adapter;
String[] languages = new String[] { "SQL",
"JAVA",
"JAVA SCRIPT",
"C#",
"PYTHON",
"C++",
"PHP",
"IOS",
"ANDROID"
};

public static int [] language_images={R.drawable.sql,
R.drawable.java,
R.drawable.javascript,
R.drawable.c,
R.drawable.python,
R.drawable.cplus,
R.drawable.php,
R.drawable.ios,
R.mipmap.ic_launcher};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();
lv_languages.setAdapter(list_adapter);


}

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("List Cards");
list_adapter = new LanguagesListAdapter(this,languages, language_images);
lv_languages = (ListView) findViewById(R.id.lv_languages);
}

@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);
}
}

9. finally add the following dependencies to your build.gradle file

compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.android.support:cardview-v7:23.0.0'

Output