Right to left progress bar with text - android

I need a progress bar displaying progress from right to left or from left to right depending on variable. I have also text in the middle of the bar. For all that, I am using a custom class. For rotating the bar, I followed this thread but somehow either the text is not displayed, or it is rotated, or everything disappears from the view...
Code without rotation:
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
// draw text
}
I have a property positive telling whether to start from left or from right. It would be easy, if I didn't had the text, I would simply call setRotation() somewhere in the code, but now I am trying to rotate the canvas and I can't manage it to bring everything in the correct order. Can someone help me?

I just found it out. Using this thread, I ended up with the following code:
protected synchronized void onDraw(Canvas canvas) {
canvas.save();
if(!positive) {
int cx = this.getMeasuredWidth() / 2;
int cy = this.getMeasuredHeight() / 2;
canvas.scale(-1f, 1f, cx, cy);
}
super.onDraw(canvas);
canvas.restore();
// draw text
}
I have no idea why rotation doesn't work for me but the scale method works fine.

Related

Show Text Over Android SeekBar Track

I want to show some static text over seek bar track.
It's different from what's normally required, i.e., showing current progress as tip or inside thumb.
I've tried both options of showing text; By adding a TextView over seekbar or by adding it dynamically in onDraw() method of my custom seekbar class.
NORMAL VIEW:
PROBLEM VIEW:
The issue is that the text is ABOVE both track and seekbar (as shown above). I somehow want to decrease the z-index of text so that it hides behind the thumb.
I'm overriding the onDraw method like:
#Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.getTextBounds(text, 0, text.length(), bounds);
paint.setTextSize(36);
int x = getWidth() / 2 - bounds.centerX();
int y = getHeight() / 2 - bounds.centerY();
canvas.drawText(text, x, y, paint);
}
Is there a way I can hide text behind thumbnail?
Any help is greatly appreciated.

Draw in front of certain child views

I have a ViewGroup that consists on a header and a circle of menu items. Basically I have a closing/opening animation where my item views go behind the header view. Since all views have transparencies, when the item views go behind the header view, they are still visible and end up appearing behind the header view through the transparencies.
What I wanted to do is to intersect the item views with the hweader view, erasing the intersection. What I came up with was to override dispatchDraw and do something like PorterDuff.Mode.CLEAR
But I can only do this to all views at once, in the sense. Using the code below, it'll erase everything that's been drawn in the view in that specific area, thus the header as well.
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
//do stuff here
}
Is there any way i can draw the view again, or even select which views I want to erase?
Just for future reference, this is what I did. Override dispatch draw, erase the given area and draw the child again with child.draw(canvas)
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
Paint p = new Paint();
p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawCircle((float) center.x, (float) center.y, headerSize / 2, p);
canvas.save();
canvas.translate(padding, padding);
getChildAt(0).draw(canvas);
canvas.restore();
}

onDraw method not drawing everything I put in to it

I have created a custom view class to use in a project I'm working on. To put is simply, I'm displaying an image, then adding images on top of the original image (currently by clicking on the image, but that's not final).
I have these 2 methods in my custom view:
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
for (Drawable d : drawableList)
{
d.draw(canvas);
}
}
public void AddPoint(float x, float y)
{
Drawable tempDrawable = pin;
tempDrawable.setBounds((int)x, (int)y, (int)x + 50, (int)y + 50);
drawableList.add(tempDrawable);
invalidate();
}
The AddPoint() method is called in an OnTouchListener and is passes the coordinates of the touch event.
The way it currently works is it displays the main image, but will only display the most recent images where I clicked, previous ones just disappear.
Does anybody know what I am doing wrong here?
I've figured out what I was doing wrong.
The line of code:
Drawable tempDrawable = pin;
I changed to:
Drawable tempDrawable = mainRes.getDrawable(R.drawable.pin);
I got mainRes from the init(Context context) method I wrote in the custom View class.

Custom Vertical Progressbar in Android

I need to achieve a custom vertical Progressbar like the one shown in the image below. It must have a circle at the beginning and an arrow at the end.
What would be the best way to achieve this? I'm not a design expert, so I don't know if it would be easier by using a 9png file or creating my own drawable class or another options.
I have tried with the following repo https://github.com/halzhang/Android-VerticalProgressBar, but this only rotates the ProgressBar, it cannot apply a custom view like I need.
Finally, I have created a custom view extending from View class and I've overriden onDraw method, drawing a Line, a Circle and a Triangle.
Check the following code:
#Override
protected synchronized void onDraw(Canvas canvas) {
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setColor(getResources().getColor(R.color.grey_300));
mPaint.setStrokeWidth(STROKE_WIDTH);
mPaint.setAntiAlias(true);
canvas.drawLine(centerX, MARGIN, centerX, getHeight() - MARGIN, mPaint);
canvas.drawCircle(centerX, MARGIN, STROKE_WIDTH, mPaint);
mPath.reset();
mPath.moveTo(0, STROKE_WIDTH * 2);
mPath.lineTo(-STROKE_WIDTH, 0);
mPath.lineTo(STROKE_WIDTH, 0);
mPath.close();
mPath.offset(centerX, getHeight() - TOP_BOTTOM_MARGIN - STROKE_WIDTH);
canvas.drawPath(mPath, mPaint);
}

canvas not redrawing correctly

I am writing a simple view that will show a dot, after some action, show the next dot. The dots are on a vertical strip. so I create a function that'll clear the strip. then draw a circle at the position where I want the dot. the code segment is as followed.
private void clear_strip(){
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
m_canvas.drawRect( 0, 0,width/8, height, paint);
paint.setColor(Color.GREEN);
}
private void set_dot(){
clear_strip();
m_canvas.drawCircle(width/10, (int) (font_height*(scoreboard.current_batter_position()+0.5))/1, font_height/4, paint);
}
#Override
protected void onDraw(Canvas canvas) {
set_dot();
canvas.drawBitmap(m_bitmap, 0, 0, paint);
}
but one of the dot is just not updating. It'll keep the old dot, skip that dot, then move to the next dot. I tried to print out the position to logcat right before the drawCircle call, and the position is right, it's just not drawing (and not clearing as well)....please advise.
You get a canvas to draw into passed into your onDraw method. But the point drawing code uses the canvas m_canvas. Pass the canvas as a parameter to your dot drawing code to fix that.

Categories

Resources