I want to rotate an ImageView toward specific pivot and with special degree. I searched in Google and found some solution about this, but I didn't find complete answer about this (like this answer).
I tried to use this code, but ImageView didn't rotate! Just the background of it rotates (without rotating view rectangle)
public class ImageViewCustom extends ImageView {
public Context M_context;
public ImageViewCustom(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.M_context = context;
}
public ImageViewCustom(Context context, AttributeSet attrs) {
super(context, attrs);
this.M_context = context;
}
public ImageViewCustom(Context context) {
super(context);
this.M_context = context;
}
public float xPivot;
public float yPivot;
public float degree;
public void draw(Canvas canvas) {
canvas.save();
canvas.rotate(degree, xPivot, yPivot);
super.draw(canvas);
canvas.restore();
}
}
So, how can I rotating ImageView without using Animation and just with overriding or adding rotate methods to ImageViewCustom ?
Thanks in advance :)
Bitmap bmp = arrow.copy(Bitmap.Config.ARGB_8888, true);
Matrix matrix = new Matrix();
matrix.postRotate(direction);
Bitmap bmpRotated = Bitmap.createBitmap(bmp, 0, 0, bmp.getWidth(),bmp.getHeight(), matrix, true);
iv.setImageBitmap(bmpRotated);
iv being the imageview and direction the degrees in whicht the bitmap needs to be rotated.
Related
I want to make a circular suface view (porthole effect). Surface view is inside a Frame layout. I want to make a custom view that i can add to Frame layout on top of surface view and mask whole Frame layout to produce porthole effect so that surface view will be shown as circle.
I searched and a lot for answer on Web and Stackoverflow but failed.
Then i saw this question and i tried this custom view to mask frame layout(and hence surfaceview) but i am not getting the desired result.
What i want is a custom view that can take height and width of it's parent (parent is square in shape) and make a transparent circle at it's center touching all four sides at middle of the boundaries, rest(view - circle) of the view will be of color that i can set.
public class FocusView extends View {
private Paint mTransparentPaint;
private Paint mSemiBlackPaint;
private Path mPath = new Path();
public static float radius , xCor , yCor;
public FocusView(Context context) {
super(context);
initPaints();
}
public FocusView(Context context, AttributeSet attrs) {
super(context, attrs);
initPaints();
}
public FocusView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaints();
}
private void initPaints() {
mTransparentPaint = new Paint();
mTransparentPaint.setColor(Color.GREEN);
mTransparentPaint.setStrokeWidth(10);
mSemiBlackPaint = new Paint();
mSemiBlackPaint.setColor(Color.TRANSPARENT);
mSemiBlackPaint.setStrokeWidth(10);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
mPath.addCircle(xCor,yCor,radius, Path.Direction.CW);
mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
canvas.drawCircle(xCor,yCor,radius, mTransparentPaint);
canvas.drawPath(mPath, mSemiBlackPaint);
canvas.clipPath(mPath);
canvas.drawColor(Color.parseColor("#FFFFFF")); //A6000000
}
}
Please if somebody can help me. Thanks in advance.
This is an example of a view that paints the whole view pink and cuts a centered, circular hole making the parent visible:
public class FocusView extends View {
private Paint mCutPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mBitmap;
private Canvas mInternalCanvas;
public FocusView(Context context) {
super(context);
init();
}
public FocusView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FocusView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mCutPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mInternalCanvas != null) {
mInternalCanvas.setBitmap(null);
mInternalCanvas = null;
}
if (mBitmap != null) {
mBitmap.recycle();
mBitmap = null;
}
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mInternalCanvas = new Canvas(mBitmap);
}
#Override
protected void onDraw(Canvas canvas) {
if (mInternalCanvas == null || mBitmap == null) {
return;
}
final int width = getWidth();
final int height = getHeight();
// make the radius as large as possible within the view bounds
final int radius = Math.min(width, height) / 2;
mInternalCanvas.drawColor(0xFFFF00FF);
mInternalCanvas.drawCircle(width / 2, height / 2, radius, mCutPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
}
The reason for drawing to an internal Bitmap first is that if you apply PorterDuff.Mode.CLEAR to the original Canvas it will cut away everything that's been previously drawn to the canvas, including the parent view.
There may be better solutions out there, but this one is simple enough to understand.
I have this custom view class which i found to make a rotate animation for the imageView i have in my project:
public class RotatedTitle extends ImageView
{
private float angleRotation;
public RotatedTitle(Context context)
{
super(context);
}
public RotatedTitle(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public RotatedTitle(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
public void setAngleRotation(float angleRotation)
{
this.angleRotation = angleRotation;
postInvalidate();
}
#Override
protected void onDraw(Canvas canvas)
{
Rect clipBounds = canvas.getClipBounds();
canvas.save();
canvas.rotate(angleRotation, clipBounds.exactCenterX(), clipBounds.exactCenterY());
super.onDraw(canvas);
canvas.restore();
postInvalidate();
}
}
Then am calling it like this in my main project:
RotatedTitle to = (RotatedTitle) findViewById(R.id.rotate);
to.setAngleRotation(10);
nothing is happening at all !! I do get the image to be drawn on the screen but no animation is happening. I tried to change invalidate() to postInvalidate() but nothing worked. Where is exactly to problem ? why I cant get any rotation animation!
Thank you
But you can use just RotateAnimation() class provided by SDK
ImageView image = (ImageView) findViewById(R.id.imageView);
Animation anim = new RotateAnimation(0.0f, 10.0f, pivotX, pivotY);
an.setDuration(5000);
an.setFillAfter(true);
image.setAnimation(anim);
If you're trying to rotate a view, use the RotateAnimation class. It was designed for this use. See the docs: http://developer.android.com/reference/android/view/animation/RotateAnimation.html
I'm trying to use vector drawables to draw into canvas. Everything is fine and dandy till I rotate the canvas object by 90 or 270 degrees. Closer I get to 90 or 270 degrees, more blurry the drawable shown in canvas appears. Finally at 90 or 270 degrees, the vector drawable on canvas disappears completely. Is there some sort of fix or workaround for this? Or should I approach drawing into canvas with svg's with some other library? Thanks!
Here's the code:
public class CanvasView extends View {
private static final String TAG = "CanvasView";
private VectorDrawableCompat vectorDrawableCompat;
private int angle;
public CanvasView(Context context) {
super(context);
init();
}
public CanvasView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
vectorDrawableCompat = VectorDrawableCompat.create(getResources(),
R.drawable.ic_android_black_24dp, null);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
vectorDrawableCompat.setBounds((getWidth()/2) - 50, (getHeight()/2) - 50, (getWidth()/2) + 50, (getHeight()/2) + 50);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.rotate(angle, getWidth()/2, getHeight()/2);
vectorDrawableCompat.draw(canvas);
canvas.restore();
}
public void setAngle(int angle){
Log.i(TAG, "setAngle: " + angle);
this.angle = angle;
invalidate();
}
}
Here's the project: https://github.com/danskiess/VectorTest
This has been fixed in the android framework.
https://code.google.com/p/android/issues/detail?id=192413
One possible workaround for this rotation case could be just draw the VectorDrawable into a Bitmap, then rotate the bitmap.
I need to set white color to the region that the user touches on an ImageView. If I setOnTouchListener to the ImageView and get the x and y positions of the touch, how can I change the appropriate pixel values in the ImageView? or is there a better solution?
I think the easiest solution is to extend ImageView.
Here is a brief example that draws a black circle around touched area:
class TouchableImageView extends ImageView {
private float x, y;
private Paint paint;
public TouchableImageView(Context context) {
super(context);
init();
}
public TouchableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TouchableImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TouchableImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
void init() {
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
x = event.getX();
y = event.getY();
invalidate();
}
return super.onTouchEvent(event);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//Just for example - draw a circle around touch area:
if(x!=0 || y!=0)
canvas.drawCircle(x, y, 25, paint);
}
}
Edit :
If you want to save the result as a bitmap - you need several more steps as described here and here.
In short you should follow these steps :
Create a new Bitmap of the required size
Create new canvas for the created Bitmap - new Canvas(bitmap)
Re-draw all you need upon this canvas
Save bitmap as a graphics file
I am working with android.I had created an android app with a custom image view which clip corners of the image. here is my custom image view
public class CustomImage extends ImageView {
public static float radius = 18.0f;
public CustomImage(Context context) {
super(context);
}
public CustomImage(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomImage(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
CustomImage.this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}
it works perfect.But I need to add a border around the clipped Image view .How can I do this?
If you want rounded conners you can use this library RoundedImageView. You can see the code of library for you can implementation.
Or This tutorial Round Corners