RelativeLayout container = (RelativeLayout) findViewById(R.id.sc);
I've then added my canvas class to this container, but my grid is in the top left corner, i.e there is big space below the grid and I would like to know how to center the grid. This is my code to draw the grid.
float testWidth = (getWidth() - 16f) / 9f;
float testHeight = (getHeight() - 16f) / 9f;
for (int i = 0; i < 9; i++) {
canvas.drawLine(testWidth* i, 0 , testWidth * i, testWidth* 8, dark);
canvas.drawLine(0, testWidth* i, testWidth* 8, testWidth* i, dark);
}
Do I use gravity/margin in the xml file?
Check if it works for you.
float testWidth = (getWidth() - 16f) / 9f;
float testHeight = (getHeight() - 16f) / 9f;
float size = Math.min(testWidth, testHeight);
float offsetW = (getWidth() - size*8) / 2;
float offsetH = (getHeight() - size*8) /2;
for (int i = 0; i < 9; i++) {
canvas.drawLine(offsetW + size*i,
offsetH,
offsetW + size*i,
offsetH + size*8,
dark);
canvas.drawLine(offsetW,
offsetH + size* i,
offsetW + size* 8,
offsetH + size* i,
dark);
}
The code is not tested. The idea is to provide horizontal and vertical offset to the grid.
Use gravity = "center" in the XML file of the PARENT view. In that case, all children of the view will be centered.
Related
I want to print numbers from 0 to 100 clockwise on canvas it will work when we have values from 0 to 12 but once i changed the values or increased the it is stopped working in my case can anyone help me here?
private int[] mClockHours = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12};
private void drawNumeral(Canvas canvas) {
mPaint.setTextSize(fontSize);
for (int number : mClockHours) {
String tmp = String.valueOf(number);
mPaint.getTextBounds(tmp, 0, tmp.length(), mRect);
double angle = Math.PI / 6 * (number - 2);
Log.d("drawNumeral", "number: "+number);
Log.d("drawNumeral", "Math.PI: "+Math.PI);
Log.d("drawNumeral", "angle: "+angle);
Log.d("drawNumeral", "temp: "+tmp);
int x = (int) (width / 2 + Math.cos(angle) * mRadius - mRect.width() / 2);
int y = (int) (height / 2 + Math.sin(angle) * mRadius - mRect.height() / 2);
canvas.drawText(tmp, x, y, mPaint);
}
}
You need to invalidate() the view to see changes you made. Here is a good tutorial to understand how to draw on canvas.
How to add values(interval text) on top discrete seekbar.
For example:- I want to add 0-9(interval value) on top of seekbar
Any help appreciated.
You could make a custom View, like
public class NumberedSeekBar extends AppCompatSeekBar {
and in overriden onDraw()
barBounds.left = getPaddingLeft();
barBounds.top = labelBackground.getHeight() + getPaddingTop();
barBounds.right = barBounds.left + viewWidth - getPaddingRight() - getPaddingLeft();
barBounds.bottom = barBounds.top + viewHeight - getPaddingBottom() - getPaddingTop();
progressPosX = barBounds.left + ((float) this.getProgress() / (float) this.getMax()) * barBounds.width();
labelPos.x = (int) progressPosX;
labelPos.y = getPaddingTop();
String labelText = this.getProgress() + "";
labelTextPaint.getTextBounds(labelText, 0, labelText.length(), labelTextRect);
canvas.drawText(labelText, (labelPos.x - pixelOffset) + labelBackground.getWidth() / 2 - labelTextRect.width() / 2, labelPos.y + labelBackground.getHeight() / 2 + labelTextRect.height() / 2, labelTextPaint);
Where barBounds is a Rect, made in Constructor, labelPos is a Point and labelTextPaint is some default Paint like
labelTextPaint = new Paint();
labelTextPaint.setColor(Color.WHITE);
labelTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
labelTextPaint.setAntiAlias(true);
labelTextPaint.setDither(true);
I am using http://www.codeproject.com/Articles/146145/Android-3D-Carousel code to create a vertical carousel view.i can see the vertical carousel using below changes in the code but center item is not properly placed in the screen and if the list items size increased, diameter moves upwards.
private void setUpChild(CarouselImageView child, int index, float angleOffset) {
// Ignore any layout parameters for child, use wrap content
addViewInLayout(child, -1 /*index*/, generateDefaultLayoutParams());
child.setSelected(index == mSelectedPosition);
int h;
int w;
if (mInLayout)
{
h = (getMeasuredHeight() - getPaddingBottom()-getPaddingTop())/3;
w = getMeasuredWidth() - getPaddingLeft() - getPaddingRight()/3;
}
else
{
h = (getMeasuredHeight() - getPaddingBottom()-getPaddingTop())/3;
w = getMeasuredWidth() - getPaddingLeft() - getPaddingRight()/3;
}
child.setCurrentAngle(angleOffset);
// modify the diameter.
Calculate3DPosition(child, w*(getAdapter().getCount()/4), angleOffset);
// Measure child
child.measure(w, h);
int childLeft;
// Position vertically based on gravity setting
int childTop = calculateTop(child, true);
childLeft = 0;
child.layout(childLeft, childTop, w, h);
}
change in calculate3position function as below
float x = (float) (-diameter/2 * Math.cos(angleOffset) * 0.00001);
float z = diameter/2 * (1.0f - (float)Math.cos(angleOffset));
float y = (float) (diameter/2 * Math.sin(angleOffset)) + diameter/2 - child.getWidth();
child.setX(x);
child.setZ(z);
child.setY(y);
I think that this calculation:
float x = (float) (-diameter/2 * Math.cos(angleOffset) * 0.00001);
float z = diameter/2 * (1.0f - (float)Math.cos(angleOffset));
float y = (float) (diameter/2 * Math.sin(angleOffset)) + diameter/2 - child.getWidth();
should be this:
float x = 0.0f
float z = diameter/2.0f * (1.0f - (float)Math.cos(angleOffset));
float y = (diameter/2.0f * Math.sin(angleOffset)) + diameter/2.0f - child.getHeight()/2.0f;
Your x position should always be zero, and your y position should be based on the sin, and should be offset by 1/2 of the height of the child instead of 1/2 of the width.
Hello try this code and replace with this code in your Calculate3DPosition method
angleOffset = angleOffset * (float) (Math.PI / 180.0f);
float y = (float) (((diameter * 60) / 100) * Math.sin(angleOffset)) + ((diameter * 50) / 100);
float z = diameter / 2 * (1.0f - (float) Math.cos(angleOffset));
float x = (float) (((diameter * 5) / 100) * Math.cos(angleOffset) * 0.3);
child.setItemX(x);
child.setItemZ((z * 30) / 100);
child.setItemY(-(y));
its solve my problem please try this one
I'm creating a grid for my game, but I want the size of the grid to vary, depending on the phone's dimensions. When I run the code (note: I removed a lot from ondraw, only concerned about lines atm), it seems like the size of the grid is the same on both my HTC Desire and Wildfire - Which makes the grid look perfect on the wildfire, but there is a massive space below the grid on the desire- prob cos the desire screen is bigger? What I'm asking is...
How do i make the grid scale to the phones dimensions - I want the grid to take up the majority of the phone's screen, but have a margin.Thanks
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
padding = 8;
for (int i = 0; i < 9; i++) {
canvas.drawLine(padding + testWidth* i, padding, padding
+ testWidth * i, testWidth* 8+padding, dark);
canvas.drawLine(padding, padding+testWidth* i, testWidth* 8
+ padding, padding+testWidth* i, dark);
}
}
}
public void onSizeChanged(int w, int h, int oldw, int oldh) {
testWidth= w / 9f;
testHeight = h / 9f;
border = w;
getRect(selX, selY, selRect);
super.onSizeChanged(w, h, oldw, oldh);
}
EDIT: I can now make a grid that scales to the phone's dimensions, however it is a rectangular grid. It looks kind of silly, I need a square one. Maybe I should make padding bigger if the screen is bigger?
This answer is supplementing Nicolas Brown's answer, but you might identify your problem a little better by introducing some more local variables. For example, your original loop could be replaced by:
padding = 8;
for (int i = 0; i < 9; i++) {
int xposition = padding + testWidth * i;
int yposition = padding + testHeight * i;
// Horizontal line
canvas.drawLine(padding, yposition, padding + testWidth * 8, yposition, dark);
// Vertical line
canvas.drawLine(xposition, padding, xposition, padding + testHeight * 8, dark);
}
Also, as Nicolas suggested, you are not accounting for the 8 pixel padding. So, in your onSizeChanged you want:
testWidth = (w - 16f) / 9f;
testHeight = (h - 16f) / 9f;
The problem is a typing error. Seems like you've copied and pasted testWidth and forgot to change it to. Try this:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
padding = 8;
for (int i = 0; i < 9; i++) {
canvas.drawLine(padding + testWidth* i, padding, padding
+ testWidth * i, testWidth* 8+padding, dark);
canvas.drawLine(padding, padding+testHeight* i, testHeight* 8
+ padding, padding+testHeight* i, dark);
}
}
Hi I'm trying to make a square 8x8 grid on a canvas. I've managed to make a grid, but it turns out to be rectangular, but for the game I'm making it needs to be square. How do I change my code to make it a square grid scaled to the phone.
float testWidth = (getWidth() - 16f) / 9f;
float testHeight = (getHeight() - 16f) / 9f;
for (int i = 0; i < 9; i++) {
canvas.drawLine(padding + testWidth* i, padding, padding
+ testWidth * i, testHeight* 8+padding, dark);
canvas.drawLine(padding, padding+testHeight* i, testWidth* 8
+ padding, padding+testHeight* i, dark);
}
EDIT: I can now make a square grid, but I don't know how to center the grid into the middle of the phone
You'll want to take the shortest of the two (Width or Height) and use that to build the grid upon. (So your grid can fit on the screen)
Something like...:
float gridSide = 0;
if (getWidth() > getHeight()) {
gridSide = getHeight();
}
else {
gridSide = getWidth();
}
Simpler logic provided by appsroxcom:
float gridSide = Math.min(testWidth(), testHeight());
Use gridSide as the total length and total width of the grid