Develop Reference

how is possible to set imageview or icon in the canvas circle?

how is possible to set an image or icon in the canvas Circle? i have a custom canvas view that by move the camera on map, resize method will be activate and change the shape of the view and by stop the moving of map it will be like factory setting...happy english :-))))
public class CancvasCircle extends androidx.appcompat.widget.AppCompatImageView {
///main circle resize fields
public static final int MAIN_CIRCLE_PRE_RADIUS = 40;
public static final int MAIN_CIRCLE_POST_RADIUS = 43;
public static final String MAIN_CIRCLE_PRE_STROKE_COLOR = "#69DAE2";
//4CEAE3
public static final String MAIN_CIRCLE_POST_STROKE_COLOR = "#FBCC38";
///// line resize fields
public static final int LINE_HIEGHT_STOP = 45;
public static final int LINE_HIEGHT_START_PRE = 0;
public static final int LINE_HIEGHT_START_POST = 23;
public static final int SHADOW_CIRCLE_PRE_RADIUS = 15;
//circle paint fields
Paint strokeCircle;
Paint fillCircle;
Paint shadowCircle;
Paint line;
Paint dot;
//center
float centerX;
float centerY;
//main circle fields
private int radiusMain = MAIN_CIRCLE_PRE_RADIUS;
private String colorMain = MAIN_CIRCLE_PRE_STROKE_COLOR;
//line fields
private float lineStartY;
private float lineStopY;
//shadow circle fields
private int shadowRadius = SHADOW_CIRCLE_PRE_RADIUS;
public CancvasCircle(Context context) {
super(context);
init();
}
public CancvasCircle(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CancvasCircle(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void init() {
strokeCircle = new Paint();
strokeCircle.setAntiAlias(true);
strokeCircle.setAntiAlias(true);
strokeCircle.setStrokeWidth(10);
strokeCircle.setStyle(Paint.Style.STROKE);
fillCircle = new Paint();
fillCircle.setAntiAlias(true);
fillCircle.setColor(Color.parseColor("#BEC6CC"));
fillCircle.setStyle(Paint.Style.FILL);
shadowCircle = new Paint();
shadowCircle.setAntiAlias(true);
shadowCircle.setColor(Color.parseColor("#1f000000"));
shadowCircle.setStyle(Paint.Style.FILL);
line = new Paint();
line.setAntiAlias(true);
line.setColor(Color.parseColor("#000000"));
line.setStrokeWidth(4);
line.setStyle(Paint.Style.FILL);
dot = new Paint();
dot.setAntiAlias(true);
dot.setColor(Color.parseColor("#000000"));
dot.setStrokeWidth(4);
dot.setStyle(Paint.Style.FILL);
}
public void resizeStrokeCircleParams(Boolean resize) {
if (resize) {
this.radiusMain = MAIN_CIRCLE_POST_RADIUS;
this.colorMain = MAIN_CIRCLE_POST_STROKE_COLOR;
this.lineStartY = centerY - LINE_HIEGHT_START_POST;
this.lineStopY = LINE_HIEGHT_STOP + LINE_HIEGHT_START_POST - 10;
this.shadowRadius = LINE_HIEGHT_START_POST;
} else {
this.radiusMain = MAIN_CIRCLE_PRE_RADIUS;
this.colorMain = MAIN_CIRCLE_PRE_STROKE_COLOR;
this.lineStartY = centerY - LINE_HIEGHT_START_PRE;
this.lineStopY = LINE_HIEGHT_STOP;
this.shadowRadius = SHADOW_CIRCLE_PRE_RADIUS;
}
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
centerX = getWidth() / 2f;
centerY = getHeight() / 2f;
int radius = radiusMain;
float lineStopY = this.lineStopY;
float lineStartY = this.lineStartY;
int shadowRadius = this.shadowRadius;
strokeCircle.setColor(Color.parseColor(colorMain));
canvas.drawCircle(centerX, centerY - lineStopY - radius, radius, strokeCircle);
canvas.drawCircle(centerX, centerY - lineStopY - radius, radius, fillCircle);
canvas.drawCircle(centerX, centerY, shadowRadius, shadowCircle);
canvas.drawLine(centerX, lineStartY, centerX, centerY - lineStopY, line);
canvas.drawPoint(centerX,centerY,dot);
}
}
is it possible to flip two images like coin in it????

See example as custom View.
public class ViewCircle extends View{
final Bitmap bms; //source
final Bitmap bmm; //mask
final Paint paint;
public ViewCircle( Context context ){
super( context );
bms = BitmapFactory.decodeResource( getResources(), R.drawable.pr_0000 );
bmm = Bitmap.createBitmap( bms.getWidth(), bms.getHeight(), Bitmap.Config.ARGB_8888 );
Canvas canvas = new Canvas( bmm );
paint = new Paint( Paint.ANTI_ALIAS_FLAG );
canvas.drawCircle( bmm.getWidth()/2, bmm.getHeight()/2, Math.min(bmm.getWidth()/2,bmm.getHeight()/2), paint );
paint.setXfermode( new PorterDuffXfermode( PorterDuff.Mode.SRC_IN ) );
canvas.drawBitmap( bms, 0, 0, paint );
}
#Override
protected void onDraw( Canvas canvas ){
super.onDraw( canvas );
canvas.drawBitmap( bms, 0,0, null );
canvas.drawBitmap( bmm, bms.getWidth(),0, null );
}
}

i used this method to create a bitmap from XML layout and set it in my codes...
public Bitmap getMarkerBitmapFromView(#DrawableRes int resIdMain, #DrawableRes int resId) {
View customMarkerView = ((LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker, null);
customMarkerView.findViewById(R.id.custom_marker_firstlayout);
if(resIdMain != 0){
customMarkerView.setBackgroundResource(resIdMain);
}
ImageView markerImageView = (ImageView) customMarkerView.findViewById(R.id.custom_marker_secondLayout);
if(resId != 0){
markerImageView.setImageResource(resId);
}
customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
customMarkerView.layout(0, 0, customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight());
customMarkerView.buildDrawingCache();
Bitmap returnedBitmap = Bitmap.createBitmap(customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(returnedBitmap);
canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_IN);
Drawable drawable = customMarkerView.getBackground();
if (drawable != null)
drawable.draw(canvas);
customMarkerView.draw(canvas);
return returnedBitmap;
}
and set it in my canvas view in onDraw() and set it in the middle of my circle:
canvas.drawBitmap(getMarkerBitmapFromView(0,guildMarkerICON),convertDpToPixel(76,context),imageHieght,null);
because of drawing wrong in different devices i used this methods to change pixel and dp:
public static float convertPixelsToDp(float px,Context context){
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
float dp = px / (metrics.densityDpi / 160f);
return dp;
}
public static float convertDpToPixel(float dp,Context context){
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
float px = dp * (metrics.densityDpi/160f);
return px;
}
and XML layout that provide my bit map (that you can use image or any things you want in it) is (custom_marker.xml) :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_marker_firstlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/center_marker_background">
<ImageView
android:id="#+id/custom_marker_secondLayout"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:contentDescription="#null"
/>
</FrameLayout>
and use this method when you want to change the marker(like moving the map):
map.setOnCameraMoveStartedListener(new GoogleMap.OnCameraMoveStartedListener() {
#Override
public void onCameraMoveStarted(int i) {
canvasView.resizeStrokeCircleParams(true,guildMarkerICON);
}
});
map.setOnCameraIdleListener(new GoogleMap.OnCameraIdleListener() {
#Override
public void onCameraIdle() {
canvasView.resizeStrokeCircleParams(false,guildMarkerICON);
}
});
and finally here i s my custom canvas class that i used and i passed my custom icon to it by resize method and set it as i want...enjoy it:
public class CancvasCircle extends androidx.appcompat.widget.AppCompatImageView {
///main circle resize fields
public static final int MAIN_CIRCLE_PRE_RADIUS = 24;
public static final int MAIN_CIRCLE_POST_RADIUS = 26;
public static final String MAIN_CIRCLE_PRE_STROKE_COLOR = "#F44336";
public static final String MAIN_CIRCLE_POST_STROKE_COLOR = "#FFCC59";
//FFCC59
//FBCC38
///// line resize fields
public static final int LINE_HIEGHT_STOP = 24;
public static final int LINE_HIEGHT_START_PRE = 0;
public static final int LINE_HIEGHT_START_POST = 11;
public static final int SHADOW_CIRCLE_PRE_RADIUS = 14;
private final Context context;
/// image view fields
//circle paint fields
Paint strokeCircle;
Paint fillCircle;
Paint shadowCircle;
Paint line;
Paint dot;
Paint imagePaint;
//center
float centerX;
float centerY;
//main circle fields
private int radiusMain = MAIN_CIRCLE_PRE_RADIUS;
private String colorMain = MAIN_CIRCLE_PRE_STROKE_COLOR;
//line fieldsاذغ
private float lineStartY;
private float lineStopY;
//shadow circle fields
private int shadowRadius = SHADOW_CIRCLE_PRE_RADIUS;
private Bitmap canvasBitmap;
private int imageTopPadding;
private int guildMarkerICON
;
public CancvasCircle(Context context) {
super(context);
this.context = context;
init();
}
public CancvasCircle(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
this.context = context;
init();
}
public CancvasCircle(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
init();
}
public void init() {
strokeCircle = new Paint();
strokeCircle.setAntiAlias(true);
strokeCircle.setAntiAlias(true);
strokeCircle.setStrokeWidth(12);
strokeCircle.setStyle(Paint.Style.STROKE);
fillCircle = new Paint();
fillCircle.setAntiAlias(true);
fillCircle.setColor(Color.parseColor("#af283232"));
fillCircle.setStyle(Paint.Style.FILL);
shadowCircle = new Paint();
shadowCircle.setAntiAlias(true);
shadowCircle.setColor(Color.parseColor("#1f000000"));
shadowCircle.setStyle(Paint.Style.FILL);
line = new Paint();
line.setAntiAlias(true);
line.setColor(Color.parseColor("#000000"));
line.setStrokeWidth(4);
line.setStyle(Paint.Style.FILL);
dot = new Paint();
dot.setAntiAlias(true);
dot.setColor(Color.parseColor("#000000"));
dot.setStrokeWidth(4);
dot.setStyle(Paint.Style.FILL);
}
public void resizeStrokeCircleParams(Boolean resize , int guildMarkerICON) {
this.guildMarkerICON = guildMarkerICON;
if (resize) {
this.radiusMain = (int) convertDpToPixel(MAIN_CIRCLE_POST_RADIUS,context);
this.colorMain = MAIN_CIRCLE_POST_STROKE_COLOR;
this.lineStartY = centerY -convertDpToPixel( LINE_HIEGHT_START_POST,context);
this.lineStopY =convertDpToPixel( LINE_HIEGHT_STOP,context) + convertDpToPixel(LINE_HIEGHT_START_POST,context) -8;
this.shadowRadius = (int) convertDpToPixel(LINE_HIEGHT_START_POST,context);
this.imageTopPadding = (int) convertDpToPixel(19,context);
} else {
this.radiusMain = (int) convertDpToPixel( MAIN_CIRCLE_PRE_RADIUS,context);
this.colorMain = MAIN_CIRCLE_PRE_STROKE_COLOR;
this.lineStartY = centerY - convertDpToPixel(LINE_HIEGHT_START_PRE,context);
this.lineStopY = convertDpToPixel(LINE_HIEGHT_STOP,context);
this.shadowRadius = (int) convertDpToPixel(SHADOW_CIRCLE_PRE_RADIUS,context);
this.imageTopPadding = (int) convertDpToPixel( 28,context);
}
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
centerX = getWidth() / 2f;
centerY = getHeight() / 2f;
int radius = radiusMain;
float lineStopY = this.lineStopY;
float lineStartY = this.lineStartY;
int shadowRadius = this.shadowRadius;
int imageHieght = this.imageTopPadding;
strokeCircle.setColor(Color.parseColor(colorMain));
// if map is moving (imageHieght == 41)
// if map is not moving (imageHieght == 56)
canvas.drawLine(centerX, lineStartY, centerX, centerY - lineStopY, line);
canvas.drawCircle(centerX, centerY - lineStopY - radius, radius, strokeCircle);
canvas.drawCircle(centerX, centerY - lineStopY - radius, radius, fillCircle);
canvas.drawCircle(centerX, centerY, shadowRadius, shadowCircle);
canvas.drawPoint(centerX,centerY,dot);
canvas.drawBitmap(getMarkerBitmapFromView(0,guildMarkerICON),convertDpToPixel(76,context),imageHieght,null);
invalidate();
}
public static float convertPixelsToDp(float px,Context context){
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
float dp = px / (metrics.densityDpi / 160f);
return dp;
}
public static float convertDpToPixel(float dp,Context context){
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
float px = dp * (metrics.densityDpi/160f);
return px;
}
public Bitmap getMarkerBitmapFromView(#DrawableRes int resIdMain, #DrawableRes int resId) {
View customMarkerView = ((LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker, null);
customMarkerView.findViewById(R.id.custom_marker_firstlayout);
if(resIdMain != 0){
customMarkerView.setBackgroundResource(resIdMain);
}
ImageView markerImageView = (ImageView) customMarkerView.findViewById(R.id.custom_marker_secondLayout);
if(resId != 0){
markerImageView.setImageResource(resId);
}
customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
customMarkerView.layout(0, 0, customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight());
customMarkerView.buildDrawingCache();
Bitmap returnedBitmap = Bitmap.createBitmap(customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(returnedBitmap);
canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_IN);
Drawable drawable = customMarkerView.getBackground();
if (drawable != null)
drawable.draw(canvas);
customMarkerView.draw(canvas);
return returnedBitmap;
}
}
result:

android.graphics draw a line from one View pointing to another View

I know android.graphics is old, but i am having trouble doing a simple stuff.
I want to draw a line animation where one View points an arrow/line into another View
First Button-------------------------------->Second Button
I have tried creating a custom View class and overriding the onDraw(Canvas c) method and then using the drawLine(startX, startY, stopX, stopY, paint) method from the Canvas Object. But i don't know which coordinates to get in order to point one View to the other View
I don't want to create a static View in the XML layout with a slim height because the View can be added dynamically by the user, which i think drawing the line dynamically is the best way.
Please help me out. Thank you!

For drawing lines between views better if all of it lays on same parent layout. For the conditions of the question (Second Button is exactly to the right of First Button) you can use custom layout like that:
public class ArrowLayout extends RelativeLayout {
public static final String PROPERTY_X = "PROPERTY_X";
public static final String PROPERTY_Y = "PROPERTY_Y";
private final static double ARROW_ANGLE = Math.PI / 6;
private final static double ARROW_SIZE = 50;
private Paint mPaint;
private boolean mDrawArrow = false;
private Point mPointFrom = new Point(); // current (during animation) arrow start point
private Point mPointTo = new Point(); // current (during animation) arrow end point
public ArrowLayout(Context context) {
super(context);
init();
}
public ArrowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ArrowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public ArrowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
setWillNotDraw(false);
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(5);
}
#Override
public void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.save();
if (mDrawArrow) {
drawArrowLines(mPointFrom, mPointTo, canvas);
}
canvas.restore();
}
private Point calcPointFrom(Rect fromViewBounds, Rect toViewBounds) {
Point pointFrom = new Point();
pointFrom.x = fromViewBounds.right;
pointFrom.y = fromViewBounds.top + (fromViewBounds.bottom - fromViewBounds.top) / 2;
return pointFrom;
}
private Point calcPointTo(Rect fromViewBounds, Rect toViewBounds) {
Point pointTo = new Point();
pointTo.x = toViewBounds.left;
pointTo.y = toViewBounds.top + (toViewBounds.bottom - toViewBounds.top) / 2;
return pointTo;
}
private void drawArrowLines(Point pointFrom, Point pointTo, Canvas canvas) {
canvas.drawLine(pointFrom.x, pointFrom.y, pointTo.x, pointTo.y, mPaint);
double angle = Math.atan2(pointTo.y - pointFrom.y, pointTo.x - pointFrom.x);
int arrowX, arrowY;
arrowX = (int) (pointTo.x - ARROW_SIZE * Math.cos(angle + ARROW_ANGLE));
arrowY = (int) (pointTo.y - ARROW_SIZE * Math.sin(angle + ARROW_ANGLE));
canvas.drawLine(pointTo.x, pointTo.y, arrowX, arrowY, mPaint);
arrowX = (int) (pointTo.x - ARROW_SIZE * Math.cos(angle - ARROW_ANGLE));
arrowY = (int) (pointTo.y - ARROW_SIZE * Math.sin(angle - ARROW_ANGLE));
canvas.drawLine(pointTo.x, pointTo.y, arrowX, arrowY, mPaint);
}
public void animateArrows(int duration) {
mDrawArrow = true;
View fromView = getChildAt(0);
View toView = getChildAt(1);
// find from and to views bounds
Rect fromViewBounds = new Rect();
fromView.getDrawingRect(fromViewBounds);
offsetDescendantRectToMyCoords(fromView, fromViewBounds);
Rect toViewBounds = new Rect();
toView.getDrawingRect(toViewBounds);
offsetDescendantRectToMyCoords(toView, toViewBounds);
// calculate arrow sbegin and end points
Point pointFrom = calcPointFrom(fromViewBounds, toViewBounds);
Point pointTo = calcPointTo(fromViewBounds, toViewBounds);
ValueAnimator arrowAnimator = createArrowAnimator(pointFrom, pointTo, duration);
arrowAnimator.start();
}
private ValueAnimator createArrowAnimator(Point pointFrom, Point pointTo, int duration) {
final double angle = Math.atan2(pointTo.y - pointFrom.y, pointTo.x - pointFrom.x);
mPointFrom.x = pointFrom.x;
mPointFrom.y = pointFrom.y;
int firstX = (int) (pointFrom.x + ARROW_SIZE * Math.cos(angle));
int firstY = (int) (pointFrom.y + ARROW_SIZE * Math.sin(angle));
PropertyValuesHolder propertyX = PropertyValuesHolder.ofInt(PROPERTY_X, firstX, pointTo.x);
PropertyValuesHolder propertyY = PropertyValuesHolder.ofInt(PROPERTY_Y, firstY, pointTo.y);
ValueAnimator animator = new ValueAnimator();
animator.setValues(propertyX, propertyY);
animator.setDuration(duration);
// set other interpolator (if needed) here:
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mPointTo.x = (int) valueAnimator.getAnimatedValue(PROPERTY_X);
mPointTo.y = (int) valueAnimator.getAnimatedValue(PROPERTY_Y);
invalidate();
}
});
return animator;
}
}
with .xml layout like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<{YOUR_PACKAGE_NAME}.ArrowLayout
android:id="#+id/arrow_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/first_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="First Button"/>
<Button
android:id="#+id/second_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Second Button"/>
</{YOUR_PACKAGE_NAME}.ArrowLayout>
</RelativeLayout>
and MainActivity.java like:
public class MainActivity extends AppCompatActivity {
private ArrowLayout mArrowLayout;
private Button mFirstButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mArrowLayout = (ArrowLayout) findViewById(R.id.arrow_layout);
mFirstButton = (Button) findViewById(R.id.first_button);
mFirstButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mArrowLayout.animateArrows(1000);
}
});
}
}
you got something like that (on First Button click):
For other cases ( Second Button is exactly to the left (or above, or below) or more complex above-right/below-left etc. of First Button) you should modify part for calculating arrow begin and end points:
private Point calcPointFrom(Rect fromViewBounds, Rect toViewBounds) {
Point pointFrom = new Point();
// Second Button above
// ----------+----------
// | |
// Second Button tho the left + First Button + Second Button tho the right
// | |
// ----------+----------
// Second Button below
//
// + - is arrow start point position
if (toViewBounds to the right of fromViewBounds){
pointFrom.x = fromViewBounds.right;
pointFrom.y = fromViewBounds.top + (fromViewBounds.bottom - fromViewBounds.top) / 2;
} else if (toViewBounds to the left of fromViewBounds) {
pointFrom.x = fromViewBounds.left;
pointFrom.y = fromViewBounds.top + (fromViewBounds.bottom - fromViewBounds.top) / 2;
} else if () {
...
}
return pointFrom;
}

