11

I would like to implement CardView in my app so that all ListView items are CardViews. Is it as simple as encapsulating a ListView item XML in CardView?

SpaceCore186
  • 586
  • 1
  • 8
  • 22
Munez NS
  • 1,011
  • 1
  • 12
  • 31

4 Answers4

34

In case someone else come across this question, Other answers are right but then you should place your CardView within FrameLayout and you should make ListView's divider transparent. CardView's elevation and margin attribute won't work unless you use it inside FrameLayout.

Somesh Kumar
  • 8,088
  • 4
  • 33
  • 49
15

Yes. Underneath CardView is just a simple FrameLayout that you could just inflate into a ListView (or RecyclerView).

Here's an example:

<android.support.v7.widget.CardView
    android:id="@+id/ly_root"
    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="wrap_content"
    android:background="#FEFEFE"
    android:layout_margin="8dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/iv_cover"
            android:layout_width="wrap_content"
            android:layout_height="160dp"
            android:scaleType="centerCrop"
            android:src="@drawable/placeholder"/>

        ...

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

And here's that example live in action:

enter image description here

Of course you would need to implement a custom adapter to wire them up together. But this is as with any custom ListView item really. There's nothing special about it.

SpaceCore186
  • 586
  • 1
  • 8
  • 22
Hadi Satrio
  • 4,272
  • 2
  • 24
  • 45
9

It's better to use CardView with RecyclerView, here is an example.

  • activity_main.xml (it contains the recyclerview)

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

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    card_view:cardCornerRadius="4dp"
    android:layout_margin="10dp">
        <TextView
        android:id="@+id/text_cardview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp" />
    </android.support.v7.widget.CardView>
    
  • buid.gradle(Module:app)

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:23.3.0'
        compile 'com.android.support:cardview-v7:23.0.+'
        compile 'com.android.support:recyclerview-v7:23.0.+'
    }
    
  • RecyclerViewAdapter.java

    public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {
        public ArrayList<String> myValues;
        public RecyclerViewAdapter (ArrayList<String> myValues){
            this.myValues= myValues;
        }
    
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View listItem = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardview.xml, parent, false);
            return new MyViewHolder(listItem);
        }
    
        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
             holder.myTextView.setText(myValues.get(position));
        }
    
    
        @Override
        public int getItemCount() {
            return myValues.size();
        }
    
        public static class MyViewHolder extends RecyclerView.ViewHolder {
            private TextView myTextView;
            public MyViewHolder(View itemView) {
                super(itemView);
            myTextView = (TextView)itemView.findViewById(R.id.text_cardview);
            }
        }
    }
    
  • MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        ArrayList<String> myValues = new ArrayList<String>();
    
        //Populate the ArrayList with your own values
        myValues.add("KitKat");
        myValues.add("Lollipop");
        myValues.add("Marshmallow");
    
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(myValues);
        RecyclerView myView =  (RecyclerView)findViewById(R.id.recyclerview);
        myView.setHasFixedSize(true);
        myView.setAdapter(adapter);
        LinearLayoutManager llm = new LinearLayoutManager(this);
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        myView.setLayoutManager(llm);
     }     
     }
    

Refer to this tutorial for more details: A Guide to Android RecyclerView and CardView

Majda
  • 629
  • 7
  • 8
  • 1
    Thanks for the example. I had to remove ".xml" from "R.layout.cardview.xml" in RecyclerViewAdapter.java – Zach Nov 24 '16 at 18:38
4

Yes you can use CardView for list item in ListView. But I suggest you to use RecyclerView instead of ListView, since it is the updated version of ListView. Check this for RecyclerView with CardView.

Chandru
  • 5,954
  • 11
  • 45
  • 85