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!

Stelu

just put your cardview inside a flamelayout it will work. If you put some code i can help you more – Erse

Have you tried using CardView inside a nested scroll view with some elevation – Prochora

Thanks. Do you happen to know how to make it expandable like those in the example? – Stelu

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

Stelu

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)

Limousin

Thanks. Do you happen to know how to make it expandable like those in the example? – Stelu

@YanruBi simple change from Visibility GONE to VISIBLE after the user presses the collapse button. – Limousin