Use Path and Pathmeasure for Drawing Animated Line. I have Made and test it.
Make Custom View and pass view coordinates points array to it,
public class AnimatedLine extends View {
private final Paint mPaint;
public Canvas mCanvas;
AnimationListener animationListener;
Path path;
private static long animSpeedInMs = 2000;
private static final long animMsBetweenStrokes = 100;
private long animLastUpdate;
private boolean animRunning = true;
private int animCurrentCountour;
private float animCurrentPos;
private Path animPath;
private PathMeasure animPathMeasure;
float pathLength;
float distance = 0;
float[] pos;
float[] tan;
Matrix matrix;
Bitmap bm;
public AnimatedLine(Context context) {
this(context, null);
mCanvas = new Canvas();
}
public AnimatedLine(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(15);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setColor(context.getResources().getColor(R.color.materialcolorpicker__red));
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) {
setLayerType(LAYER_TYPE_SOFTWARE, mPaint);
}
bm = BitmapFactory.decodeResource(getResources(), R.drawable.hand1);
bm = Bitmap.createScaledBitmap(bm, 20,20, false);
distance = 0;
pos = new float[2];
tan = new float[2];
matrix = new Matrix();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCanvas = canvas;
if (path != null) {
if (animRunning) {
drawAnimation(mCanvas);
} else {
drawStatic(mCanvas);
}
}
}
/**
* draw Path With Animation
*
* #param time in milliseconds
*/
public void drawWithAnimation(ArrayList<PointF> points, long time,AnimationListener animationListener) {
animRunning = true;
animPathMeasure = null;
animSpeedInMs = time;
setPath(points);
setAnimationListener(animationListener);
invalidate();
}
public void setPath(ArrayList<PointF> points) {
if (points.size() < 2) {
throw new IllegalStateException("Pass atleast two points.");
}
path = new Path();
path.moveTo(points.get(0).x, points.get(0).y);
path.lineTo(points.get(1).x, points.get(1).y);
}
private void drawAnimation(Canvas canvas) {
if (animPathMeasure == null) {
// Start of animation. Set it up.
animationListener.onAnimationStarted();
animPathMeasure = new PathMeasure(path, false);
animPathMeasure.nextContour();
animPath = new Path();
animLastUpdate = System.currentTimeMillis();
animCurrentCountour = 0;
animCurrentPos = 0.0f;
pathLength = animPathMeasure.getLength();
} else {
// Get time since last frame
long now = System.currentTimeMillis();
long timeSinceLast = now - animLastUpdate;
if (animCurrentPos == 0.0f) {
timeSinceLast -= animMsBetweenStrokes;
}
if (timeSinceLast > 0) {
// Get next segment of path
float newPos = (float) (timeSinceLast) / (animSpeedInMs / pathLength) + animCurrentPos;
boolean moveTo = (animCurrentPos == 0.0f);
animPathMeasure.getSegment(animCurrentPos, newPos, animPath, moveTo);
animCurrentPos = newPos;
animLastUpdate = now;
//start draw bitmap along path
animPathMeasure.getPosTan(newPos, pos, tan);
matrix.reset();
matrix.postTranslate(pos[0], pos[1]);
canvas.drawBitmap(bm, matrix, null);
//end drawing bitmap
//take current position
animationListener.onAnimationUpdate(pos);
// If this stroke is done, move on to next
if (newPos > pathLength) {
animCurrentPos = 0.0f;
animCurrentCountour++;
boolean more = animPathMeasure.nextContour();
// Check if finished
if (!more) {
animationListener.onAnimationEnd();
animRunning = false;
}
}
}
// Draw path
canvas.drawPath(animPath, mPaint);
}
invalidate();
}
private void drawStatic(Canvas canvas) {
canvas.drawPath(path, mPaint);
canvas.drawBitmap(bm, matrix, null);
}
public void setAnimationListener(AnimationListener animationListener) {
this.animationListener = animationListener;
}
public interface AnimationListener {
void onAnimationStarted();
void onAnimationEnd();
void onAnimationUpdate(float[] pos);
}
}

