When drawing outside the view clip bounds with Android: how do I prevent underling views from drawing on top of my custom view?

Question

I'm wrote a custom Android View that need to draw outside its clipping Bounds.

This is what I have:

This is what happens when I click a button, say the right button:

How do I prevent the View below to draw on top of my "handle"?

Some related pseudo-code from my project follow.

My custom view MyHandleView draw like this:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Path p = mPath;
    int handleWidth = mHandleWidth;
    int handleHeight = mHandleHeight;
    int left = (getWidth() >> 1) - handleWidth;

    canvas.save();

    // allow drawing out of bounds vertically
    Rect clipBounds = canvas.getClipBounds();
    clipBounds.inset(0, -handleHeight);
    canvas.clipRect(clipBounds, Region.Op.REPLACE);

    // translate up to draw the handle
    canvas.translate(left, -handleHeight);

    // draw my background shape
    canvas.drawPath(p, mPaint);

    canvas.restore();
}

The layout is something like this (I simplified a little):

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main content of the SlidingUpPanel -->
    <fragment
        android:above=@+id/panel"
        class="com.neosperience.projects.percassi.android.home.HomeFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?android:attr/actionBarSize"
        tools:layout="@layout/fragment_home" />

    <!-- The Sliding Panel -->
    <LinearLayout
        android:id="@id/panel"
        android:layout_width="match_parent"
        android:layout_height="@dimen/myFixedSize"
        android:alignParentBottom="true"
        android:orientation="vertical"
        android:clipChildren="false">

        <MyHandleView  xmlns:custom="http://schemas.android.com/apk/res-auto.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            custom:handleHeight="@dimen/card_panel_handle_height"
            custom:handleWidthRatio="@dimen/card_panel_handle_width_ratio"
            custom:handleBackgroundColor="#000"/>

        <TextView
            android:id="@+id/loyaltyCardPanelTitle"
            android:layout_width="match_parent"
            android:layout_height="@dimen/card_panel_height"
            android:background="#000"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="24sp"
            android:textColor="#fff"
            android:text="My TEXT"/>
    </LinearLayout>

</RelativeLayout>

You can think of the fragment as a view containing two button at the bottom, in a LinearLayout.

In place of the external RelativeLayout I'm really using a view from a library: SlidingUpPanelLayout (https://github.com/umano/AndroidSlidingUpPanel). But I tested the behavior with this RelativeLayout: same thing, meaning the library is not related.

I say this just to let you know that I can't just place there a FrameLayout and avoid drawing outside the clipping bounds.

I suspect this has something to do with the fact that when I touch the button it redraw itself but my other view (which is somewhere else in the hierarchy) doesn't get re-drawed (this is an optimization and I doubt it can be disabled).

I'd like to be able to invalidate my custom view whenever any other "near" (or any) view get's invalidated, thus I need some kind of listener on view invalidation but I'm not aware of any.

Can someone help?

Solution

I found the solution myself, even if this is not optimal for performances.

Just add:

android:clipChildren="false"

to the RelativeLayout (or whatever layout you have).

This has 2 effects (may be more, this are the two that interested me): - the ViewGroup doesn't clip the drawing of his children (obvious) - the ViewGroup doesn't check for intersection with dirty regions (invalidated) when considering which children to redraw

I digged the View code about invalidating.

The process goes, more or like, like this:

1. a View invalidate itself, the region it usually draw (a rectangular) become a "dirty region" to be redrawed
2. the View tell its parent (a ViewGroup of some kind) it need to redraw itself
3. the parents do the same with it's parent to the root
4. each parent in the hierarchy loop for every children and check if the dirty region intersect some of them
5. if it does it also redraw them

In step 4 clipping is involved: the ViewGroup check view bounds of his child only if clipChildren is true: meaning that if you place it to false it always redraw all its children when any of them is invalidated.

So, my View hierarchy was like this:

ViewGroup A
|
|----- fragment subtree (containing buttons, map,
|       whatever element that I don't want to draw
|       on top of my handle)
|
|----- ViewGroup B
       |
       |---- my handle (which draw outside its clip bounds)

