How to have a scrollable floating Cardview like this?

Question

Does anyone know how to have a floating Cardview like this? http://chairnerd.seatgeek.com/images/autocomplete_checkout.gif

The background image should be able to change programmatically and the cardviews should be scrollable. And the position of the first Cardview should be somewhere below the image. Thanks in advance!

Answer 1

I figured it out myself and I will post my solution here in case anyone run into the same situation.

Here how the layout file should look like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:background="@color/bgGrey">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="125dp"
    app:srcCompat="@drawable/soccer"
    android:id="@+id/imageView"
    android:scaleType="centerCrop"/>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="120dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="6dp">

EDIT: Within the LinearLayout, something like a place holder should be added. Otherwise a part of the content at the end would not be shown. So I used a textview to do so.

<TextView
            android:layout_width="match_parent"
            android:layout_height="120dp" />

Note: The height here should match the marginTop in the LinearLayout