Can't change vector drawable for a custom view during runtime

I have implemented a custom view which looks like a seekbar with drawable attached at end Custom Score bar. I have provided methods to change colour for progress, change width of the progress(along with the rocket icon), and change the icon itself(for different colours).
public class RocketView extends View {
private int mProgressWidth = 12;
private Drawable mIndicatorIcon;
private int mProgress, mMin = 0, mMax = 100;
private Paint mBackgroundPaint, mProgressPaint;
private RectF mBackgroundRect = new RectF();
private RectF mProgressRect = new RectF();
private int mIndicatorSize;
private int mProgressColor;
private int mIndicatorLeft;
public RocketView(Context context) {
super(context);
init(context, null);
}
public RocketView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
void init(Context context, AttributeSet attrs) {
float density = getResources().getDisplayMetrics().density;
int backgroundColor = ContextCompat.getColor(context, R.color.color_bg);
int progressColor = ContextCompat.getColor(context, R.color.color_progress);
mProgressWidth = (int) (mProgressWidth * density);
mIndicatorIcon = ContextCompat.getDrawable(context, R.drawable.rocket_15);
if (attrs != null) {
final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RocketView, 0, 0);
Drawable indicatorIcon = a.getDrawable(R.styleable.RocketView_indicatorIcon);
if (indicatorIcon != null) mIndicatorIcon = indicatorIcon;
mProgress = a.getInteger(R.styleable.RocketView_progress, 0);
mProgressWidth = (int) a.getDimension(R.styleable.RocketView_thickness, mProgressWidth);
mIndicatorSize = 10*mProgressWidth;
mIndicatorIcon.setBounds(0, 0, mIndicatorSize, mIndicatorSize);
mProgressColor = a.getColor(R.styleable.RocketView_progressColor, progressColor);
backgroundColor = a.getColor(R.styleable.RocketView_backgroundColor, backgroundColor);
a.recycle();
}
// range check
mProgress = (mProgress > mMax) ? mMax : mProgress;
mProgress = (mProgress < mMin) ? mMin : mProgress;
mBackgroundPaint = new Paint();
mBackgroundPaint.setColor(backgroundColor);
mBackgroundPaint.setAntiAlias(true);
mBackgroundPaint.setStyle(Paint.Style.STROKE);
mBackgroundPaint.setStrokeWidth(mProgressWidth);
mBackgroundPaint.setStrokeCap(Paint.Cap.ROUND);
mProgressPaint = new Paint();
mProgressPaint.setColor(mProgressColor);
mProgressPaint.setAntiAlias(true);
mProgressPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mProgressPaint.setStrokeWidth(mProgressWidth);
mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
final int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
int top = 0;
int left = 0;
//normalizing the value from 0 to 100 to 0 to container width
/* Formula for linear range [A..B] to [C..D],
*
* (D-C)*(X-A)
X' = ----------- + C
(B-A)
*/
int extraOffset = dpToPx(2);
int extraPadding = dpToPx(8);
int x = (width - left)*(mProgress - 0)/(100 -0) + 0;
top = 2*mIndicatorSize/5 + mProgressWidth/2 +extraOffset;
mBackgroundRect.set(left +extraPadding, top, left + width -extraPadding, top+mProgressWidth/2 );
int indicatorLeft = width - (left + x);
if (indicatorLeft < mIndicatorSize) {
mIndicatorLeft = width - mIndicatorSize;
mProgressRect.set(left +extraPadding, top, left + x - dpToPx(20), top + mProgressWidth/2 );
}
else {
mIndicatorLeft = left + x - dpToPx(16);
mProgressRect.set(left +extraPadding, top, left + x, top + mProgressWidth/2);
}
setMeasuredDimension(width, mIndicatorSize);
}
#Override
protected void onDraw(Canvas canvas) {
// draw the background
canvas.drawRoundRect(mBackgroundRect, mProgressWidth/2, mProgressWidth/2, mBackgroundPaint);
//draw progress
canvas.drawRoundRect(mProgressRect, mProgressWidth/2, mProgressWidth/2, mProgressPaint);
// draw the indicator icon
canvas.translate(mIndicatorLeft,0);
mIndicatorIcon.draw(canvas);
}
public static int dpToPx(int dp){
return dp * (Resources.getSystem().getDisplayMetrics().densityDpi / DisplayMetrics.DENSITY_DEFAULT);
}
public void setIndicatorIcon(int indicatorIcon) {
mIndicatorIcon = getResources().getDrawable(indicatorIcon);
invalidate();
}
public void setProgress(int progress) {
mProgress = progress;
invalidate();
}
public void setProgressColor(int color) {
mProgressColor = color;
mProgressPaint = new Paint();
mProgressPaint.setColor(mProgressColor);
mProgressPaint.setAntiAlias(true);
mProgressPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mProgressPaint.setStrokeWidth(mProgressWidth);
invalidate();
}
}
now i am instantiating it in activity as:
RocketView rv = (RocketView) findViewById(R.id.rv);
rv.setProgressColor(getResources().getColor(R.color.colorAccent));
rv.setProgress(100);
rv.setIndicatorIcon(R.drawable.rocket_15);
If I don't set indicator icon in activity the icon is shown but as soon as I call the method setIndicatorIcon() the icon disappears. What am I missing?