In my case the "handle" draw ouf of it's bound, on top of something that is usually drawed by some element of the fragment subtree.

When any view inside the fragment is invalidated it pass its "dirty region" up in the view tree and each view group check if there are some other children to be redraw in that region.

ViewGroup B would clip what I draw outside the clip bounds if I do not set clipBounds="false" on it.

If anything get's invalidated in the fragment subtree the ViewGroup A will see that ViewGroup B dirty region is not intersecting the fragment subtree region and will skip redrawing of ViewGroup B.

But if I also tell ViewGroup A to not clip children it will still give ViewGroup B an invalidate command which will then cause a redraw of my handle.

So the solution is to make sure to set

android:clipChildren="false"

on any ViewGroup in the hierarchy above the View that draw out of it's bounds on which the content may fall "under" the out-of-bound region you are drawing.

The obvious side effect of this is that whenever I invalidate any of the view inside ViewGroup A an invalidate call will be forwarded, with the invalid region, to all the view in it.

However any view that doesn't intersect the dirty region which is inside a ViewGroup with clipChildren="true" (default) will be skipped.

So to avoid performance issues when doing this make sure your view groups with clipChildren="true" have not many "standard" direct children. And with "standard" I mean that they do not draw outside their view bounds.

So for example if in my example ViewGroup B contains many view consider wrapping all those in a ViewGroup with clipChildren="true" and only leave this view group and the one view that draw outside its region as direct children of ViewGroup B. The same goes for ViewGroup A.

This simple fact will make sure no other View will get a redraw if they aren't in the invalidated dirty region minimizing the redraws needed.

I'm still open to hear any more consideration if someone has one ;)

So I'll wait a little bit before marking this as accepted answer.

EDIT: Many devices do something different in handling clipChildren="false". I discovered that I had to set clipChildren="false" on all the parent views of my custom widget that may contains elements in their hierarchy which should draw over of the "out of bound region" of the widget or you may see your custom drawing showing ON TOP of another view that was supposed to cover it. For example in my layout I had a Navigation Drawer that was supposed to cover my "handle". If I didn't set clipChildren="false" on the NavigationDrawer layout I may sometimes see my handle pop up in front of the opened drawer.

EDIT2: My custom widget had 0 height and drawed "on top" of itself. Worked fine on Nexus devices but many of the others had some "optimization" in place that completely skip drawing of views that have 0 height or 0 width. So be aware of this if you want to write a component that draw out of it's bound: you have to assign it at least 1 pixel height / width.

Comments

[pskink]

i still dont understand why dont you want the bottom view overlap those two buttons above...

[Daniele Segato]

It's not that I don't want it. I can't. The SlildeUpPanel library requires to have 2 children. The first one is the main content (the one with the two buttons) the second is the content that will slide up. I can use a FrameLayout and place it all correctly but then it will not slide up at all. Thus the only other option would be to write my own version of the slide up panel or patch the one I'm using. I would like to avoid it because it's a lot of work.

[Daniele Segato]

no other takers uh? since this seems to work fairly well, even in performances I mark this as accepted answer

[Daniele Segato]

@user1186061 I highly doubt that :) I wrote a detailed explanation on how it works and when it makes sense. You are probably in a different situation.

[KinGPinG]

Yeah maybe. But thanks for the update, I appreciate it ;)

[Dave Hubbard]

Worked for me. Similar problem. Custom View added to a FrameLayout. When moved off-screen, and then back, it would stay partially clipped. Also if rotated off screen using setRotation and setPivotX and setPivotY. When rotation brought it back on screen it stayed clipped. Even though it's 'onDraw()' was called. calling setClipChildren(false) on my FrameLayout worked fine. I have other logic to prevent 'drawing' when too far off screen. Thanks.

[xjcl]

I tried this solution for 90-degree-rotated text that gets falsely clipped and this did not help. Too bad, was well researched.

[Daniele Segato]

@xjcl clipping happens at several levels of the layout hierarchy. It might also be that your widget rendering the text does the clipping itself

[xjcl]

@DanieleSegato I tried disabling clipping at every level of the hierarchy, and that still did not work. If you check my profile you will see I found a different solution now (using negative margins) :)