creating Cardviews with Recyclerview

Question

I'm creating Cardviews using Recyclerview such as every tutorial say, in Stackerflow and Youtube. It worked for me, but when i run the app, it shows something like only one Cardview with the whole data.

Activity main:

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/reciclador"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="3dp"
    android:scrollbars="vertical" />

Layout cards:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="4dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <ImageView
            android:id="@+id/imgRestaurant"
            android:layout_width="400dp"
            android:layout_height="100dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="18dp"
            card_view:srcCompat="@drawable/soporte_it" />

        <TextView
            android:id="@+id/lblNombre"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/imgRestaurant"
            android:layout_marginTop="10dp"
            android:text="Restaurant Soporte" />

        <TextView
            android:id="@+id/lblDescripcion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/lblNombre"
            android:layout_marginTop="22dp"
            android:text="TextView" />

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

Class for data (clsRestaurants):

package com.soft.kukito.cardviewprueba;

/**
 * Created by Hernan on 16/7/2017.
 */

public class clsRestaurants {
    private int imagen_r;
    private String nombre_r;
    private String descripcion_r;

    public clsRestaurants(int imagen_r, String nombre_r, String descripcion_r) {
        this.imagen_r = imagen_r;
        this.nombre_r = nombre_r;
        this.descripcion_r = descripcion_r;
    }

    public int getImagen_r() {
        return imagen_r;
    }

    public String getNombre_r() {
        return nombre_r;
    }

    public String getDescripcion_r() {
        return descripcion_r;
    }
}

Adapter (restaurantAdapter):

   package com.soft.kukito.cardviewprueba;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

import java.lang.reflect.Array;
import java.util.ArrayList;

import static android.os.Build.VERSION_CODES.M;

/**
 * Created by Hernan on 16/7/2017.
 */

public class restaurantsAdapter extends RecyclerView.Adapter<restaurantsAdapter.restaurantsViewHolder>
{

    private ArrayList<clsRestaurants> restaurant_item;

    public restaurantsAdapter(ArrayList<clsRestaurants> restaurant_item) {
        this.restaurant_item = restaurant_item;
    }

    @Override
    public restaurantsViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_cards,viewGroup,false);
        restaurantsViewHolder restaurants = new restaurantsViewHolder(v);
        return restaurants;
    }

    @Override
    public void onBindViewHolder(restaurantsViewHolder restaurantsViewHolder, int i) {
        restaurantsViewHolder.nombre.setText(restaurant_item.get(i).getNombre_r());
        restaurantsViewHolder.descripcion.setText(restaurant_item.get(i).getDescripcion_r());
        restaurantsViewHolder.imagen.setImageResource(restaurant_item.get(i).getImagen_r());
    }

    @Override
    public int getItemCount() {
        return restaurant_item.size();
    }

    public class restaurantsViewHolder extends RecyclerView.ViewHolder{
        TextView nombre,descripcion;
        ImageView imagen;

        public restaurantsViewHolder(View itemView) {
            super(itemView);

            nombre=(TextView)itemView.findViewById(R.id.lblNombre);
            descripcion=(TextView) itemView.findViewById(R.id.lblDescripcion);
            imagen=(ImageView)itemView.findViewById(R.id.imgRestaurant);
        }
    }
}

It's giving me a headache since hours, thank everyone for answering.

What i get:

The expected result:

You have not added the adapter class, but have added the Data class itself twice. Add the adapter class, and also preferably the screenshot — Arun Shankar, Jul 17 '17 at 04:01
@Natarr the `RecyclerView.Adapter` is indeed missing... while I have the suspicion, that you might intend to use a `LinearLayout` or instead of a `RelativeLayout` (one can also nest these, vertically & horizontally)... one can even fake the below suggested `DividerItemDecoration` by simply adding a LinearLayout as the "divider" at the bottom edge. — Martin Zeitler, Jul 17 '17 at 04:05
... or how about `.setCardBackgroundColor()`? this would even permit alternating item colors; eg. one white, the next one light gray (as it is common). — Martin Zeitler, Jul 17 '17 at 04:13

score 2 · Accepted Answer · answered Jul 17 '17 at 04:14

see that little gray space on each corner? I suspect you can just add margin to your CardView, add this line.

android:layout_marginBottom="10dp"

so it would looks like this

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="4dp"
    android:layout_marginBottom="10dp">

in your layout cards, of course you can easily do the same for left and right margin to make it looks like your expected result.

It worked for me! that is all what i needed, thank you so much! — AtarC5, Jul 17 '17 at 04:19

score 0 · Answer 2 · answered Jul 17 '17 at 04:06

So basically recyclerview does not come with dividers by default. You are supposed to add the dividers.

https://developer.android.com/reference/android/support/v7/widget/DividerItemDecoration.html

This will give you an idea as to how you can dividers.

Also this will give you a clear idea to work with RecyclerView and CardView

score 0 · Answer 3 · answered Jul 17 '17 at 04:30

Add this file in your build.gradle file

compile 'com.android.support:cardview-v7:23.4.0'

and use this below code in recycler adapter's xml file (where you write code for row item)

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="4dp"
    card_view:cardPreventCornerOverlap="false"
    card_view:cardUseCompatPadding="true">
</android.support.v7.widget.CardView>

Use this tag as root tag... Done!!!

creating Cardviews with Recyclerview

3 Answers3