Coordinates scale not correct when drawing a polyline on an View

I want to draw a polyline on a view. I don't want to draw it on a MapView because I only want the polyline without any background.
I have the polyline coordinates and I also have its bounds (northeast and southwest coordinates).
The idea was to create a custom view and draw the path there. The problem I believe I'm having is with the scale. I can convert the LatLng coordinates to x and y coordinates but the polyline that is shown on the view is too small. The view is set with a 64dp width and height.
Here is what I'm doing:
public PolylineView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
setupAttributes(attrs);
}
private void setupAttributes(AttributeSet attrs) {
// Obtain a typed array of attributes
TypedArray a = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.PolylineView, 0, 0);
// Extract custom attributes into member variables
try {
polylineColor = a.getColor(R.styleable.PolylineView_polylineColor, Color.BLACK);
} finally {
// TypedArray objects are shared and must be recycled.
a.recycle();
}
polyline = new Paint(Paint.ANTI_ALIAS_FLAG);
polyline.setAntiAlias(true);
polyline.setStyle(Paint.Style.STROKE);
polyline.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
polyline.setStrokeCap(Paint.Cap.ROUND);
polyline.setColor(polylineColor);
path = new Path();
smp = new SphericalMercatorProjection(polylineSize);
}
#Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
point = smp.toPoint(polylineCoordinates.get(0));
path.moveTo((float) (point.x * scale), (float) (point.y * scale));
for (int i = 1; i < polylineCoordinates.size(); i++) {
point = smp.toPoint(polylineCoordinates.get(i));
path.lineTo((float) (point.x * scale), (float) (point.y * scale));
}
canvas.drawPath(path, polyline);
}
public void setPolyline(List<LatLng> polylineCoordinates, RealmLatLngBounds polylineBounds) {
this.polylineBounds = polylineBounds;
this.polylineCoordinates = polylineCoordinates;
//Find the scale
Point northeast = smp.toPoint(polylineBounds.getNortheast());
Point southwest = smp.toPoint(polylineBounds.getSouthwest());
scale = polylineSize / Math.max(Math.max(northeast.x, southwest.x), Math.max(northeast.y, southwest.y));
invalidate();
requestLayout();
}
After can I transform the polyline coordinates so that the full size of the view is used?
Edit:
One of the problems that I can see is when converting to x and y, values are two close (precision)

