Develop Reference

How Resize search view width with animation, when toolbar collapse [ADNROID]

Hello guys I have search view in collapsing toolbar, I want to resize searchView width when toolbar collapse, for example, when toolbar is not collapsed search View width is "match_parent" and when user will scroll down and toolbar collapses search View should width should became for example 200dp . how can I achieve this?
xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
android:padding="10dp"
android:background="#color/black">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="match_parent"
android:layout_height="80dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginStart="15dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="40dp"
android:padding="10dp"
android:background="#color/white"
android:layout_gravity="bottom"
android:clickable="false"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_gravity="start"
android:text="TITLE"
android:textStyle="bold"
android:textSize="30sp"
app:layout_collapseMode="parallax"/>
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_gravity="right"
android:paddingTop="5dp"
android:paddingEnd="5dp"
app:layout_collapseMode="pin"
app:srcCompat="#drawable/ic_baseline_boy_24">
</com.google.android.material.imageview.ShapeableImageView>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<TextView
android:id="#+id/text_home"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="dasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadas"
android:textAlignment="center"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
here is gif of my app
https://im5.ezgif.com/tmp/ezgif-5-7e95a858c4.gif

You can resize your search view programatically when your toolbar is collapsed.
Try this :
SearchView searchView = findViewById(R.id.search);
AppBarLayout appBarLayout = findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0)
{
// Fully expanded
searchView.getLayoutParams().width = CollapsingToolbarLayout.LayoutParams.MATCH_PARENT;
}
else
{
// Not fully expanded or Collapsed
searchView.getLayoutParams().width = dpToPx(200);
}
}
});
Here we are using a function to change dp into px as width is taken in pixels.
dpToPx(int dp) :
public int dpToPx(int dp) {
float density = this.getResources()
.getDisplayMetrics()
.density;
return Math.round((float) dp * density);
}

Toolbar and TabLayout don't hide when I scroll the RecyclerView up

I am having trouble getting the Toolbar and TabLayout to hide when I scroll up. I have 3 different xml files: 1) Toolbar, 2) TabLayoutFragment (here I have the TabLayout and ViewPager, and I include the toolbar here, and 3) HomeFragment (contains the RecyclerView). I need for the Toolbar to hide when I scroll up, and I have seen in many other posts that most people use a CoordinatorLayout instead of a Relative Layout or Linear Layout, and then they have to add app:layout_scrollFlags="scroll|enterAlways" which I have done, but I still can't get the Toolbar to hide when scrolling the RecyclerView up.
I've also added this to the RecyclerView, but still nothing... app:layout_behavior="#string/appbar_scrolling_view_behavior"
Could someone point out what is missing here?
Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_events"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:fontFamily="#font/scriptbl"
android:text="Events"
android:textColor="#color/colorBlack"
android:textSize="60sp" />
<ImageView
android:id="#+id/search"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/filter"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/search"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon10_sort" />
<ImageView
android:id="#+id/options"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:contentDescription="#string/options"
android:padding="10dp"
android:src="#drawable/icon_short_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
TabLayoutFragment
<LinearLayout 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/fragment_home_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:tag="Home"
tools:context=".Fragment.TabLayoutFragment">
<include
android:id="#+id/toolbar_events"
layout="#layout/toolbar_events" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#fff"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="#000"
app:tabIndicatorFullWidth="false"
app:tabRippleColor="#android:color/transparent"
app:tabSelectedTextColor="#color/colorBlack"
app:tabTextColor="#color/colorBlack" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
HomeFragment
<RelativeLayout 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/fragment_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:tag="fragment_home"
tools:context=".Fragment.HomeFragment">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<TextView
android:id="#+id/welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Welcome to Events!"
android:textColor="#d9d9d9"
android:textSize="36sp"
android:visibility="gone" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_horizontal"
android:padding="8dp"
app:drawableStartCompat="#drawable/icon_loc" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view_following"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</RelativeLayout>

You can make it programmatically by adding the addOnScrollListener method.
On the RecyclerView.SCROLL_STATE_DRAGGING method hide the toolbar and TabLayout and on RecyclerView.SCROLL_STATE_IDLE method you can show it again if you want to show them again.
You can try it in such way:
recyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// Show your view again.. If you want to show them..
} else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
// Hide your view..
}
super.onScrollStateChanged(recyclerView, newState);
}});
Or You can use recycler view's addOnScrollListener method:
Refer: addOnScrollListener
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
if (dy > 0) {
//Scrolling down
// Show your controllers from here
} else if (dy < 0) {
//Scrolling up
// Hide your controllers from here
}
}});
Also, you can add some animations there to show and hide your toolbar and tab layouts.

Place the toolbar and the tablayout within the ScrollView group to get the scrolling part.
<ScrollView>
<Toolbar></Toolbar>
<Tablayout></Tablayout>
</ScrollView>

Calculate the height i dp got wrong

