ImageView in CardView taking up whole screen

Question

Recently I've been trying to implement a CardView inside multiple horizontal RecyclerView. However, my CardView seems to be taking up the width of an entire screen when the image in the ImageView isn't exactly the size I have specified. I know this because it worked exactly the way I want to when I put in an image that matches the width dimensions. But I want the program to be able to crop images regardless of dimensions. What I Want And here is what I get when the image used isn't the same width as the one specified in my xml file.

Here is my cardview that I use in my recyclerview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@android:color/white"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">


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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtRecipeSectionTitle"
            android:text="Recipe Section"
            android:textStyle="bold"
            android:textSize="14sp"
            android:padding="5dp"
            android:textColor="@android:color/black"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="10dp"
            tools:layout_editor_absoluteY="0dp"
            app:layout_constraintLeft_toLeftOf="parent" />


    </RelativeLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recipe_section_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="242dp"
        android:padding="3dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"></android.support.v7.widget.RecyclerView>

</LinearLayout>

And here is the xml for my recyclerview. Though I don't think it's this thing's problem.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="133dp"
    android:layout_height="242dp"
    app:cardElevation="0dp"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="?android:selectableItemBackground"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <ImageView
            android:id="@+id/recipeThumbnail"
            android:layout_width="match_parent"
            android:layout_height="195dp"
            android:contentDescription=""
            android:src="@drawable/placeholder"
            android:scaleType="centerCrop"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtRecipeName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/recipeThumbnail"
            android:text="Name of Recipe"
            android:textColor="@android:color/black"
            android:textSize="14sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtCalorie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:text="Calories: "
            android:textColor="@android:color/black"
            android:textSize="13sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtRecipeCalorie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:layout_toRightOf="@+id/txtCalorie"
            android:text="999"
            android:textColor="@android:color/black"
            android:textSize="13sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtKcal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/txtRecipeCalorie"
            android:text="kcal"
            android:textColor="@android:color/black"
            android:textSize="13sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />


    </RelativeLayout>

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

By the way, since we're all here, can someone tell me how to increase the spaces between each card? I'm currently using marginLeft inside the relative layout inside the CardView but that is definitely not the way to go.

Thanks in advance for you answer!

set same size of your `Imageview` as your `CardView` size. For set space between two item please check this https://stackoverflow.com/questions/24618829/how-to-add-dividers-and-spaces-between-items-in-recyclerview — Ninja, Jul 19 '17 at 14:37
Your `CardView` looks OK to me. How are you loading the images? When I past your XML in a sample project, photos are cropped and look like your desired image. btw, you have the two XML files switched in your question. Also, you should replace `fill_parent` (deprecated) with `match_parent`. — Cheticamp, Jul 20 '17 at 00:47

score 1 · Answer 1 · answered Jul 21 '17 at 10:59

Set a maximum width to your Imageview

        <ImageView
            android:id="@+id/recipeThumbnail"
            android:maxWidth="150dp"                 //Change to suit
            android:scaleType="centerCrop"           //Trims accordingly
            android:layout_width="match_parent"
            android:layout_height="195dp"
            android:contentDescription=""
            android:src="@drawable/placeholder"
            android:scaleType="centerCrop"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

By the way, since we're all here, can someone tell me how to increase the spaces between each card? I'm currently using marginLeft inside the relative layout inside the CardView but that is definitely not the way to go.

Check out this answer.

ImageView in CardView taking up whole screen

1 Answers1