Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can one use cardview for listview item and how

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?

like image 297
Munez NS Avatar asked Jun 10 '15 09:06

Munez NS


People also ask

When should I use CardView?

CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design.

Can we use CardView without RecyclerView?

Is it possible to implement a click listener on each button without using a RecyclerView? Yes, You can use cardview as menu item but you should use layout instead of menu.

What is difference between CardView and RecyclerView?

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.


3 Answers

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.

like image 144
Somesh Kumar Avatar answered Oct 02 '22 21:10

Somesh Kumar


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.

like image 24
Hadi Satrio Avatar answered Oct 02 '22 20:10

Hadi Satrio


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

like image 39
Majda Avatar answered Oct 02 '22 19:10

Majda