Card layout parameters not working

Question

I am trying to implement a list of Card views, and the list is fine, but the layout inside the card is nothing like what i have defined in the XML. Any ideas why this is not showing properly? Here is my card XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/cvAdvertFavourite"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="2dip"
    android:layout_marginBottom="2dip"
    card_view:cardUseCompatPadding="true"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp"
        >

        <ImageView
            android:id="@+id/ivCardFavouriteAnimalPhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="8dp"
            />

        <TextView
            android:id="@+id/tvCardFavouriteTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/ivCardFavouriteAnimalPhoto"
            android:textSize="30sp"
            />

        <TextView
            android:id="@+id/tvCardFavouriteRace"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvCardFavouriteTitle"
            android:layout_toRightOf="@+id/ivCardFavouriteAnimalPhoto"
            />

        <TextView
            android:id="@+id/tvCardFavouritePrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvCardFavouriteRace"
            android:layout_toRightOf="@+id/ivCardFavouriteAnimalPhoto"
            />

    </RelativeLayout>

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

I use this RecyclerView XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    >

    <android.support.v7.widget.RecyclerView

        android:id="@+id/rvCardFavourite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</LinearLayout>

Here is my CardItem class:

public class FavouriteCardItem {

    Bitmap animal;
    int price;
    String title, race;

    public FavouriteCardItem(Bitmap animal, int price, String title, String race){
        this.animal = animal;
        this.price = price;
        this.title = title;
        this.race = race;
    }

    public Bitmap getAnimal() {
        return animal;
    }

    public void setAnimal(Bitmap animal) {
        this.animal = animal;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getRace() {
        return race;
    }

    public void setRace(String race) {
        this.race = race;
    }
}

Here is how I call my adapter and set the data for the adapter:

private void loadSetData() {
        List<FavouriteCardItem> items = new ArrayList<FavouriteCardItem>();
        Bitmap bitmap = BitmapFactory.decodeResource(getActivity().getResources(),
                R.drawable.bird);
        FavouriteCardItem item1 = new FavouriteCardItem(bitmap, 100, "birds", "birds");
        items.add(item1);
        Bitmap bitmap2 = BitmapFactory.decodeResource(getActivity().getResources(),
                R.drawable.dog);
        FavouriteCardItem item2 = new FavouriteCardItem(bitmap2, 200, "dogs", "dogs");
        items.add(item2);
        Bitmap bitmap3 = BitmapFactory.decodeResource(getActivity().getResources(),
                R.drawable.cat);
        FavouriteCardItem item3 = new FavouriteCardItem(bitmap3, 1000, "cats", "cats");
        items.add(item3);

        FavouriteCardAdapter adapter = new FavouriteCardAdapter(getActivity(), R.layout.card_view, items);
        recyclerView.setAdapter(adapter);
    }

And this is my Adapter class:

public class FavouriteCardAdapter extends RecyclerView.Adapter<FavouriteCardAdapter.CardViewHolder> {

    private Context mContext;
    private int resourceId;
    List<FavouriteCardItem> cardItems;

    public FavouriteCardAdapter(Context context, int resource, List<FavouriteCardItem> cardItems){
        mContext = context;
        resourceId = resource;
        this.cardItems = cardItems;
    }


    @Override
    public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view, parent, false);
        CardViewHolder cvh = new CardViewHolder(v);
        return cvh;
    }

    @Override
    public void onBindViewHolder(CardViewHolder holder, int position) {
        DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
        int screenHeight = metrics.heightPixels;

        holder.cardView.getLayoutParams().height = screenHeight / 4;
        int price = cardItems.get(position).getPrice();
        String price1 = Integer.toString(price);
        holder.tvPrice.setText(price1);
        holder.tvRace.setText(cardItems.get(position).getRace());
        holder.tvTitle.setText(cardItems.get(position).getTitle());
        holder.ivAnimal.setImageBitmap(cardItems.get(position).getAnimal());
    }

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }

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

    public class CardViewHolder extends RecyclerView.ViewHolder{

        CardView cardView;
        ImageView ivAnimal;
        TextView tvPrice, tvTitle, tvRace;

        public CardViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView.findViewById(R.id.cvAdvertFavourite);
            ivAnimal = (ImageView) itemView.findViewById(R.id.ivCardFavouriteAnimalPhoto);
            tvPrice = (TextView) itemView.findViewById(R.id.tvCardFavouritePrice);
            tvTitle = (TextView) itemView.findViewById(R.id.tvCardFavouriteTitle);
            tvRace = (TextView) itemView.findViewById(R.id.tvCardFavouriteRace);
        }
    }
}

BTW I am aware that I am not supposed to load images like this and so on, but I just wanted to create some test data to get the layout right before i start loading the data from the online data storage.

Here is how the whole Card view looks like. It should have 3 textViews and 1 imageView, but it only shows one imageView.....

Answer 1

You can try this as one of the solution if you do not want to specify the dimension for width and height of Image

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/cvAdvertFavourite"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="2dip"
    android:layout_marginBottom="2dip"
    card_view:cardUseCompatPadding="true"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="8dp"
        >

        <ImageView
            android:id="@+id/ivCardFavouriteAnimalPhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:weight = "2"/>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:weight = "1" />

        <TextView
            android:id="@+id/tvCardFavouriteTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:textSize="20sp"
            />

        <TextView
            android:id="@+id/tvCardFavouriteRace"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvCardFavouriteTitle"
            />

        <TextView
            android:id="@+id/tvCardFavouritePrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvCardFavouriteRace"
            />
      </RelativeLayout>
    </LinearLayout>

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

In this I have used LinearLayout which will distribute the screen width in the ratio 2:1 between ImageView and RelativeLayout with text.
Also I have reduced the size of text from 30sp to 20sp

Answer 2

try to make your card xml look like this:

<android.support.v7.widget.CardView
android:id="@+id/cvAdvertFavourite"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
card_view:cardUseCompatPadding="true"
>
<RelativeLayout
        android:id="@+id/something"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        >

        <ImageView
            android:id="@+id/ivCardFavouriteAnimalPhoto"
            android:layout_width="@dimen/your_size_of_image" // the important part
            android:layout_height="@dimen/your_size_of_image" // the important part
            android:layout_centerVertical="true"
            android:scaleType="centerCrop"/>

        <LinearLayout // make sure you are using a linearlyout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@id/ivCardFavouriteAnimalPhoto"
            android:layout_toRightOf="@id/ivCardFavouriteAnimalPhoto"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvCardFavouriteTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" />

             <TextView
                android:id="@+id/tvCardFavouriteRace"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" />

              <TextView
                android:id="@+id/tvCardFavouritePrice"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" />

        </LinearLayout>

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