Search code examples
androidandroid-recyclerviewcardview

creating Cardviews with Recyclerview


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: Result and problem


The expected result: Expected result


Solution

  • 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.