With the help of #pskink I've managed to achieve this
private int polylineSize;
private Paint polyline;
private SphericalMercatorProjection smp;
PointF northeast;
PointF[] points;
PointF southwest;
Path originalPath;
Path transformedPath;
public PolylineView(Context context) {
super(context);
}
public PolylineView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
setupAttributes(attrs);
}
public PolylineView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
polylineSize = (int) context.getResources().getDimension(R.dimen.polyline_size);
setupAttributes(attrs);
}
private void setupAttributes(AttributeSet attrs) {
// Obtain a typed array of attributes
TypedArray a = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.PolylineView, 0, 0);
// Extract custom attributes into member variables
int polylineColor;
try {
polylineColor = a.getColor(R.styleable.PolylineView_polylineColor, Color.BLACK);
} finally {
// TypedArray objects are shared and must be recycled.
a.recycle();
}
polyline = new Paint(Paint.ANTI_ALIAS_FLAG);
polyline.setAntiAlias(true);
polyline.setStyle(Paint.Style.STROKE);
polyline.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
polyline.setStrokeCap(Paint.Cap.ROUND);
polyline.setColor(polylineColor);
smp = new SphericalMercatorProjection(polylineSize);
}
public void setPolylineData(List<LatLng> polylineCoordinates, RealmLatLngBounds polylineBounds) {
originalPath = new Path();
transformedPath = new Path();
Point point = smp.toPoint(polylineBounds.getNortheast());
northeast = new PointF((float) point.x, (float) point.y);
point = smp.toPoint(polylineBounds.getSouthwest());
southwest = new PointF((float) point.x, (float) point.y);
points = new PointF[polylineCoordinates.size()];
for (int i = 0; i < polylineCoordinates.size(); i++) {
point = smp.toPoint(polylineCoordinates.get(i));
points[i] = new PointF((float) point.x, (float) point.y);
}
originalPath.moveTo(points[0].x, points[0].y);
for (PointF p : points) {
originalPath.lineTo(p.x, p.y);
}
RectF src = new RectF(southwest.x, northeast.y, northeast.x, southwest.y);
RectF dst = new RectF(0, 0, polylineSize, polylineSize);
Matrix matrix = new Matrix();
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
originalPath.transform(matrix, transformedPath);
invalidate();
requestLayout();
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(transformedPath, polyline);
}
This view is used on a RecyclerView and the data is set on onBindViewHolder

