Remove ImageView border in Android

Question

I am making an app that uses cards to display information, and I want to have an image on the left side of the card. The problem I'm having is that the ImageView I'm inserting at the left side is being padded on all sides for some reason.

After doing some searching online, I found many posts on stackoverflow that were asking the same question, and all of them were told to use this code fix their issue:

android:adjustViewBounds="true"

and to simply add this within their ImageView in the xml. I tried this, but the padding remains. I have set the background color of the image view to lime green to illustrate the padded areas.

Here is my XML code for the card:

<?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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="2dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="5dp"
    >

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

        <ImageView
            android:id="@+id/drinkImage"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:background="#00FF00"
            android:gravity="left"
            />

        <TextView
            android:padding="8dp"
            android:id="@+id/drinkName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="24sp"
            android:layout_toRightOf="@+id/drinkImage"
            />

        <TextView
            android:padding="8dp"
            android:id="@+id/drinkDesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/drinkName"
            android:layout_toRightOf="@+id/drinkImage"
            />

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

and this is what I'm getting on my screen:

https://i.sstatic.net/bVaR4.png

Answer 1

The green "border" is not a border, is the background of the ImageView set by you with android:background="#00FF00". Over the ImageView your image is drawn. The images ratio does not fit with ImageViews width and height or the image width or height is less then the ImageViews width or height. The default behaviour of ImageView in this case is to center the image in the ImageView. Therefore you see the space. You can specify the behavior by using android:scaleType . See the official documentation . Otherwise you can adjust the ImageViews width and height to match the one of the image.

Update: oh I'm sorry, I haven't noticed that you are using CardView:

According to the docs, this as designed:

Due to expensive nature of rounded corner clipping, on platforms before L, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection (See setPreventCornerOverlap(boolean) to change this behavior).

See the CardView docs for more info.

Answer 2

OK, it turns out I was adding an image asset to the project by right-clicking drawable/ and clicking new->Image Asset. what I didn't realize this does is actually crop and resize the image, as I obviously had no idea the proper usage of the image asset creator.

To add the .PNG files to the project, I simply copied the image files from Finder (the Mac equivalent of Windows Explorer) and pasted them into the drawables folder in Android Studio and everything works out perfectly. Such a noob mistake!