Can one use cardview for listview item and how

46.6k views Asked by At

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?

4

There are 4 answers

0
Hadi Satrio On BEST ANSWER

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.

0
Chandru On

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.

1
Majda On

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

2
Somesh Kumar On

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.