Develop Reference

CollapsingToolbarLayout pushes toolbar text outside the screen.

Hi I'm trying to use Collapsing Toolbar but when the collapsing toolbar collapses the title of the toolbar moves outside the screen. I'm using right alignment for the text as i'm trying to build an app in Urdu language. I have searched on this and not no solution. Need help!
See the screenshot here
XML
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.mrvirk.urduapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_collapseMode="parallax"
android:contentDescription="#string/app_name"
android:src="#drawable/quran"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/Quran"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="6dp"
android:layout_marginBottom="16dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/quranTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="12dp"
android:textStyle="bold"
android:layout_marginTop="12dp"
android:text="#string/Quran"
android:textColor="#color/colorPrimary"
android:layout_gravity="right"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="12dp">
<TextView
android:id="#+id/quranIntro"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:padding="10dp"
android:text="#string/intro"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/quranDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:lineSpacingMultiplier="1.5"
android:padding="20dp"
android:layout_marginTop="12dp"
android:text="#string/description"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="97dp"
android:elevation="6dp"
android:scaleType="fitCenter"
android:src="#drawable/fav"
app:layout_anchor="#id/appbar"
app:backgroundTint="#color/white"
app:layout_anchorGravity="bottom|left|end"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
Thanks in Advance :)

I could not find a better answer or solution to this problem. Now i have added a TextView at the right of the toolbar title. Which basically consume some space so the title comes at the required place. And i know its not the best practice. If someone has a better solution Please share.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:title="#string/Quran"
android:gravity="right"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>

in your CollapsingToolbarLayout try to add this app:layout_scrollFlags="scroll|exitUntilCollapsed"
like this
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

I want to keep TitleBar visible and stick at top instead of underneath a collapsing toolbar

I have a AppBarLayout with CollapsingToolbar layout and ImageView in it. TitleBar appears when I ScrollUp. But I want to stick it at top and always visible. I have already tried by changing
app:layout_collapseMode attribute.
Also tried
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
But didn't worked either. I have a code as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="25dp"
app:expandedTitleMarginEnd="60dp">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Finally I found solution to this. I also add ImageView in ScrollBarLayout. Below code worked fine for me !
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

CollapsingToolbarLayout with RelativeLayout issue below KitKat 4.4 OS

I have create layout with combination of AppBarLayout > CollapsingToolbarLayout > RelativeLayout
<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/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/layoutHeader"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/ivCoverImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/layoutImgWrapper"
android:layout_width="74dp"
android:layout_height="74dp"
android:layout_marginLeft="#dimen/app_normal_padding"
android:layout_marginRight="20dp"
android:layout_marginTop="100dp"
android:background="#drawable/rest_image_wrapper"
android:padding="3dp">
<ImageView
android:id="#+id/ivRestaurant"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<com.test.widget.CustomTextView
android:id="#+id/tvRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/layoutImgWrapper"
android:layout_marginBottom="4dp"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
android:text="Benjy's"
android:textColor="#color/white"
android:textSize="18sp"
app:typeface="fonts/proximanova_semibold.ttf" />
<RatingBar
android:id="#+id/ratingBar"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvRestaurantName"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
/>
<com.test.widget.UnderlinedTextView
android:id="#+id/tvReviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratingBar"
android:layout_marginLeft="10dp"
android:layout_toEndOf="#+id/ratingBar"
android:layout_toRightOf="#+id/ratingBar"
android:autoLink="web"
android:text="0 Review"
android:textColor="#color/white"
android:textSize="14sp"
app:underlineColor="#color/rest_review_underline_color"
app:underlineWidth="1dp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="50dp"
app:tabIndicatorColor="#color/primary_dark_color"
app:tabIndicatorHeight="#dimen/tab_indicator_height"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
When I re-expanding layout, top part (toolbar, tab etc) is not working in ICS and jelly bean. I have tested, It was working above all versions. I think top part height is fixed after collapsing (it takes toolbar's height) in lower OS. Let me suggest any solution.
Thanks in advance.

CoordinatorLayout with NestedScroll and CollapsingToolbarLayout doesn't scroll to bottom

I am having an issue with CoordinatorLayout and CollapsingToolbarLayout, the toolbar is working fin, but when I scroll the activity to bottom, it does never get to the bottom it only gets until the 2nd row before the last one.
Is there any problem in my xml? (I am loading the text from strings.xml programmatically)
This is my Layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="256dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/img_1"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/par_toolbar"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<TextView
android:id="#+id/title"
android:textSize="17sp"
android:text="#string/app_toolbar_title"
android:textColor="#color/Blanco"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:background="#color/background"
android:paddingBottom="32dp"
android:paddingRight="32dp"
android:paddingLeft="32dp"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:paddingTop="32dp"
android:layout_height="match_parent"
android:background="#color/background"
android:orientation="vertical">
<TextView
android:id="#+id/txt_paragraph_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/black"
android:layout_marginBottom="5dp"
android:textStyle="bold"
android:textSize="18sp" />
<TextView
android:id="#+id/txt_paragraph"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="#string/history1"
android:textColor="#color/black"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Seems that behavior you have described is caused by layout_gravity attribute of your NestedScrollView. Try to remove it.

Clickable CardView inside NestedScroll doesn't trigger scrolling

I have a layout with a CoordinatorLayout, and AppBarLayout and a NestedScrollView, inside the NestedScrollView I have multiple CardViews, everything works ok until I set the CardViews to be clickable, then if I start a scroll within a CardView, scroll doesn't work.
This is my layout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="256dp"
android:layout_width="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#color/primary" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingBottom="7dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="1"
android:includeFontPadding="false"
android:text="Title1"
style="#android:style/TextAppearance.Medium" />
<TextView
android:lines="2"
android:text="Description 1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
...
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

The issue comes to daylight when the ScrollView isn't filled with content. I think it's a very weird bug in Android.
The 'solution'..
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="256dp"
android:layout_width="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardUseCompatPadding="true"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#cdcdcd"
android:clickable="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingBottom="7dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="1"
android:includeFontPadding="false"
android:text="Title1"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:lines="2"
android:text="Description 1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1000dp"
android:orientation="vertical"
android:layout_margin="4dp"
android:background="#c1c1c1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20pt"
android:text="some content..."/>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

It seems like the same problem as here: Scroll doesn't work in NestedScrollView when try to scroll from views with click events
This is the kind of workaround for your problem
https://stackoverflow.com/a/32887429/2165810
But you shuld also use setPreventCornerOverlap(false) for your CardView to avoid problems with CardView

As people have noted, the problem is when the CardView sits fully within the screen it won't trigger scrolling from the card. Scrolling still works from views within the CollapsingToolbarLayout.
My solution was to add android:layout_marginBottom="100dp" to the CardView so that the bottom edge is offscreen thus allowing scrolling.