如何在顶部线性布局边界上稍微获得Image？

Question

I am trying to show top critics list as horizontal scrolling cards and each card as shown in attached image . User picture should be slightly over the layout border, I tired

android:layout_marginTop="-15dp"

but it is cutting top of the image.

Here is the code I have: Any help is appreciated, Thanks in advance.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/my_shape"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/cardrank"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="top|start"
            android:layout_marginTop="-15dp"
            android:layout_weight="1"
            android:src="@drawable/test" />

        <TextView
            android:id="@+id/cardtitle"
            style="@style/TextAppearance.AppCompat.Large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:layout_weight="3"
            android:gravity="center"
            android:text="Card title"
            android:textColor="#cc0000"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">


            <TextView
                style="@style/TextAppearance.AppCompat.Headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="30"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/cardfollowers"
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="followers"
                android:textStyle="bold" />

        </LinearLayout>

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                style="@style/TextAppearance.AppCompat.Headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="30"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/cardreviews"
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="reviews"
                android:textStyle="bold" />

        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/cardfollowbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="Follow" />

</LinearLayout>

Answer 1

You could just add another layer of Views to wrap your root view, for example, RelativeLayout. Inside, one view will be your root view with my_shape background and the seconds will be the image.

In RelativeLayout the order of the items on the Z axis will their order in the XMl, so the image will be on top of the my_shape layout.

Then just adjust the image to the right location above the my_shape view.