Android custom view Bitmap memory leak

I've got a custom view in which I need to draw two bitmaps, one is a background, representing the image of a map and one is a pin which will be drawn on top/left position in canvas.
The both images are drawn onDraw and remain the same during the live of the activity that contains the view. After a while I get a
OutOfMemoryError: bitmap size exceeds
VM budget
This means that I have a leak and the bitmaps don't get garbage collected. I asked this question before, but now the situation changed a little. I made a init method where I set the bitmaps I want to use but this still isn't a good approach, the error appears later, but still there.
Here is the code
public class MyMapView extends View {
private int xPos = 0;
private int yPos = 0;
private int space = 0;
private Bitmap resizedBitmap;
private Bitmap position;
private Bitmap mapBitmap;
public void setMapBitmap(Bitmap value) {
this.mapBitmap = value;
}
public MyMapView(Context context) {
super(context);
}
public MyMapView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyMapView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void init(final Context context) {
Paint paint = new Paint();
paint.setFilterBitmap(true);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
resizedBitmap = Bitmap.createScaledBitmap(mapBitmap, height, height, true);
position = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.position);
space = (width - resizedBitmap.getWidth()) / 2;
}
public void destroy()
{
resizedBitmap.recycle();
resizedBitmap=null;
position.recycle();
position=null;
mapBitmap.recycle();
mapBitmap=null;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
}
#Override
protected void onDraw(Canvas canvas) {
if (mapBitmap != null) {
canvas.drawBitmap(resizedBitmap, space, 0, null);
}
if (xPos != 0 && yPos != 0) {
canvas.translate(xPos + space - position.getWidth() / 2, yPos - position.getHeight() / 2);
canvas.drawBitmap(position, new Matrix(), new Paint());
}
}
public void updatePosition(int xpos, int ypos)
{
xPos = xpos;
yPos = ypos;
invalidate();
}
}
I call the setMapBitmap() and init() on onCreate of the activity that contains the view. In there I know what bitmap will be used as map. onPause of the activity I call the destroy() of the view. I still get errors.
I've read this this but I don't know how to adapt it on my case
I AM OPEN TO ANY OTHER SOLUTION. Please note that I need to resize the map bitmap (based on the height of the layout that contains it in mai activity) and still be able to draw the position on correct place.

