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

Answer 2

Yes it is a cardView directly on a ScrollView, or a ListView simply with the item's layout with background transparency.

The scrollview/listview is placed on a FrameLayout or RelativeLayout. Either there is a padding/margin on top, or a "stub" first element which is transparent".

Bellow (declared first in the parent layout) the scrollview/listview you can place an image or any other static component whatsoever.

And above you can place other floating components (like the Check-out button on your example)