shortstopmin shortstopmin - 4 months ago 54
Android Question

Android two layers overlapping scroll layout like Airbnb room detail layout

I would like to have a two layers overlapping scroll layout like Airbnb room detail layout



Airbnb-like overlapping scrolling:
enter image description here




But my XML layout file outputs the following result:

enter image description here



Here is my layout code:



<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/height_360_2" />

</android.support.design.widget.AppBarLayout>

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="always">

<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="8dp"
app:contentPadding="16dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="8dp"
android:text="@string/person_intro" />

</android.support.v7.widget.CardView>

</android.support.v4.widget.NestedScrollView>
</FrameLayout>



Answer

Since my comment helped solve:

These two seem quite similar to me. Difference that I see is that yours goes all the way to the top, ey? Try adding marginTop="50dp" and seeing if it changes anything.

Adding a correct marginTop fixed it:

<android.support.v7.widget.CardView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginTop="150dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" 
app:cardElevation="8dp"
app:contentPadding="16dp">
Comments