I am creating a custom control as below in the image. It is a semicircle with places 1, 2 etc.
When user click on one place (1, 2 etc), it changes color (for example user click on place 3, image 2).
I try to use canvas and methods draws. But I don't think that is correct. Can you help me with a better solution and how to set up an event for user clicking on the place?
You can do it with the canvas, bellow is a small example of a View with 2 oval shapes that change color(to red) on a touch event:
class ExtraView extends View {
private boolean flag1, flag2;
private Paint p1, p2;
private RectF oval1, oval2;
public ExtraView(Context context) {
super(context);
flag1 = false;
flag2 = false;
// bigger oval paint
oval1 = new RectF(50, 50, 460, 360);
p1 = new Paint();
p1.setStrokeWidth(2.0f);
// smaller oval paint
oval2 = new RectF(140, 140, 360, 260);
p2 = new Paint();
p2.setStrokeWidth(2.0f);
}
#Override
public void draw(Canvas canvas) {
canvas.drawColor(Color.GREEN);
// bigger oval
if (flag1) {
p1.setColor(Color.RED);
} else {
p1.setColor(Color.WHITE);
}
p1.setStyle(Paint.Style.FILL);
canvas.drawOval(oval1, p1);
p1.setColor(Color.BLACK);
p1.setStyle(Paint.Style.STROKE);
canvas.drawOval(oval1, p1);
// smaller oval
if (flag2) {
p2.setColor(Color.RED);
} else {
p2.setColor(Color.WHITE);
}
p2.setStyle(Paint.Style.FILL);
canvas.drawOval(oval2, p2);
p2.setColor(Color.BLACK);
p2.setStyle(Paint.Style.STROKE);
canvas.drawOval(oval2, p2);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (oval2.contains(event.getX(), event.getY())) {
flag2 = !flag2;
invalidate();
} else if (oval1.contains(event.getX(), event.getY())) {
flag1 = !flag1;
invalidate();
}
}
return true;
}
}
Related
I wanna to do line number for children app
The line should look like the following
I think to use seekbar but I found it not possible as a range, not static also need to do an action when the user touches each number. so I ask for help or suggestion.
also has to do functionality of drawing an arc
the arc has to be drawn dynamically while the user moves his finger on numbers
also draw a rectangle when touching any number.
I'd like to ask for any advice or help in implementing something like that.
edit1: the line used to solve an equation as in the third image
You can use Custom View (Custom Drawing) which can help you in drawing the shaps check the link hope it helpscustom-views android-developers
There's probably a much better way to do this but here's what I came up with, hope its enough to point you in the right direction:
Activity:
public class DrawActivity extends AppCompatActivity {
float startPointX = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_draw);
MyDrawable drawing = new MyDrawable(this);
setContentView(drawing);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
MyDrawable drawing = new MyDrawable(this);
if (event.getY() > 1000) { // Click below line to reset
startPointX = 0;
} else if (startPointX == 0) { // Draw rectangle
startPointX = event.getX();
drawing = new MyDrawable(this, startPointX);
} else if (startPointX > 0) { // Draw arc
drawing = new MyDrawable(this, startPointX, event.getX());
}
setContentView(drawing);
return true;
}
}
Drawable:
public class MyDrawable extends View {
private Canvas mCanvas;
private Paint mRedPaint;
private Paint mGreenPaint;
private Paint mBluePaint;
float baseLine = 500;
float rectangleX;
float arcEnd;
public MyDrawable(Context context) {
super(context);
}
public MyDrawable(Context context, float startPoint) {
super(context);
rectangleX = startPoint;
}
public MyDrawable(Context context, float startPoint, float endPoint) {
super(context);
rectangleX = startPoint;
arcEnd = endPoint;
}
#Override
public void onDraw(Canvas canvas) {
mCanvas = canvas;
int width = 1000;
setupPaint();
canvas.drawLine(50, baseLine, width, baseLine, mBluePaint);
int mark = 50;
while(mark < width) {
canvas.drawLine(mark, baseLine-50, mark, baseLine+50, mGreenPaint);
mark += (width /10);
}
drawRectangle();
drawArc();
}
private void setupPaint() {
mRedPaint = new Paint();
mRedPaint.setARGB(255, 180, 0, 0);
mRedPaint.setStyle(Paint.Style.STROKE);
mRedPaint.setStrokeWidth(15);
mGreenPaint = new Paint();
mGreenPaint.setARGB(255, 0, 180, 0);
mGreenPaint.setStrokeWidth(15);
mBluePaint = new Paint();
mBluePaint.setARGB(255, 0, 0, 180);
mBluePaint.setStrokeWidth(30);
}
public void drawRectangle() {
if ( rectangleX > 0) {
mCanvas.drawRect(rectangleX - 25, baseLine-50, rectangleX + 25, baseLine+50, mRedPaint);
}
}
public void drawArc() {
if (arcEnd != 0 && arcEnd < rectangleX) {
mCanvas.drawArc(arcEnd, baseLine-200, rectangleX, baseLine, 0, -180, false, mRedPaint);
} else if (arcEnd != 0 && arcEnd > rectangleX) {
mCanvas.drawArc(rectangleX, baseLine-200, arcEnd, baseLine, 0, -180, false, mRedPaint);
}
}
}
I have the following app which allows a circle to be drawn on touch. When the screen is touched a second time the first touch circle is removed and a new circle is created where the second touch occurs. How can allow multiple circles to appear for as many times the screen is touched?(i.e. 5 touch events = 5 circles appear on the same canvas in their touch locations).
public class Lab12Activity extends Activity {
Point pt = new Point();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new DrawView(this));
}
class DrawView extends View implements View.OnTouchListener {
public DrawView(Context context) {
super(context);
this.setOnTouchListener(this);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.GRAY);
Paint paint = new Paint();
paint.setColor(Color.WHITE);
canvas.drawCircle(pt.x, pt.y, 15, paint);
paint.setColor(Color.BLUE);
canvas.drawRect(0, 0, 225, 150, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(1);
paint.setColor(Color.WHITE);
paint.setTextSize(30);
canvas.drawText("Clear", 75, 75, paint);
canvas .drawText("Tap to add Circles", 300, 75, paint);
}
public boolean onTouch(View view, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
pt.x = (int) event.getX();
pt.y = (int) event.getY();
invalidate();
}
return true;
}
}
}
use event.getActionIndex (); it returns the pointer index of the touch event.
I am trying to implement a Drawing Application in Android. Where the user should be able to select and move the drawn shapes.
Currently i have statically drawn some rects and text on my Drawing Canvas:
View mDrawingCanvas = new View(mContext)
{
ShapeDrawable rectangle;
#Override
public boolean isFocused() {
// TODO Auto-generated method stub
Log.d(TAG, "View's On focused is called !");
return super.isFocused();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return super.onTouchEvent(event);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
// Work out current total scale factor
// from source to view
final float scale = mSourceScale*(float)getWidth()/(float)mSize.x;
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
//Custom View
rectangle = new ShapeDrawable(new RectShape());
rectangle.getPaint().setColor(Color.GRAY);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
rectangle.setBounds((int)(50*scale), (int)(30*scale), (int)(200*scale), (int)(150*scale));
rectangle.draw(canvas);
rectangle.getPaint().setColor(Color.BLUE);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
rectangle.setBounds((int)(200*scale), (int)(200*scale), (int)(400*scale), (int)(350*scale));
rectangle.draw(canvas);
}
};
I want to select (draw borders on the selected shape) and move the drawn Shapes in onTouch events of the drawing canvas.
Can some one please guide me about this, any help is Highly Appreciated.
This answer has demonstrated the Shape Moving Methodology that i was looking for.
And my problem is solved now. The Link is :
Drag and move a circle drawn on canvas
You should save the X and Y positions in the touch event and use them when drawing your shapes.
Below is a very basic example of how to do this, but you need to improve it (check if the touch is inside the object and only change values for that object)
Example:
public class DrawTest extends View {
private static final String TAG = "Desenho";
private ShapeDrawable rectangle;
private Paint paint;
private float currX, currY;
private Rect blue, gray;
public DrawTest(Context context) {
super(context);
currX = 1;
currY = 1;
gray = new Rect(50,30,200,150);
blue = new Rect(200,200,400,350);
paint = new Paint();
rectangle = new ShapeDrawable(new RectShape());
}
#Override
public boolean isFocused() {
Log.d(TAG, "View's On focused is called !");
return super.isFocused();
}
#Override
public boolean onTouchEvent(MotionEvent event) {
currX = event.getX();
currY = event.getY();
invalidate();
Log.d(TAG, "View's On touch is called! X= "+currX + ", Y= "+currY);
return super.onTouchEvent(event);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
//Custom View
rectangle.getPaint().setColor(Color.GRAY);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
gray.set((int)(50+currX), (int)(30+currY), (int)(200+currX), (int)(150+currY));
rectangle.setBounds(gray);
gray = rectangle.getBounds();
rectangle.draw(canvas);
rectangle.getPaint().setColor(Color.BLUE);
rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
rectangle.getPaint().setStrokeWidth(3);
blue.set((int)(200+currX), (int)(200+currY), (int)(400+currX), (int)(350+currY));
rectangle.setBounds(blue);
blue = rectangle.getBounds();
rectangle.draw(canvas);
}
}
In my app Draw paint in free hand on Map view but searching lot of information finally got from rectangle shape draw on mapview but i want in place of rectangle draw free hand like zigzag how to change my code Any help please..
MapOverlay.java
public class MapOverlay extends Overlay {
private float x1,y1,x2,y2;
private GeoPoint p1=null,p2=null;
private MapExampleActivity mv = null;
private Paint paint = new Paint();
private Path path = new Path();
private boolean isUp = false;
//constructor receiving the initial point
public MapOverlay(MapExampleActivity mapV,float x,float y){
paint.setStrokeWidth(2.0f);
x1 = x;
y1 = y;
mv = mapV;
p1 = mapV.getMapView().getProjection().fromPixels((int)x1,(int)y1);
}
//override draw method to add our custom drawings
#Override
public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when) {
if(p1 != null && p2 != null){
//get the 2 geopoints defining the area and transform them to pixels
//this way if we move or zoom the map rectangle will follow accordingly
Point screenPts1 = new Point();
mapView.getProjection().toPixels(p1, screenPts1);
Point screenPts2 = new Point();
mapView.getProjection().toPixels(p2, screenPts2);
//draw inner rectangle
paint.setColor(Color.BLUE);
// paint.setStyle(Style.FILL);
canvas.drawPath(path, paint);
canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
//draw outline rectangle
// paint.setColor(Color.YELLOW);
paint.setStyle(Style.STROKE);
// canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
canvas.drawPath(path, paint);
}
return true;
}
#Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
if(mv.isEditMode() && !isUp){
if(e.getAction() == MotionEvent.ACTION_DOWN){
x1 = y1 = 0;
x1 = e.getX();
y1 = e.getY();
p1 = mapView.getProjection().fromPixels((int)x1,(int)y1);
}
//here we constantly change geopoint p2 as we move out finger
if(e.getAction() == MotionEvent.ACTION_MOVE){
x2 = e.getX();
y2 = e.getY();
p2 = mapView.getProjection().fromPixels((int)x2,(int)y2);
}
//---when user lifts his finger---
if (e.getAction() == MotionEvent.ACTION_UP) {
isUp = true;
}
return true;
}
return false;
}
}
using this i able to draw like this rectangle shapes and draw up to again you click the toggle button(possible to draw multiple times)
i want draw lines instead of rectangle like below image(draw multiple times).
finally i found this link this link provide rectangle shape draw http://n3vrax.wordpress.com/2011/08/13/drawing-overlays-on-android-map-view/
just change rectangle to free draw any idea please....
You can free hand draw a line using the code bellow:
Code
public class HandDrawOverlay extends Overlay {
private boolean editMode = false;
private boolean isTouched = false;
private Paint paint = new Paint();
private Point screenPt1 = new Point();
private Point screenPt2 = new Point();
private ArrayList<GeoPoint> points = null;
public HandDrawOverlay(){
paint.setStrokeWidth(2.0f);
paint.setStyle(Style.STROKE);
paint.setColor(Color.BLUE);
}
#Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
if(points != null && points.size() > 1){
mapView.getProjection().toPixels(points.get(0), screenPt1);
for(int i=1; i<points.size();i++){
mapView.getProjection().toPixels(points.get(i), screenPt2);
canvas.drawLine(screenPt1.x, screenPt1.y, screenPt2.x, screenPt2.y, paint);
screenPt1.set(screenPt2.x, screenPt2.y);
}
}
}
#Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
if(editMode){
int x = (int)e.getX();
int y = (int)e.getY();
GeoPoint geoP = mapView.getProjection().fromPixels(x,y);
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
isTouched = true;
points = new ArrayList<GeoPoint>();
points.add(geoP);
break;
case MotionEvent.ACTION_MOVE:
if(isTouched)
points.add(geoP);
break;
case MotionEvent.ACTION_UP:
if(isTouched)
points.add(geoP);
isTouched = false;
break;
}
mapView.invalidate();
return true;
}
return false;
}
/**
* #return the editMode
*/
public boolean isEditMode() {
return editMode;
}
/**
* #param editMode the editMode to set
*/
public void setEditMode(boolean editMode) {
this.editMode = editMode;
}
}
to use
HandDrawOverlay handDrawOverlay;
handDrawOverlay = new HandDrawOverlay();
mapView.getOverlays().add(handDrawOverlay);
//Set edit mode to true to start drwaing
handDrawOverlay.setEditMode(true);
//Set edit mode to true to stop drwaing
handDrawOverlay.setEditMode(false);
Note
This is a full functioning example to help you starting. However, you should optimize the code to make it more efficient (i.e. using Path to store the drawing path in onDraw(), reducing the number of points recorded in onTouch(), etc.).
Enjoy it.
I'm trying to add my own drawable and use it in a series of overlays on a MapView. The drawable is basically a rounded box with a black outline and a number in the middle.
I have managed to achieve this using the code below, however there is what looks like a flag to the left of my box, which I certainly don't think I have drawn - so I'm wondering what it can be.
This is an example of the image:
Edit - this is what happens if a circle is drawn:
My code is below:
Custom Drawable:
public class BikeDrawable extends Drawable {
int colour;
String bikes;
public BikeDrawable (int bikes){
this.bikes = Integer.toString(bikes);
if (bikes < 4) {
colour = Color.RED;
}
else if (bikes > 3 && bikes < 9){
colour = Color.argb(244, 255, 127, 42);
}
else {
colour = Color.GREEN;
}
}
#Override
public void draw(Canvas canvas) {
Paint rectanglePaint = new Paint();
rectanglePaint.setColor(colour);
rectanglePaint.setStyle(Style.FILL);
RectF rectangle = new RectF(0.0f, 0.0f, 20.0f, 20.0f);
Paint strokepaint = new Paint();
strokepaint.setStyle(Paint.Style.STROKE);
strokepaint.setStrokeWidth(2);
strokepaint.setARGB(255, 0, 0, 0);
canvas.drawRoundRect(rectangle, 4.0f, 4.0f, rectanglePaint);
canvas.drawRoundRect(rectangle, 4.0f, 4.0f, strokepaint);
Paint textpaint = new Paint();
textpaint.setARGB(255, 0, 0, 0);
textpaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(bikes, 10, 14, textpaint);
}
#Override
public int getOpacity() {
return 0;
}
#Override
public void setAlpha(int alpha) {
}
#Override
public void setColorFilter(ColorFilter cf) {
}
}
Use in MapView:
bikeOverlay = new PointsOverlay(start_icon);
BikeDrawable start_1_drawable = new BikeDrawable (start_1.capacity);
OverlayItem start_1_overlayitem = new OverlayItem(new GeoPoint(start_1.lat,start_1.lon), null, null);
start_1_overlayitem.setMarker(start_1_drawable);
mapOverlays.add(bikeOverlay);
bikeOverlay.addOverlay(start_1_overlayitem);
Does anyone have any idea what is going on here? Is it an artefact from OverlayItem?
This was achieved by overriding the draw() method of the PointsOverlay as follows:
#Override
public void draw(Canvas canvas, MapView mapView, boolean shadow)
{
if(!shadow)
{
super.draw(canvas, mapView, false);
}
}
Thanks to etteyafed - I would have credited you with the points if you had answered, but I wanted to close this off.