How to get rid of blank spaces around an ImageView inside a CardView

Question

Below screenshot, I am inserting an image, using ImageView, into a CardView.

The problem is, I seem can't get rid of the empty space below the Image. (highlighted by light blue)

I tried a solution that works, but it requires me to explicitly specify the image height, which I try not to, because, the source can be various, and I need the image to flexibly scale up/down (with same aspect ratio) depending on the card width.

Here's the screenshot:

And here's the code snippet:

<android.support.v7.widget.CardView
    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"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="7dp">
        <TextView
            android:id="@+id/caption_text"
            android:text="Hello World!"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:scaleType="fitStart"
            android:layout_below="@id/caption_text"
            android:src="@drawable/food"/>
    </RelativeLayout>
</android.support.v7.widget.CardView>

So, is there any way to make the CardView automatically wrap around the image, (without leaving any empty space) and without specifying the image height explicitly?

Shaishav · Accepted Answer · 2016-08-14T18:54:11.730

Change the <RelativeLayout> height to wrap_content. Currently, it has a circular dependency in height.

[EDIT]

We need to set the property android:adjustViewBounds="true" for the image to scale with the source. Its false by default!

<android.support.v7.widget.CardView
    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"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="7dp">
        <TextView
            android:id="@+id/caption_text"
            android:text="Hello World!"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:adjustViewBounds="true"
            android:layout_below="@id/caption_text"
            android:src="@drawable/food"/>
    </RelativeLayout>
</android.support.v7.widget.CardView>

tried it but your solution doesn't work. btw i changed the screenshot, because the earlier shows wrong light-blue highlight. — Moses Aprico, Aug 14 '16 at 18:18
silly android duh. how can they make some weird config as default anyway. :/ — Moses Aprico, Aug 15 '16 at 09:46

score 2 · Answer 2 · answered Aug 14 '16 at 18:40

2

Try changing the scaleType to android:scaleType="centerCrop", or some other scaleType.
See here:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

answered Aug 14 '16 at 18:40

amitairos

2,907
11
50
84

1

this is a wonderful alternative as well. thank you for mentioning it! – Moses Aprico Aug 15 '16 at 08:24

score 0 · Answer 3 · answered Dec 09 '22 at 23:27

0

I am using RoundedImageView plugin

<com.makeramen.roundedimageview.RoundedImageView
....
....
android:adjustViewBounds="true"/>

This worked for me.

answered Dec 09 '22 at 23:27

TRIKONINFOSYSTEMS

530
7
19

How to get rid of blank spaces around an ImageView inside a CardView

3 Answers3