Develop Reference

Custom view within recyclerview not drawn after scroll

I have a custom view, which draws a concave shape (visualized with red rectangle on screenshot). This custom view is a part of my recycler view element layout, which also contains a plain view with background color (right part).
This is an extract of my custom view (without rotation, but same drawing methods):
public class InvertedCircleView extends View {
private Paint mPaint;
private float mCanvasCenterX;
private float mCenterCircleWidth, mCenterCircleHeight;
public InvertedCircleView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
[...]
mPaint.setStyle(Paint.Style.FILL);
canvas.drawPaint(mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mCenterCircleWidth = canvas.getWidth();
mCenterCircleHeight = canvas.getHeight();
mCanvasCenterX = canvas.getWidth() / 2;
canvas.drawOval(mCanvasCenterX - (mCenterCircleWidth / 2),
-mCenterCircleHeight,
mCanvasCenterX + (mCenterCircleWidth / 2),
mCenterCircleHeight,
mPaint);
}
}
When the recyclerview shows up the first time, everything looks fine. But when i scroll down (or up), the custom view part is not visible on all the new elements.
What i have tested so far:
setItemViewCacheSize -> this helps, but when i scroll up again, it shows the same bad result
notifyDataSetChanged -> this directly results in the "wrong" visualization for all elements
What may be the reason for this behaviour?

Found my mistake:
I used "mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));" in the onDraw-function. But i forgot to reset Xfermode in the end.
I added the line " mPaint.setXfermode(null);" and everything works as expected :)

onDraw and invalidate method

I'm doing a school project. In this project I have to do a program that have one or more ball bouncing in the screen. I did some research on google to help me in this, and I found this code :
public class BouncingBallInside extends View {
private List<Ball> balls = new ArrayList<>();
public BouncingBallInside(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public BouncingBallInside(Context context) {
super(context);
init();
}
private void init(){
//Add a new ball to the view
balls.add(new Ball(50,50,100, Color.RED));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//Draw the balls
for(Ball ball : balls){
//Move first
ball.move(canvas);
//Draw them
canvas.drawOval(ball.oval,ball.paint);
}
invalidate(); // See note
}
}
The ball class :
public class Ball{
public int x,y,size;
public int velX = 10;
public int velY=7;
public Paint paint;
public RectF oval;
public Ball(int x, int y, int size, int color){
this.x = x;
this.y = y;
this.size = size;
this.paint = new Paint();
this.paint.setColor(color);
}
public void move(Canvas canvas) {
this.x += velX;
this.y += velY;
this.oval = new RectF(x-size/2,y-size/2,x+size/2,y+size/2);
//Do we need to bounce next time?
Rect bounds = new Rect();
this.oval.roundOut(bounds); ///store our int bounds
//This is what you're looking for ▼
if(!canvas.getClipBounds().contains(bounds)){
if(this.x-size<0 || this.x+size > canvas.getWidth()){
velX=-velX;
}
if(this.y-size<0 || this.y+size > canvas.getHeight()){
velY=-velY;
}
}
}
}
The program works perfecly.
I studied it deeply as good as I could. But after it and after watching the documentation I couldn't understand two thing:
Where and when the method onDraw(Canvas canvas) is called the first time.
Why at the end of onDraw there is invalidate()?
I mean the documentation said :
Invalidate the whole view. If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future.
so... if this method is used to call onDraw,why don't call it direcly? what's the difference?

1)The onDraw method will be called by the framework, whenever the view is invalid. A view is invalid when it first comes on screen, so when you set your content view for an activity they layout and all views in it will be measured, laid out, then drawn (via onDraw).
After that the UI thread will call onDraw if needed every 16ms or so (so it draws at 60 FPS).
2)Its marking the view as needing to be redrawn, so the next time the the screen is drawn onDraw will be called. Otherwise it would be skipped, as we could assume it isn't needed.
Why you don't call onDraw directly- efficiency. In a very simple drawing system you would- but drawing is time consuming, you don't want to do it more than you have to. So instead of drawing immediately (which wouldn't work anyway, you wouldn't have the right Canvas to pass to onDraw), you call invalidate and the system will call onDraw if needed at a regular interval.
Note that this isn't particularly good code. In particular, having the onDraw trigger the move which updates the balls location instead of using a timer is icky. Having onDraw call invalidate as a result is also kind of icky. A better solution would be to separate the view, model, and timer into more of an MVC or MVP system.

Only Draw background where Children Views are not?