The main problem here is that the parent layout is nested scroll view so the height must be wrap content
so the view is like first image
what I want is to make the "don't have an account? register" TextView
to be at the bottom of the screen so I calculate the height of my
phone then the height of layout to subtract to subtract them and
assign the result to the top margin of textview
and here's my code
ViewTreeObserver observer = binding.parentConstraint.getViewTreeObserver();
if (observer.isAlive()) {
observer.addOnGlobalLayoutListener(() -> {
DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
float parentViewHeightInDP = (int) (binding.parentConstraint.getHeight() / displayMetrics.density);
if (getContext() != null) {
float heightInDP = displayMetrics.heightPixels / displayMetrics.density;
float distanceBetweenLayoutBottomAndParenBottom = heightInDP - parentViewHeightInDP;
if (distanceBetweenLayoutBottomAndParenBottom > 32) {
if (topMargin == 0) {
topMargin = 1;
ConstraintLayout.LayoutParams layoutParams = (ConstraintLayout.LayoutParams) binding.loginTextDontHaveAccount.getLayoutParams();
layoutParams.topMargin = Math.round(distanceBetweenLayoutBottomAndParenBottom);
Handler handler = new Handler();
handler.postDelayed(() -> {
binding.loginTextDontHaveAccount.requestLayout(); },
50);
}
}
but that the result I got
so my real question here is why there still some space here, I mean
the TextView should be exactly at the bottom

What I would suggest you to make NestedScrollView as a child instead of parent.
Make RelativeLayout as your parent and use layout_alignParentBottom to set TextView at bottom. Something like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:clickable="true"
android:fillViewport="true"
android:focusable="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="650dp"
android:background="#mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="650dp"
android:layout_below="#+id/img1"
android:background="#color/colorPrimary" />
</LinearLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Try this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/emailtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColorHint="#80000000" />
<EditText
android:id="#+id/passwordtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#80000000" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<Button
android:id="#+id/enter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Enter"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="This is my app"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/enter" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use constraint layout. Pay attention to layout_constraintBottom_toTopOf button and layout_constraintTop_toBottomOf textview.

How to get actionBar size properly programatically?

I need to shift a RecyclerView down by the size of my actionBar when a Button click occurs.
I tried this code
params = (CoordinatorLayout.LayoutParams) myrv.getLayoutParams();
public void changeRecyclerViewPosition() {
params.setMargins(0, android.R.attr.actionBarSize, 0, 0);
myrv.setLayoutParams(params);
}
And as a result the RecyclerView disapears when the Button is clicked.
So I tried to log the android.R.attr.actionBarSize value and it's too big (2130903043).
I thought that maybe the result is in pixels and it needs to be converted to dp.
So can you guys explain to me what's wrong and the reason behind that behaviour ?
EDIT:
<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"
android:padding="8dp"
tools:context=".Activities.LoadSavedCoffretDataActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/cancel_img"
android:layout_marginTop="?attr/actionBarSize"
android:elevation="5dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/cancel" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_id"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal">
<ImageView
android:id="#+id/delete_img"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_delete_forever_black_24dp"/>
</LinearLayout>

You can get Action bar height by
public void changeRecyclerViewPosition() {
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (getActivity().getTheme().resolveAttribute(R.attr.actionBarSize, tv, true))
{
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
}
params.setMargins(0,actionBarHeight, 0, 0);
myrv.setLayoutParams(params);
}

Use this xml for fixed App Bar Size
the main line is
**android:minHeight="?attr/actionBarSize"**
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBar"
android:minHeight="?attr/actionBarSize"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/toolBar"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"/>
</com.google.android.material.appbar.AppBarLayout>

CardView is not Collapsing in scrolling activity

I have Scrolling activity and I have a CardView in it which behave like this floating action button as shown in this animation.
As you can see fab is fading (in and out), but the card view is not behaving like that.
My layout.xml is as follows:
<?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"
android:fitsSystemWindows="true"
tools:context="com.rhcloud.arshadali.task.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.v7.widget.CardView
android:id="#+id/id_card"
android:layout_width="match_parent"
android:layout_height="46dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:foreground="#android:color/white"
android:layout_margin="5dp">
<ImageView
android:id="#+id/app_googleplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:layout_gravity="center_vertical"/>
<TextView
android:id="#+id/app_apk"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="com.javiersantos"
android:fontFamily="sans-serif-thin"
android:textColor="#android:color/black"
android:gravity="center"/>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Any way to achieve this?

I think the Card View should be a child of your collapsing toolbar for the effects to take place (Place it above the Toolbar).
<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"
android:fitsSystemWindows="true"
tools:context="com.rhcloud.arshadali.task.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.CardView
android:id="#+id/id_card"
android:layout_width="match_parent"
android:layout_height="46dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:foreground="#android:color/white"
android:layout_margin="5dp">
<ImageView
android:id="#+id/app_googleplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:layout_gravity="center_vertical"/>
<TextView
android:id="#+id/app_apk"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="com.javiersantos"
android:fontFamily="sans-serif-thin"
android:textColor="#android:color/black"
android:gravity="center"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />

Put CardView inside a LinearLayout and move it to the top of Toolbar.
It works.
Like this:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:layout_marginTop="60dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:padding="10dp">
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.Overlay.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>

Perhaps my answer is too late, but you can try this simplest way. Put the card view in the "Content Activity" which is usually automatically generated when you choose Scrolling Activity template in android studio. Remember, if you want to have multiple card view, you should put those card views under one Linear/Relative Layout in the Content Activity.

This work:
if you are using Databinding this is the perfect solution:
In same Class:
#BindingAdapter("hideWithAppBarLayout")
public static void hideWithAppBarLayout(View view, AppBarLayout appBarLayout) {
if (appBarLayout == null) return;
if (view.getParent() instanceof CoordinatorLayout) {
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
lp.setAnchorId(appBarLayout.getId());
appBarLayout.addOnOffsetChangedListener((AppBarLayout.BaseOnOffsetChangedListener) (appBar, verticalOffset) -> {
float percentage = ((float) Math.abs(verticalOffset) / appBar.getTotalScrollRange());
//on collapsing
if (percentage == 1) view.setVisibility(View.GONE);
//on expending
if (percentage == 0) view.setVisibility(View.VISIBLE);
});
}
}
In xml layout do this:
<androidx.cardview.widget.CardView
app:layout_anchor="#id/appbar"
app:hideWithAppBarLayout="#{appbar}"
app:layout_anchorGravity="bottom|center_horizontal">
//todo
</androidx.cardview.widget.CardView>