Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have a scrollable floating Cardview like this?

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!

like image 348
Yanru Bi Avatar asked Dec 29 '16 23:12

Yanru Bi


People also ask

How do I make Cardview scrollable?

ScrollView layouts allow the user to scroll up and down if the layout's content is too large to fit in the screen. To create a new layout, navigate through Project > app > res then right-click the layout folder and select New > Layout resource file.

Are ListView scrollable?

Show activity on this post. Never put ListView in ScrollView . ListView itself is scrollable.


2 Answers

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

like image 142
Yanru Bi Avatar answered Sep 24 '22 01:09

Yanru Bi


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)

like image 45
htafoya Avatar answered Sep 26 '22 01:09

htafoya