CoordinatorLayout: View disappears with custom behavior

Question

I am a newbie to CoordinatorLayout and this is a really strange behavior I am getting in CoordinatorLayout.I have an ImageView(or more specifically a subclass of ImageView called CircleImageView(it houses the Profile pic in the center here)) as one of the children of the CoordinatorLayout. I have anchored this CircleImageView to the AppbarLayout(which is another child of the CoordinatorLayout). Here is the entire layout I have:

So far so good. I am currently able to scroll the AppbarLayout and the NestedScrollView moves along with it. But, I thought of animating the Profile pic to move to right as we scroll up and decided to rely on custom CoordinatorLayour.Behavior. I ended up with a custom behavior that tries translation of the CircleImageView. It's not complete yet but is supposed to translate the view roughly some amount except now, the CircleImageView has disappeared completely with the introduction of custom behavior.

What might be the reason for this?

Note: I have tried replacing the CircleImageView with an ImageView and the behavior remains the same.

Here is the layout for reference:

And the custom behavior:(I know the calculations might not be sound but I am trying for an initial crude animation)

public class ProfilePicBehavior extends CoordinatorLayout.Behavior{


    public ProfilePicBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
        // Translate the CircleImageView to the right
        // Calculate first, what fraction the AppBarLayout has shrunk by
        float proportion = dependency.getHeight() / 200f;
        // Translate the child by this proportion
        float translationX = parent.getWidth() * proportion;
        child.setTranslationX(translationX);

        return true;
    }
}

user_6248491 · Answer

According to this answer: https://stackoverflow.com/a/40023161/6248491

It is stating that The contained CollapsingToolbarLayout fiddles with parent's elevation

Try giving elevation of the AppBarLayout to 0dp. Also, the CircleImageView should hold more (higher) elevation in order to not get "lifted" on top.

Hope this helps. Let me know if it works.

user_972671 · Answer

I got the same problem with you a few months ago. I solve it by a custom CoordinatorLayout.Behavior as below (I dont remember the link of same question):

public class CollapsingImageBehavior extends CoordinatorLayout.Behavior {

private final static int X = 0;
private final static int Y = 1;
private final static int WIDTH = 2;
private final static int HEIGHT = 3;

private int mTargetId;

private int[] mView;

private int[] mTarget;

public CollapsingImageBehavior() {
}

public CollapsingImageBehavior(Context context, AttributeSet attrs) {

    if (attrs != null) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CollapsingImageBehavior);
        mTargetId = a.getResourceId(R.styleable.CollapsingImageBehavior_collapsedTarget, 0);
        a.recycle();
    }

    if (mTargetId == 0) {
        throw new IllegalStateException("collapsedTarget attribute not specified on view for behavior");
    }
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

    setup(parent, child);

    AppBarLayout appBarLayout = (AppBarLayout) dependency;

    int range = appBarLayout.getTotalScrollRange();
    float factor = -appBarLayout.getY() / range;

    int left = mView[X] + (int) (factor * (mTarget[X] - mView[X]));
    int top = mView[Y] + (int) (factor * (mTarget[Y] - mView[Y]));
    int width = mView[WIDTH] + (int) (factor * (mTarget[WIDTH] - mView[WIDTH]));
    int height = mView[HEIGHT] + (int) (factor * (mTarget[HEIGHT] - mView[HEIGHT]));

    CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
    lp.width = width;
    lp.height = height;
    child.setLayoutParams(lp);
    child.setX(left);
    child.setY(top);

    return true;
}

private void setup(CoordinatorLayout parent, View child) {

    if (mView != null) return;

    mView = new int[4];
    mTarget = new int[4];

    mView[X] = (int) child.getX();
    mView[Y] = (int) child.getY();
    mView[WIDTH] = child.getWidth();
    mView[HEIGHT] = child.getHeight();

    View target = parent.findViewById(mTargetId);
    if (target == null) {
        throw new IllegalStateException("target view not found");
    }

    mTarget[WIDTH] += target.getWidth();
    mTarget[HEIGHT] += target.getHeight();

    View view = target;
    while (view != parent) {
        mTarget[X] += (int) view.getX();
        mTarget[Y] += (int) view.getY();
        view = (View) view.getParent();
    }

}
}

You have to add a custom styleable attrs.xml:

After that, you can define your xml as below:

user_1827254 · Answer

Last year I had to do something similar.

The AvatarImageBehavior is based on the GitHub project by Saul Molinero (saulmm)

