Develop Reference

Placing bitmap at various points around a circle results in the bitmap being different distances away from center

I want to place a small triangular bitmap centered on the dotted circle as similar to as follows:
Here is my code that places the bitmap according to a specified angle:
x = (float) (center.x + radius* Math.cos(Math.toRadians(getRotationAngle())));
y = (float) (center.y + radius * Math.sin(Math.toRadians(getRotationAngle())));
canvas.drawBitmap(mCurrentTimeIndicatorBitmap, x, y, new Paint(Paint.FILTER_BITMAP_FLAG));
getRotationAngle() returns a value between 0 and 360 (inclusive). center.x, center.y are a constant 500 and radius is a constant 313.3. However, as I rotate around the circle, the bitmap's distance to the dotted line varies and I do not know why. The above picture is with rotation angle at 0, where it is farthest from the center.
Near rotation angle 90:
Near rotation angle 180, where it is the furthest from the dotted line & closest to the center:
Near rotation angle 270:
As you can see the triangle is various distances away from the dotted line. What is causing this? My code to draw the dotted lines is very similar but no issue occurs there.

When you draw bitmap, you are using left top corner as base point. So this corner walks around the circle exactly. But bitmap center moves along the circle that is shifted to right and bottom.
Just subtract half-size of bitmap to get corner coordinates at every step (or shift center coordinates)
x = (float) (center.x - mCurrentTimeIndicatorBitmap.width / 2 +
radius* Math.cos(Math.toRadians(getRotationAngle())));
y = (float) (center.y - mCurrentTimeIndicatorBitmap.height / 2 +
radius * Math.sin(Math.toRadians(getRotationAngle())));
canvas.drawBitmap(mCurrentTimeIndicatorBitmap, x, y, new Paint(Paint.FILTER_BITMAP_FLAG));

how to find the biggest possible Y point given X in Region in Android?

I have a virtual ruler being drawn on the screen. I want to be able to draw a straight line like the blue line above when touch event happen within the grown rectangle. but because touch can't be 100% straight, the movement might be like the red line. that's why I set a rectangle to listen to all the nearby touch events then draw a blue line.
I currently have
mRulerRect.set(mRulerCenter.x - mRulerBitmap.getWidth() / 2,
mRulerCenter.y - mRulerBitmap.getHeight()),
mRulerCenter.x + mRulerBitmap.getWidth() / 2,
mRulerCenter.y);
mPath.addRect(mRulerRect, Path.Direction.CCW);
mRulerMatrix.setRotate(mRulerAngle, mRulerCenter.x, mRulerCenter.y);
mPath.transform(mRulerMatrix);
mRegions.setPath(mPath, new Region(mRulerRect));
then I check if the touch even happen within brown rectangle by mRegions.contains(x,y). works perfect so far for touch detection, but the problem I have now is how to draw a straight line. I tried to fix X point then calculate Y. it works fine when ruler is horizontal then starts to behave very weird when turning from horizontal to vertical. I'm out of idea how to accomplish this. Please help! thank you.

Things that you know:
The center of that brown rect is mRulerCenter.x, mRulerCenter.y
The line that you want to draw pass through that point
The angle of the line is mRulerAngle
We're missing just one element, which is, the length of the line we want to draw. That's probably going to be a portion of the ruler's width and it should be very easy to compute mRulerRect.width() * someFactor
Now, we want to know what are the start and the end of the line, we can compute that with trigonometry functions
float halfLineLength = mRulerRect.width() * someFactor;
float startAngle = (float) Math.toRadians(mRulerAngle);
float endAngle = (float) Math.toRadians(mRulerAngle + 180);
float startX = mRulerCenter.x + (float) Math.cos(startAngle) * halfLineLength;
float startY = mRulerCenter.y + (float) Math.sin(startAngle) * halfLineLength;
float endX = mRulerCenter.x + (float) Math.cos(endAngle) * halfLineLength;
float endY = mRulerCenter.y + (float) Math.sin(endAngle) * halfLineLength;
and then draw your line from (startX, startY) to (endX, endY), actually doesn't really matter which is start and which is end

Problems Finding Center of Android Wear Watchface

I have looked all over, but nothing has worked. Every time I try finding the center of the screen for my watch face, it always end up slightly higher than the center, and to the far right of the screen (This is different than the problem that the original template from Android Studio has, where the Watch face is slightly up and all the way to the far left of the screen). What could I be doing wrong?
(First screenshot on Left: My problem. Second screenshot: Original form of the Android Wear template from Android Studio)
#Override
public void onDraw(Canvas canvas, Rect bounds) {
if (isInAmbientMode()) {canvas.drawColor(Color.BLACK);
}
else {
canvas.drawRect(0, 0, bounds.width(), bounds.height(), mBackgroundPaint);
}
// Draw H:MM in ambient mode or H:MM:SS in interactive mode.
long now = System.currentTimeMillis();
mCalendar.setTimeInMillis(now);
int width = bounds.width();
int height = bounds.height();
float centerX = width / 2f;
float centerY = height / 2f;
String text = mAmbient
? String.format("%d:%02d", mCalendar.get(Calendar.HOUR),
mCalendar.get(Calendar.MINUTE))
: String.format("%d:%02d", mCalendar.get(Calendar.HOUR),
mCalendar.get(Calendar.MINUTE));
canvas.drawText(text, centerX, centerY, mTextPaint);
}
Full code can be found here

As far as i can tell from a quick look on your sources you already calculate mTextXOffset and mTextYOffset but don't use it for your draw call, hence the texts origin is centered in your problematic screenshot instead of the texts center.
adjusting your centerX and centerY by mTextXOffset and mTextYOffset should do the trick.

If you're drawing text using a center point you can use
mTextPaint.setTextAlign(Paint.Align.CENTER);
which will draw from the center. Otherwise the x coordinte represents the left hand side of the text you are drawing.

cropping the top of an image on the boundary of a circle

I am new to Android development and I need to create this layout.
Any suggestion on how to do the cropping of the top part of the image with the circle would be greatly appreciated.
Thank you!
Edit:
This not the same as the suggested duplicate as they are cropping the entire image into a circle and I only need the top part.

This almost a duplicate of the linked question, so you can start from its answer to do what you want.
The relevant part to update is
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
bitmap.getWidth() / 2, paint);
If you read [the doc](http://developer.android.com/reference/android/graphics/Canvas.html#drawCircle(float, float, float, android.graphics.Paint)) of this method, you see that
the first param is the x coordinate of the center of the circle
the second param is the y coordinate of the center of the circle
the first coordinate is the radius of the circle
In the question above, the circle is drawn from the center of the bitmap. In your case, you want the center to be at e.g. 3/4 from the top.
Try this code instead
canvas.drawCircle(bitmap.getWidth() / 2, (bitmap.getHeight() / 4) * 3,
bitmap.getWidth() / 2, paint);
and let us know.

Android Graphics Path() disappearing

I'm drawing a custom shape using the path method, but it performs differently than is displayed.
As displayed in the Layout:
On the device:
This only happens when the angle at the left vertex becomes too small. If I widened the shape, such that it became a regular diamond, the entire shape appears (regardless of size).
Here's the code:
final Path p = new Path();
p.moveTo(x, y);
p.lineTo(x - height / 16, y - 20);
p.lineTo(x - width / 3, y);
p.lineTo(x - height / 16, y + 20);
p.close();
canvas.drawPath(p, mThumbColorPaint);
Can anyone enlighten me?