How to set background of collapsing toolbar with custom behavior to fit whole screen

Question

I'm following nice repo which shows how to make custom behavior of collapsing toolbar WhatsApp-ProfileCollapsingToolbar.

What I don't like is when picture below toolbar (toolbar's font is white) is white then toolbar is not visible. So I'm trying to set background of toolbar to some color.

First I added to widget_header_view.xml android:background="@android:color/holo_red_light" and now I have it like:

<?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've changed app:contentScrim="?attr/colorPrimary" to app:contentScrim="@android:color/holo_red_light"

But as this repo uses margins in WhatsappHeaderBehavior effect is like:

But I'd like it to be like:

EDIT 1:

solution with paddings proposed by https://stackoverflow.com/users/3436179/alexander in https://mcmap.net/q/1828985/-how-to-set-background-of-collapsing-toolbar-with-custom-behavior-to-fit-whole-screen does not help because then "floating" toolbar covers back button like here:

Binocular

Have you found solution? I'm facing same problems. – Backwoods

Answer 1

You should use padding instead of margin. For this purpose edit WhatsuppHeaderBehavior.java like this:

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 setBackground method for 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;
        }
    }

Tabular

Thanks but it does not help, see my edited question why. – Ionian

Its how its works on this github project, in other way you should totally rework all project. In this post i use padding instead of margin, if use margin background will be like in your question. – Tabular

You didn't get - when I use margins I have problems like i.sstatic.net/Yx4vZ.png; when I use paddings (exactly like you proposed) I have problem like i.sstatic.net/Jqn2a.png. – Ionian

Answer 2

If you are not rushing for deadline then rather use google standard collapsing toolbar.

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

Pinzler