You obviously have a memory leak. Read how to avoid memory leaks and how to find memory leaks.
Here is a your code refactored to use WeakReference:
public class MyMapView extends View {
private int xPos = 0;
private int yPos = 0;
private int space = 0;
private WeakReference<Bitmap> resizedBitmap;
private WeakReference<Bitmap> position;
private WeakReference<Bitmap> mapBitmap;
public void setMapBitmap(Bitmap value) {
this.mapBitmap = new WeakReference<Bitmap>(value);
}
public MyMapView(Context context) {
super(context);
}
public MyMapView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyMapView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void init(Bitmap mapBitmap) {
Paint paint = new Paint();
paint.setFilterBitmap(true);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
resizedBitmap = new WeakReference<Bitmap>(Bitmap.createScaledBitmap(
mapBitmap, width, height, true));
position = new WeakReference(BitmapFactory.decodeResource(
getContext().getResources(), R.drawable.position));
space = (width - resizedBitmap.get().getWidth()) / 2;
}
// public void destroy() {
// resizedBitmap.recycle();
// resizedBitmap = null;
// position.recycle();
// position = null;
// mapBitmap.recycle();
// mapBitmap = null;
// }
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
MeasureSpec.getSize(heightMeasureSpec));
}
#Override
protected void onDraw(Canvas canvas) {
if (mapBitmap != null) {
canvas.drawBitmap(resizedBitmap.get(), space, 0, null);
}
if (xPos != 0 && yPos != 0) {
canvas.translate(xPos + space - position.get().getWidth() / 2,
yPos - position.get().getHeight() / 2);
canvas.drawBitmap(position.get(), new Matrix(), null);
}
}
public void updatePosition(int xpos, int ypos) {
xPos = xpos;
yPos = ypos;
invalidate();
}
}

Something that marked me in your code is that you don't recycle all your bitmaps apparently. Here are a couple of code snippets that could help:
bmp = getBitmapFromRessourceID(R.drawable.menu);
ratio = (float)this.height/(float)bmp.getScaledHeight(canvas);
temp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth()*ratio), (int) (bmp.getHeight()*ratio-10), false);
bmp.recycle();
bmp = temp;
and:
Bitmap temp = BitmapFactory.decodeResource(context.getResources(), resource, opts);
Bitmap bmp = Bitmap.createBitmap(temp, 0, 0, temp.getWidth(), temp.getHeight(), flip, true);
temp.recycle();