The red Margin represents an AbsoluteLayout, I have and arbitrary number of 'Board' objects placed on the screen. All I want is to draw a line on the screen using the coordinates of the Board object and the center of the screen. Each board object is responsible to draw this line.
Also I want the line to be behind the Board objects I'm guessing I have to change the z-index, or maybe draw the line on the AbsoluteLayout?
I have something like this:
public class Board {
ImageView line; //Imageview to draw line on
Point displayCenter; //Coordinates to the center of the screen
int x;
int y;
Activity activity;
Board(Point p, Point c, Activity activity) // Point c is the coordinates of the Board object
{
x = c.x
y = c.y
displayCenter.x = p.x;
displayCenter.y = p.y;
this.activity = activity;
updateLine();
}
public void updateLine(){
int w=activity.getWindowManager().getDefaultDisplay().getWidth();
int h=activity.getWindowManager().getDefaultDisplay().getHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
line.setImageBitmap(bitmap);
Paint paint = new Paint();
paint.setColor(0xFF979797);
paint.setStrokeWidth(10);
int startx = this.x;
int starty = this.y;
int endx = displayCenter.x;
int endy = displayCenter.y;
canvas.drawLine(startx, starty, endx, endy, paint);
}
}
first af all,
you should never ever use the absolute layout, it is deprecated for a good reason.
With that said you have two options. For both options you need to implement your own Layout.
For option no. 1 you can override the dispatchDraw(final Canvas canvas) see below.
public class CustomLayout extends AbsoluteLayout {
...
#Override
protected void dispatchDraw(final Canvas canvas) {
// put your code to draw behind children here.
super.dispatchDraw(canvas);
// put your code to draw on top of children here.
}
...
}
Option no. 2 If you like the drawing to occur in the onDraw me you need to set setWillNotDraw(false); since by default the onDraw method on ViewGroups won't be called.
public class CustomLayout extends AbsoluteLayout {
public CustomLayout(final Context context) {
super(context);
setWillNotDraw(false);
}
...
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
// put your code to draw behind children here.
}
}
Related
I have to draw circle on screen and get interaction to it by OnTouch method. Kindly help me out. Here is the code that I have tried. Here the problem is that It does not intract with user interaction but this code successfully draw the circle
public class DrawingView extends View implements OnTouchListener {
static int x, y, r = 255, g = 255, b = 255;
final static int radius = 30;
Paint paint; // using this ,we can draw on canvas
public DrawingView(Context context) {
super(context);
paint = new Paint();
paint.setAntiAlias(true); // for smooth rendering
paint.setARGB(255, r, g, b); // setting the paint color
// to make it focusable so that it will receive touch events properly
setFocusable(true);
// adding touch listener to this view
this.setOnTouchListener(this);
}
// overriding the View's onDraw(..) method
public void onDraw(Canvas canvas) {
paint.setARGB(255, r, g, b);
super.onDraw(canvas);
// drawing the circle
canvas.drawCircle(x, y, radius, paint);
randColor(); // calls this method to generate a color before drawing
invalidate(); // calls onDraw method
}
// this is the interface method of "OnTouchListener"
public boolean onTouch(View view, MotionEvent event) {
x = (int) event.getX() - (radius / 2); // some math logic to plot the
// circle in exact touch place
y = (int) event.getY() - (radius / 2);
// System.out.println("X,Y:"+"x"+","+y); //see this output in "LogCat"
randColor(); // calls this method to generate a color before drawing
invalidate(); // calls onDraw method
return true;
}
// this method sets a random color using Math.random()
// Note: RGB color values ranges from 0 to 255..
public void randColor() {
r = (int) (Math.random() * 255);
g = (int) (Math.random() * 255);
b = (int) (Math.random() * 255);
// Toast.makeText(c, "r,g,b="+r+","+g+","+b,Toast.LENGTH_SHORT).show();
}
}
But the problem is that, it does not get user interaction
Simply use this to draw circle
public class Circle extends View {
private final float x;
private final float y;
private final int r;
private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
public Circle(Context context, float x, float y, int r) {
super(context);
mPaint.setColor(0xFFFF0000);
this.x = x;
this.y = y;
this.r = r;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, r, mPaint);
}
For Interaction MainActivity class is here
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.circle);
FrameLayout main = (FrameLayout) findViewById(R.id.main_view);
main.addView(new Circle(this, 50, 50, 25));
main.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent e) {
float x = e.getX();
float y = e.getY();
FrameLayout flView = (FrameLayout) v;
flView.addView(new Circle(flView.getContext(), x, y, 5));
return true;
}
});
}
At least a couple problems:
You've not actually tested wether the touch x/y fall inside the radius of the circle. You need an if clause. invalidate() now gets called with every touch.
The order of events is wrong and some operations are called too many times. Just this inside ondDraw should work:
super.onDraw(canvas);
paint.setARGB(255, r, g, b); // (and you don't need this in the method above)
canvas.drawCircle(x, y, radius, paint);
remove the invalidate() in onDraw() method, and get random color in onTouch().
you want different color in every touch action, place in touch(), or based touch down want to change the color then check the action from the event.getAction()==MotionEvent.ACTION_DOWN.
remove the invalidate() in onDraw() method because when you are invalidating in onDraw() it will call onDraw Recursivly, and get random color in onTouch().
you want different color in every touch action, place the random color method in onTouch(), or based touch down want to change the color then check the action from the event.getAction()==MotionEvent.ACTION_DOWN.
I want to move a bitmap image along consecutive coordinates in SurfaceView. I have a bitmap myBall drawn in the coordinate (x1, y1) on a SurfaceView as follows (partial code)(
public class MainSurfaceView extends SurfaceView implements Runnable {...
...
#Override
public void run() {
while (isRunning) {
if (!myHolder.getSurface().isValid())
continue;
Canvas canvas;// Define canvas to paint on it
canvas = myHolder.lockCanvas();
//Draw full screen rectangle to hold the floor map.
Rect dest = new Rect(0, 0, getWidth(), getHeight());
Paint paint = new Paint();
paint.setFilterBitmap(true);
canvas.drawBitmap(bgImage, null, dest, paint);
//This is the ball I want to move
canvas.drawBitmap(myBall, x1, y1, null);
myHolder.unlockCanvasAndPost(canvas);
}
}
Now I want to move it to (x2, y2) then (x3, y3) and ... as many as needed and one after the other. I have tried to use TranslateAnimation but couldn't do it.
I have figured out how to animate using a coordinates. I will explain what I did hopping that it will be helpful to others:
First I saved the coordinates as Point object
List<Point> point_list = new ArrayList<Point>();
point_list.add(new Point(x_value, y_value));//Add the x and y coordinates to the Point\
Leave implementing Runnable and use onDraw() method instead of run() method as follows:
public class MainSurfaceView extends SurfaceView {...
....
#Override
protected void onDraw(Canvas canvas) {
// Draw full screen rectangle to hold the floor map.
Rect fArea = new Rect(0, 0, getWidth(), getHeight());
Paint paint = new Paint();
paint.setFilterBitmap(true);
// draw the paint on the rectangle with the floor map
canvas.drawBitmap(bgImage, null, fArea, paint);
// Get the coordinates of x & y as Point object
List<Point> myPoints = point_list;
// Start printing myBall on the floor (view)
try {
if (index < myPoints.size()) {
// Increment the value of index and use it as index for the point_list
index++;
}
// Print myBall in each coordinates of x & y using the index
canvas.drawBitmap(myBall, myPoints.get(index).x, myPoints.get(index).y, null);
} catch (IndexOutOfBoundsException e) {
// TODO: handle exception
}
}
I use try and catch to avoid IndexOutOfBoundryExeption
Cheers!
I think this might be what you're after. What you're trying to do is tween the bitmap and there are a few ways you can do that. There is also the ViewPropertyAnimator, which can animate an entire view.
I have a class derived from ImageView:
public class TouchView extends ImageView
{
#Override
protected void onDraw(Canvas canvas)
...
The touchview is created only once in the activity's onCreate and populated with a drawable from a SVG file.
ImageView imageView = new TouchView(this);
imageView.setScaleType(ImageView.ScaleType.MATRIX);
FrameLayout f = (FrameLayout)findViewById(R.id.frame2);
FrameLayout.LayoutParams l = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, FrameLayout.LayoutParams.FILL_PARENT);
f.addView(imageView, l);
...
is = openFileInput(svgname);
svg = SVGParser.getSVGFromInputStream(is);
is.close();
Drawable d = svg.createPictureDrawable();
imageView.setImageDrawable(d);
All the environment remains the same all the time. Yet in the onDraw method I'm getting canvas with different sizes between the events. That is the code:
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Log.v("DRAW", " w= " + canvas.getWidth() + " h=" + canvas.getHeight());
...
}
produces logs with lines, where width and height of the canvas change back and forth from normal 1024*728 (this is the correct view dimension on the tablet) to 200*160 (strange thing introducing bugs in my drawings). I'm embarrassed.
Should the canvas be always of the same size for the same view/drawable? The documentation says that getWidth and getHeight methods return dimensions of the current drawing layer, but it's not clear what is the layer, how many of them is created for the canvas "behind the scene" and how to control this process.
I'd appreciate any explanation on how to get consistent drawing behaviuor, specifically by getting actual size of the view being painted in onDraw.
Currently I'm using a workround with a call to the view's getDrawingRect, but I'm not sure it is a proper way, because it seems that the canvas parameter of onDraw should be all-sufficient for drawing sizing.
I had the same issue, here is how I got this fixed, hope it helps you
protected void onDraw(Canvas c) {
super.onDraw(c);
int w = getWidth(), h = getHeight();
// resize
Matrix resize = new Matrix();
resize.postScale((float)Math.min(w, h) / (float)mMarker.getWidth(), (float)Math.min(w, h) / (float)mMarker.getHeight());
imageScaled = Bitmap.createBitmap(mMarker, 0, 0, mMarker.getWidth(), mMarker.getHeight(), resize, false);
c.drawBitmap(imageScaled, 0,0, paint);
}
Where mMarker is defined in the custom ImageView constructor.
...
private Bitmap mMarker, imageScaled;
Paint paint = new Paint();
//Java constructor
public AvatarImageView(Context context) {
super(context);
init();
}
//XML constructor
public AvatarImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// load the image only once
mMarker = BitmapFactory.decodeResource(getResources(), R.drawable.silhouette_48);
mMarker.setHasAlpha(true);paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);
//invalidate(); // don't know if I need this
}
I think I'm a bit confused about how to use custom views. I'm following along with slides from a talk given by Eric Burke from Square (from this year's anddevcon, slides here: http://www.andevcon.com/AndevCon_II/downloadpresentation.aspx?aid=Taming_Android__User_Experience_Lessons_from_Square_pdf.zip&sid=2).
His code, or at least the part he showed in the slides, went something like this:
public class EditablePhoto extends View {
private Bitmap framedPhoto;
private Bitmap image;
private Drawable placeholder;
public EditablePhoto(Context context) {
super(context);
}
#Override protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
int measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
//ensure view always square
int min = Math.min(measuredHeight, measuredWidth);
setMeasuredDimension(min, min);
}
#Override
protected void onDraw(Canvas canvas) {
if(placeholder == null && image==null) return;
if(framedPhoto == null) {
createFramedPhoto(Math.min(getWidth(), getHeight()));
}
canvas.drawBitmap(framedPhoto, 0, 0, null);
}
private void createFramedPhoto(int size) {
Drawable imageDrawable = (image!=null)
? new BitmapDrawable(image) : placeholder;
Bitmap output = Bitmap.createBitmap(size, size,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
RectF outerRect = new RectF(0, 0, size, size);
float outerRadius = size / 18f;
//Red rectangle
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawRoundRect(outerRect, outerRadius, outerRadius, paint);
paint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.SRC_IN));
imageDrawable.setBounds(0, 0, size, size);
canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
imageDrawable.draw(canvas);
canvas.restore();
}
}
What I don't get is how to actually use this View now.... Where and when do you set the bitmaps, which are private fields in this class...?
Generally confused and would love some enlightenment.
More than one year passed, but I hope this will help anyone who looking for the right answer. In my case, I putted this line of code
framedPhoto = output;
as the last one in createFramedPhoto() method. It works.
In the example, the author created a rounded rectangle as background then he draw the bitmap on it with XOR mode, so all pixel outside the rounded rectangle will be trim off.
OnDraw() is the method where you will Draw your view on canvas. here too you can analyze onDraw() will fisrt call CreateFramePhoto then draw this Bitmap on canvas .
You can add this customView in layout Either from xml or in Java Class
1) Through Xml :
<EditablePhoto android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
..........................
/>
dont forgate to add constructor EditablePhoto(Context context, AttributeSet attributeSet) for this case
2) through Java class :
EditablePhoto editablePhoto = new EditablePhoto(this);
addView(editablePhoto) // or do anthing you want with this
I'm stuck on a simple problem which is driving me nuts. In the standard Android MapView overlay images have a shadow drawn for them automatically when you call the drawAt method. I want to recreate the same shadow effect, but I'm not sure how to make the shadow version of the image (which is drawn separately from the main image) align properly with the main image.
private static class SampleView extends View {
private Drawable mDrawable;
private int mMarkerXOffset;
private int mMarkerYOffset;
public SampleView(Context context) {
super(context);
mDrawable = context.getResources().getDrawable(R.drawable.icon);
mDrawable.setBounds(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight());
mMarkerXOffset = (mDrawable.getIntrinsicWidth() / 2);
mMarkerYOffset = mDrawable.getIntrinsicHeight();
}
private void DrawNormalImg(Canvas canvas, int nX, int nY) {
canvas.save(Canvas.MATRIX_SAVE_FLAG);
canvas.translate(nX, nY);
mDrawable.draw(canvas);
canvas.restore();
}
private void DrawShadowImg(Canvas canvas, int nX, int nY) {
canvas.save(Canvas.MATRIX_SAVE_FLAG);
mDrawable.setColorFilter(0x7f000000, PorterDuff.Mode.SRC_IN);
canvas.translate(nX,nY);
canvas.skew(-0.9F, 0.0F);
canvas.scale(1.0F, 0.5F);
mDrawable.draw(canvas);
mDrawable.clearColorFilter();
canvas.restore();
}
#Override protected void onDraw(Canvas canvas) {
int nX = 100;
int nY = 50;
canvas.drawColor(Color.WHITE);
DrawShadowImg(canvas, nX, nY);
DrawNormalImg(canvas, nX, nY);
}
Nice question! I think the solution will be skew the image as a parallelogram. Consider an image of a map pin that looks something like this:
..X..
.XXX.
..X..
..|..
..|..
..|..
Where . is transparency. You would want to skew the image like this for the shadow:
..X..
.XXX.
..X..
..|..
..|..
..|..
Notice the top and bottom are the same width as in the original image.