I was trying to get hold of 2D graphics in Android.
As a example i want to implement a custom drawable and show it in my Activity
I have defined a customized drawable by extending from Android drawable as mentioned below
class myDrawable extends Drawable {
private static final String TAG = myDrawable.class.getSimpleName();
private ColorFilter cf;
#Override
public void draw(Canvas canvas) {
//First you define a colour for the outline of your rectangle
Paint rectanglePaint = new Paint();
rectanglePaint.setARGB(255, 255, 0, 0);
rectanglePaint.setStrokeWidth(2);
rectanglePaint.setStyle(Style.FILL);
//Then create yourself a Rectangle
RectF rectangle = new RectF(15.0f, 50.0f, 55.0f, 75.0f); //in pixels
Log.d(TAG,"On Draw method");
// TODO Auto-generated method stub
Paint paintHandl = new Paint();
// paintHandl.setColor(0xaabbcc);
paintHandl.setARGB(125, 234, 213, 34 );
RectF rectObj = new RectF(5,5,25,25);
canvas.drawRoundRect(rectangle, 0.5f, 0.5f, rectanglePaint);
}
#Override
public int getOpacity() {
// TODO Auto-generated method stub
return 100;
}
#Override
public void setAlpha(int alpha) {
// TODO Auto-generated method stub
}
#Override
public void setColorFilter(ColorFilter cf) {
// TODO Auto-generated method stub
this.cf = cf;
}
}
I am trying to get this displayed in my activity, as shown below
public class custDrawable extends Activity {
/** Called when the activity is first created. */
LinearLayout layObj = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
layObj = (LinearLayout) findViewById(R.id.parentLay);
ImageView imageView = (ImageView) findViewById(R.id.icon2);
myDrawable myDrawObj = new myDrawable();
imageView.setImageDrawable(myDrawObj);
imageView.invalidate();
// layObj.addView(myDrawObj, params);
}
}
But when i run the app i see no rectangle on the activity, can anyone help me out?
Where am i going wrong?
Your problem is in the getOpacity() method. 100 is not a valid value. You should use a PixelFormat value. Also, you should create your RectF and Paint in the constructor and then just adjust the values in draw() so you don't create so many objects that need garbage collected. Like this:
public class Square extends Drawable
{
private final Paint mPaint;
private final RectF mRect;
public Square()
{
mPaint = new Paint();
mRect = new RectF();
}
#Override
public void draw(Canvas canvas)
{
// Set the correct values in the Paint
mPaint.setARGB(255, 255, 0, 0);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Style.FILL);
// Adjust the rect
mRect.left = 15.0f;
mRect.top = 50.0f;
mRect.right = 55.0f;
mRect.bottom = 75.0f;
// Draw it
canvas.drawRoundRect(mRect, 0.5f, 0.5f, mPaint);
}
#Override
public int getOpacity()
{
return PixelFormat.OPAQUE;
}
#Override
public void setAlpha(int arg0)
{
}
#Override
public void setColorFilter(ColorFilter arg0)
{
}
}
You may have to implement other overrides like getIntrinsicWidth and getIntrinsicHeight. One way to tell is that you set your layout_width and layout_height to some constant (layout_width="42dip" layout_height="42dip" in XML or setting your layoutParams to some value if you are using Java layouts). Some View types handle not having getIntrinsic* implemented than others, so try them! This includes a straight View.
You can try returning -1 if there's no specific width or height.
Hard to tell if the issue ever got resolved, but I got here via Google trying to help myself remember the details of making a custom Drawable, plus I want to help people avoid this: http://xkcd.com/979/
Related
I'm trying to draw 4 rectangles on the canvas so that the canvas is divided in 4 equal rectangles. With the code I now have, only the last rectangle in my code is drawn.
This is the code in my Activity:
protected void onCreate(Bundle savedInstanceState) {
...
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
Paint paintTopLeft = new Paint();
paintTopLeft.setStyle(Paint.Style.FILL);
paintTopLeft.setColor(Color.WHITE);
canvas.drawPaint(paintTopLeft);
// Use Color.parseColor to define HTML colors
paintTopLeft.setColor(Color.parseColor("#F44336"));
canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);
Paint paintTopRight = new Paint();
paintTopRight.setStyle(Paint.Style.FILL);
paintTopRight.setColor(Color.WHITE);
canvas.drawPaint(paintTopRight);
// Use Color.parseColor to define HTML colors
paintTopRight.setColor(Color.parseColor("#2196F3"));
canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);
}
}
What am I doing wrong?
Actually I see only two rectangles that are drawn with your code. But anyway, the problem is that you are calling canvas.drawPaint which clears/fills the complete canvas with that color. So you are erasing all rectangles that have been drawn already just before you draw the last one.
This code should work:
protected void onCreate(Bundle savedInstanceState) {
...
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
Paint paintTopLeft = new Paint();
paintTopLeft.setStyle(Paint.Style.FILL);
paintTopLeft.setColor(Color.WHITE);
//canvas.drawPaint(paintTopLeft); // don't do that
// Use Color.parseColor to define HTML colors
paintTopLeft.setColor(Color.parseColor("#F44336"));
canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);
Paint paintTopRight = new Paint();
paintTopRight.setStyle(Paint.Style.FILL);
paintTopRight.setColor(Color.WHITE);
// canvas.drawPaint(paintTopRight); // don't do that
// Use Color.parseColor to define HTML colors
paintTopRight.setColor(Color.parseColor("#2196F3"));
canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);
}
}
I want to add xml layout to custom view. It is done in commented section of code. But I am not able to draw after doing that. This Code paint red circle in center of screen. After uncommenting commented lines circle is not painted.
public class Main extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View {
Paint paint;
public MyView(Context context) {
super(context);
// View view = inflate(context, R.layout.activity_main_zadanie, null);
// view.setFocusable(true);
// addView(view);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
int radius;
radius = 100;
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawCircle(x / 2, y / 2, radius, paint);
}
}
}
Your new view is probably covering the canvas on your custom view. Try setting the background to translucent in R.layout.activity_main_zadanie.
I have multiple rectangles in the middle of the view (canvas). I want to move them all to the edges of the screen smoothly simultaneously. This is not a jump, i need to see the between positions from start to end so it appear as a smooth transition.
Whats the best way to do that?
Try this code :
public class animatedView extends View {
Bitmap i;
int x=0;
int y=0;
public animatedView(Context context) {
super(context);
// TODO Auto-generated constructor stub
i = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Rect bk = new Rect();
bk.set(0, 0, canvas.getWidth(), canvas.getHeight());
Paint pBk = new Paint();
pBk.setStyle(Paint.Style.FILL);
pBk.setColor(Color.BLUE);
canvas.drawRect(bk, pBk);
canvas.drawBitmap(i, x, y, pBk);
x+=10;
invalidate();
}
}
Hope it helps !
I have a view and I want to draw a shape on it (circle for example) after click.
I've tried to do this but there are two problems -
onDraw is never called.
Not sure the setLayoutParams(v.getLayoutParams) will give me the result I want.
#Override
public void onClick(View v) {
CircleView circle = new CircleView(GameXoActivity.this, v.getWidth(), v.getHeight());
circle.setLayoutParams(v.getLayoutParams());
circle.startDrawing();
}
CircleView:
public CircleView(Context context, int width, int height) {
super(context);
this.width = width;
this.height = height;
}
protected void startDrawing() {
this.postInvalidate();
}
#Override
protected void onDraw(Canvas canvas) {
Log.d("TAG", "onDraw");
// draw circle
}
}
}
UPDATE:
The shape is not an image and I want to draw it with animation (I didn't write the entire code).
Also, the shape is not always a circle, so using a drawable-state is not an option.
Because there is not just one view, but 9, I don't think the making 9 more on top of them would be right.
As I'm sure you'll need to customize this quite a bit, I've left things rather generic. The following example will animate a blue circle being drawn clockwise, starting from the east (0 degrees), on top of the View's content when the View is clicked.
public class CircleView extends View
{
private static final int MARGIN = 50;
Handler handler = new Handler();
Paint paint = new Paint();
RectF rect = new RectF();
boolean drawing = false;
float sweep = 0;
public CircleView(Context context)
{
this(context, null);
}
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(15);
paint.setColor(Color.BLUE);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawArc(rect, 0, sweep, false, paint);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
rect.set(MARGIN, MARGIN, w - MARGIN, h - MARGIN);
}
public void startAnimation()
{
drawing = true;
handler.post(runnable);
}
Runnable runnable = new Runnable()
{
#Override
public void run()
{
sweep += 10;
if (!(sweep > 360))
{
invalidate();
handler.postDelayed(this, 20);
}
else
{
drawing = false;
sweep = 0;
}
}
};
}
In this Activity example, I used an image that most developers would already have in their project, but it can obviously be changed to your custom image. Also, for the sake of simplicity and brevity, the CircleView is set as the entire content of the Activity, but it can easily be listed in an xml layout, as well.
public class MainActivity extends Activity
{
CircleView circle;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
circle = new CircleView(this);
circle.setBackgroundResource(R.drawable.ic_launcher);
circle.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
circle.startAnimation();
}
}
);
setContentView(circle);
}
}
I suggest, create two imageView with same dimensions, set the image you want to display on image view and then make the second image invisible .
For example :
circleimage.setVisibility(View.INVISIBLE);//now its hidden(do it OnCreate)
and then show 2ndimage when 1stimage is clicked(do it in onclick of 1st image)
circleimage.setVisibility(View.VISIBLE);
If you want to mess with drawing of the object you should overridepublic void draw(Canvas canvas) and not protected void onDraw(Canvas canvas)
EDIT:Please read comments, this first statement of my answer is probably wrong
but I would use a FrameLayout or a RelativeLayout and put the images one on top of another.
Then you can play with the visibility of the overlaying image in order to hide/show it.
EDIT:
In case your circle is not an image and needs to be drawn, make your own circle class extending View and use it as a component in the FrameLayout or RelativeLayout as you would do if it were an image
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);
}
}