0

I have a layout with card view anchored to AppBarLayout in CoordinatorLayout. card view scaled down with code until it reaches the desired size when I scroll to top. toolbar inside AppBarLayout collapsed until it reaches the height I set

Here are the issues:

  • When I scroll to the top of the layout, half of the card view goes below the AppBarLayout.
  • If I use different layouts (instead of card view) - then only the floating action button doesn't go below AppBarLayout.

Does anyone know how can I fix this?

Here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"    
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"

        >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"
            android:src="@drawable/data_bg"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="bottom"
            android:paddingRight="5dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_collapseMode="pin"
             />


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

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


<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:clipToPadding="false"
    android:scrollbars="none"
    android:scrollingCache="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="vjdsflkjsdfjdsfj;adsjfjdsfl \n    
            kjsdfjdsfj;adsjfjdsflkjsdfjdsfj;adsjf"/>
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>



<android.support.v7.widget.CardView
    android:fitsSystemWindows="true"
    android:id="@+id/my_card"
    android:layout_width="@dimen/_270sdp"
    android:layout_height="150dp"
    android:layout_marginTop="-20dp"
    android:clickable="true"
    app:layout_collapseMode="parallax"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|center" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
        ></LinearLayout>
     </android.support.v7.widget.CardView>


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

Here is my java code for scaling:

        ((AppBarLayout) view.findViewById(R.id.app_bar_layout)).addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {


        int min_height = ViewCompat.getMinimumHeight(collapsing_toolbar) * 2;
        float scale = (float) (min_height + verticalOffset) / min_height;

        if (scale >= 0.6)
            cardView.setScaleY(scale >= 0 ? scale : 0);

    });

After card view goes below AppBarLayout:

enter image description here

enter image description here

mohammad
  • 1
  • 1
  • 2

1 Answers1

0

This happens because of:

app:layout_collapseMode="parallax"

And added scroll|exitUntilCollapsed to the CollapsingToolbarLayout which make the CardView goes below the AppBarLayout after collapsing.

Add :

app:layout_collapseMode="pin" 

To the CardView and then, remove app:layout_collapseMode="parallax".


You also have another option which will make it more pretty-beautiful than this.

Check this answer: https://stackoverflow.com/a/48892896/4409113

And here is the example: https://github.com/saulmm/CoordinatorBehaviorExample

Just use :

app:behavior_overlapTop="64dp"

To your view which you want it to be overlapping the CollapsingToolbarLayout content.

ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108