I'm trying to prevent over-draw in my app, and in one of the root views I'd like to detect the location of my children views, and then draw a background for where they are not. From my understanding, clipping would clip outside of the path, but what I'd really like to do is not draw at certain locations on the screen where the children are. Is there a good way to do this?
EDIT:
So I haven't played with canvas in a while, but I'm looking to do something like this:
public class ContainerView extends FrameLayout {
private final Paint mBackgroundPaint = new Paint();
private final Path mPath = new Path();
public ContainerView(Context context, AttributeSet attrs) {
super(context, attrs);
mBackgroundPaint.setColor(context.getResources().getColor(R.color.default_background));
}
#Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPaint(mBackgroundPaint);
mPath.reset();
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
mPath.addRect(child.getLeft(), child.getTop(), child.getRight(), child.getBottom(),
Path.Direction.CCW); // What direction do I want?
}
canvas.clipPath(mPath);
}
}
clipPath just wont do what I want though, I don't think. I think that would clip outside the path, and I need to clip inside the path.

You'd probably want to do something like override onLayout and at the end of it:
iterate over all your child views
check if the child is visible/opaque
build up a list of each child's position/size
use that list to do your own background clipping

Android graphics outside of onDraw method

Okay, so I'm trying to draw to a canvas on Android from outside of the onDraw method.
It's just easiest to show my code:
public class TestActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Paint p = new Paint();
p.setColor(Color.GREEN);
Panel a = new Panel(this,150,150,50,p);
a.drawThing();
setContentView(a);
}
class Panel extends View{
private float radius, x, y;
private Canvas CAN;
private Paint p;
public Panel(Context context, float x, float y, float radius, Paint p){
super(context);
this.x = x;
this.y = y;
this.radius = radius;
this.p = p;
}
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
CAN = canvas;
}
public void drawThing(){
CAN.drawCircle(x, y, radius, p);
}
}
}
Do you see what I'm trying to do? But for some reason it throws a NullPointerException

Many of the graphics resources are explicitly freed/released after they've been used. I'm not exactly sure why they do this, but whatever the reason, they don't you to do what you're trying.
Instead of drawing outside of the onDraw method, use some kind of flag to change what the onDraw method is doing. When you want to draw some specific thing, you can set the right flag, and call invalidate().
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
if (doThing) {
canvas.drawCircle(x, y, radius, p);
}
}
EDIT
Something else to consider is drawing to and "off-scrren" source. This means using some kind of graphics representation like a bitmap as a buffer that you can draw to in other code. This won't update your gui, but it will give you the chance to do some heavy duty drawing without locking up the user's device. Once you are done drawing to the bitmap (or whatever) you can invalidate your view and draw it to the screen in the onDraw(Canvas) method.

I'm pretty sure that the null pointer happens because you're calling drawSomething before onDraw ever gets called. So CAN is null.

You can draw onto canvas outside of the onDraw. See this Can we have two canvases in an activity ? (OR) Having a canvas outside the onDraw() is not working for more info.

Android OnTouch events numerous Objects

ok I'm playing w/ ontouch events extending a view.
what I've done is made a circle on touch.. the cirlce will follow as you move. As you move another circle is made and will sit in the postion decrementing the radius until it disappears.. (right now up to like 10 circles). I can also handle multiple fingers touching at one point in time. Here's the problem.. THE CODE IS NASTY!
To create multiple circle This is my paint method:
public void onDraw(Canvas canvas)
{
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(stroke);
canvas.drawCircle(x,y,radius,paint);
canvas.drawCircle(x1,y1,radius1,paint);
canvas.drawCircle(x2,y2,radius2,paint);
canvas.drawCircle(x3,y3,radius3,paint);
canvas.drawCircle(x4,y4,radius4,paint);
canvas.drawCircle(x5,y5,radius5,paint);
canvas.drawCircle(x6,y6,radius6,paint);
paint.setColor(Color.BLUE);
canvas.drawCircle(x7,y7,radius7,paint);
canvas.drawCircle(x8,y8,radius8,paint);
paint.setColor(Color.YELLOW);
canvas.drawCircle(x9,y9,radius9,paint);
canvas.drawCircle(x10,y10,radius10,paint);
}
so as you can see this by far inefficient and makes for some long nasty code.. Part of the issue is the fact I'm bound to only being able to change coordinates in Ontouch.. and invalidate. Anyoone know a way I can do this more efficently (in a more object orriented type approach).

First things first, start with this:
public class Circle {
public int x;
public int y;
public double radius;
public Paint paint;
/* constructors, getters & setters if you feel like ...*/
}
And put all your circles in a
ArrayList<Circle> circles = new ArrayList();
public void onDraw(Canvas canvas)
{
/*...*/
Iterator iterator = circles.iterator();
while(iterator.hasNext()) {
drawCircle(iterator.next());
}
}
public void drawCircle(Canvas canvas, Circle circle) {
canvas.drawCircle(circle.x, circle.y, circle.raidus, circle.paint);
}