As you can notice, the CircleImageView is the last element of the layout. Maybe it is your issue? Hope it helps.

fragment's layout

AvatarImageBehavior

public class AvatarImageBehavior extends CoordinatorLayout.Behavior {

    private final static String TAG = AvatarImageBehavior.class.getSimpleName();
    private final Context mContext;

    private boolean isInitialized = false;

    private float mStartX;
    private float mMaxXMove;

    private float mStartY;
    private float mMaxYMove;

    private float mMaxScroll;

    private float mStartHeight;
    private float mMaxHeightChange;

    private float mFinalHeight;
    private float mFinalX;
    private float mFinalY;

    public AvatarImageBehavior(Context context, AttributeSet attrs) {
        mContext = context;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
        return dependency instanceof Toolbar;
    }

    private void initProperties(CircleImageView child, View dependency) {
        mMaxScroll = dependency.getY();

        mStartHeight = child.getHeight();
        mFinalHeight = mContext.getResources().getDimensionPixelOffset(R.dimen.product_avatar_final_width);
        mMaxHeightChange = mStartHeight - mFinalHeight;

        mStartX = child.getX();
        mFinalX = mContext.getResources().getDimensionPixelOffset(R.dimen.product_avatar_margin_left);
        mMaxXMove = mStartX - mFinalX;

        mStartY = child.getY();
        mFinalY = (dependency.getHeight() - mFinalHeight) / 2f;
        mMaxYMove = mStartY - mFinalY;

        isInitialized = true;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {

        if (!isInitialized)
            initProperties(child, dependency);

        final float currScrollDist = dependency.getY();

        if (currScrollDist == 0) {
            setParams(child, (int) mFinalX, (int) mFinalY, (int) mFinalHeight);
        } else if (currScrollDist == mMaxScroll) { // reset the values if the scroll is at the max
            setParams(child, (int) mStartX, (int) mStartY, (int) mStartHeight);
        } else {
            float scrollFactor = currScrollDist / mMaxScroll;
            float factor = 1f - scrollFactor;

            float currX = mStartX - (mMaxXMove * factor);
            float currY = mStartY - (mMaxYMove * factor);
            float currHeight = mStartHeight - (mMaxHeightChange * factor);

            setParams(child, (int) currX, (int) currY, (int) currHeight);
        }

        return true;
    }

    private void setParams(CircleImageView view, int xPos, int yPos, int height) {
        view.setX(xPos);
        view.setY(yPos);
        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
        lp.width = height;
        lp.height = height;
        view.setLayoutParams(lp);
    }
}

user_2378217 · Answer

I have figured it out finally. I narrowed down the problem to the custom behavior(obviously) and the problem was the anomalous values of the translation for the child view(CircleImageView).

Here is the custom behavior after fine tuning the values:

public class ProfilePicBehavior extends CoordinatorLayout.Behavior{

    private int mDependencyHeight;
    private int mProfilePicMargin;
    private int mActionBarHeight;

    public ProfilePicBehavior(Context context) {
        init(context);
    }

    public ProfilePicBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){

        mDependencyHeight = (int)context.getResources()
                .getDimension(R.dimen.appbarlayout_learner_home_height);

        mProfilePicMargin = (int)ViewUtils.dpToPx(context, 8f);

        mActionBarHeight = (int)ActivityUtils.getActionBarHeight(context);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {

        if(dependency instanceof AppBarLayout){
            return true;
        }
        return false;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
        // Translate the CircleImageView to the right
        // Calculate first, what fraction the AppBarLayout has shrunk by
        int bottom = dependency.getBottom();
        int top = dependency.getTop();
        int viewHeight = bottom;

        float proportion = Math.min(1, 1 - ((viewHeight - mActionBarHeight) / (float)(mDependencyHeight - mActionBarHeight)));
        // Translate the child by this proportion
        float translationX = (parent.getWidth()/2 - child.getWidth()/2 - mProfilePicMargin) * proportion;
        float translationY = (child.getHeight()/2 - mProfilePicMargin) * proportion;

        child.setTranslationX(translationX);
        child.setTranslationY(translationY);

        return true;
    }
}

You can see that it is simpler than @Eselfar's answer which manipulates the properties through the LayoutParams.(I haven't tested his answer though because my animation was a bit different)

The logic is really simple: Translate the CircleImageView by the proportion that AppBarLayout has shrunk by.

CoordinatorLayout: View disappears with custom behavior

4 Answers