Animated UI state change Part 2. Add child view with custom scrolling behavior.

This is a short update of the first part: I have added new icon image that has been excluded from clipping and screenshot and has its own behavior depending on scroll offset.

starter code is the solution code from part 1
solution code of this article

Part 1: animated UI state change based on clipping path for canvas.
Part 2: current story.
Part 3: apply fling and auto scrolling .
Part 4: RecyclerView item with custom scrolling behavior.
Part 5: add parallax effect-coming soon
Part 6: add snowing animation to the winter state — in progress

Let’s add additional UI component as a child of Animated layout.
But what if I don’t want this child view to be clipped and “screenshoted”

As example, let’s add additional child icon — to the top right corner of animatedLayout — as circular image view:

This new image view has summer and winter state appearances defined by circle background color, image (snowflake or sun) and different border color.

Best place for initializing this view is onFinishInflate() , and add to the updateOffset(initOffset) new method: updateIconView().

Step 1: exclude from clipping and screenshotting.

Before applying any dynamic translate and transparency changes we have to exclude this view from screenshotting. Inside drawChild() just check in canvas instanceof ScreenShotCanvas block whether argument-view is current new view and don’t draw it into ScreenShotCanvas in such case.

Second problem is to make this view not to be clipped at all during drawing to the main canvas: in such case just call return super.drawChild(canvas, child, drawingTime);

Step 2: update view from onTouch method.

In onTouchEvent() insideACTION_MOVE , ACTION_CANCEL and
ACTION_UP I update offset value — so add additional logic into this updateOffset() method:

Inside updateIconView(), depending on offset position mOffsetValue, set translate and alpha to the view.

Thanks for reading.
Solution code.