How to set the background of a collapsible toolbar with custom behavior to fit the entire screen

Question

I follow a good repo that shows how to make custom behavior of the WhatsApp-ProfileCollapsingToolbar collapsible toolbar.

I don't like it when the image below the toolbar (the toolbar font is white) is white, then the toolbar is not visible. So I am trying to set the background of the toolbar to some color.

First I added in widget_header_view.xml android:background="@android:color/holo_red_light" , and now I have this as:

 <?xml version="1.0" encoding="utf-8"?> <com.anton46.whatsapp_profile.HeaderView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/holo_red_light" android:orientation="vertical"> <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:ellipsize="end" android:maxLines="1" android:textColor="@android:color/white" android:textSize="@dimen/header_view_start_text_size" android:textStyle="bold" /> <TextView android:id="@+id/last_seen" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" android:textColor="@android:color/white" /> </com.anton46.whatsapp_profile.HeaderView> 

And in activity_main.xml I changed app:contentScrim="?attr/colorPrimary" to app:contentScrim="@android:color/holo_red_light"

But since this repo uses fields in WhatsappHeaderBehavior , the effect is as follows:

But I would like it to be like this:

EDIT 1:

The solution with paddings suggested by https://stackoverflow.com/users/3436179/alexander in https://stackoverflow.com/questions/1005543/... does not help, because then the "floating" toolbar closes the back button, as here:

Answer 1

You should use padding instead of margin. To do this, edit WhatsuppHeaderBehavior.java as follows:

 private int mStartPaddingLeft; private int mEndPaddingLeft; private int mPaddingRight; private int mStartPaddingBottom; @Override public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) { shouldInitProperties(); int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange(); float percentage = Math.abs(dependency.getY()) / (float) maxScroll; float childPosition = dependency.getHeight() + dependency.getY() - child.getHeight() - (getToolbarHeight(mContext) - child.getHeight()) * percentage / 2; if (Math.abs(dependency.getY()) >= maxScroll / 2) { float layoutPercentage = (Math.abs(dependency.getY()) - (maxScroll / 2)) / Math.abs(maxScroll / 2); child.setPaddingRelative((int)(layoutPercentage * mEndPaddingLeft) + mStartPaddingLeft,0,0,0); } child.setY(childPosition); if (isHide && percentage < 1) { child.setVisibility(View.VISIBLE); isHide = false; } else if (!isHide && percentage == 1) { child.setVisibility(View.GONE); isHide = true; } return true; } private void shouldInitProperties() { if (mStartPaddingLeft == 0) { mStartPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_left); } if (mEndPaddingLeft == 0) { mEndPaddingLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_left); } if (mStartPaddingBottom == 0) { mStartPaddingBottom = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_start_margin_bottom); } if (mPaddingRight == 0) { mPaddingRight = mContext.getResources().getDimensionPixelOffset(R.dimen.header_view_end_margin_right); } if (mTitleStartSize == 0) { mTitleEndSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_end_text_size); } if (mTitleStartSize == 0) { mTitleStartSize = mContext.getResources().getDimensionPixelSize(R.dimen.header_view_start_text_size); } } 

Also use the setBackground method for the toolbar in MainActivity

 @Override public void onOffsetChanged(AppBarLayout appBarLayout, int offset) { int maxScroll = appBarLayout.getTotalScrollRange(); float percentage = (float) Math.abs(offset) / (float) maxScroll; if (percentage == 1f && isHideToolbarView) { toolbarHeaderView.setVisibility(View.VISIBLE); toolbar.setBackgroundColor(yourColor); isHideToolbarView = !isHideToolbarView; } else if (percentage < 1f && !isHideToolbarView) { toolbarHeaderView.setVisibility(View.GONE); toolbar.setBackgroundColor(yourColor); isHideToolbarView = !isHideToolbarView; } } 

Answer 2

If you're in no hurry over the deadline, rather use the standard Google Collapse toolbar.

http://antonioleiva.com/collapsing-toolbar-layout/