Imageview over card border - how to solve it?

Question

I'm making an app with a google now-like interface, with cards for content.

First please take a look at this image: https://i.sstatic.net/0k7Z9.jpg

I managed to create the card and add the contents to it but my imageview is getting on top of the card border (the shadow line) like the blue arrow indicates.

Please how can I make the card gray border star under the imageview? I tried adding margin to the imageview and bottom/top padding to the card but without any success.

Heres to code for the card bg:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="0dp"/>

            <solid android:color="#bdbdbd" />



        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="0dp" />

            <solid android:color="@android:color/white" />


        </shape>
    </item>
</layer-list>

and the activity with the contents:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="6dp"
    android:layout_marginRight="6dp"
    android:layout_marginTop="4dp"
    android:background="@drawable/friend_card_profile_bg" >

    <ImageView
        android:id="@+id/friendPic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="1dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/friend_testpic" />

    <TextView
        android:id="@+id/friendUsername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="6dp"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@+id/friendPic"
        android:fontFamily="sans-serif-condensed"
        android:text="@string/profile_username"
        android:textColor="#7f7f7f"
        android:textSize="19dp" />

    <TextView
        android:id="@+id/friendLinksCounter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/friendUsername"
        android:layout_marginLeft="6dp"
        android:layout_toRightOf="@+id/friendPic"
        android:fontFamily="sans-serif"
        android:text="@string/profile_links_counter"
        android:textColor="#acacac"
        android:textSize="14dp" />

    <TextView
        android:id="@+id/friendFriendsCounter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/friendLinksCounter"
        android:layout_marginLeft="6dp"
        android:layout_toRightOf="@+id/friendPic"
        android:fontFamily="sans-serif"
        android:text="@string/profile_friends_counter"
        android:textColor="#acacac"
        android:textSize="14dp" />

</RelativeLayout>

Thanks you

Answer 1

try using 2dp padding on the bottom of your relative layout, that should adjust the contents so it's all above your shadow.