Develop Reference

How to add a imageView in the centre of a customView?

I have a custom view that is a circle. Here is the code for my CircleView:
public class CircleView extends View {
private static final int START_ANGLE_POINT = 90;
private final Paint paint;
private final RectF rect;
private float angle;
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
final int strokeWidth = 40;
paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(strokeWidth);
//Circle color
paint.setColor(Color.RED);
rect = new RectF(strokeWidth, strokeWidth, 1000 + strokeWidth, 1000 + strokeWidth);
//Initial angle is zero
angle = 0;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint);
}
public float getAngle() {
return angle;
}
public void setAngle(float angle) {
this.angle = angle;
} }
and here is how I declare it in the xml layout of an activity:
<com.my_package.ui.recording.CircleView
android:id="#+id/circleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
All standard stuff. This is how my custom image looks like
Now, I want to place an imageView in the centre on the circleView? Does any one know how can I achieve that?
This is ideally what I would like to end up with:
Thank you in advance.

If you aren't set on using an ImageView and really just want to draw the bitmap in the center then have a look at canvas' drawBitmap method. This will allow you to draw it however/wherever you want.

Using matrix.mapPoints(). I want to convert screen coordinate into a matrix point of an Imageview. Any suggestions?

So I have a custom ImageView on screen,on which scale and move gestures are applied using matrix transformation. There's a red marker like imageview exactly at the center of the custom Imageview (look at the screenshot attached).
Now when I press the 'Add checkpoint' button, a green dot should appear on the canvas exactly below the marker like imageview, and should stick with imageview and move along when I scale or move the image. I did that using matrix.mapPoints().
The problem is that the point is not appearing exactly below the marker,
even though I passed the marker imageview's coordinates to the mapPoints() function.
onClick for 'Add CheckPoint' button -
checkpointBt.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
iv.drawRect = true;
iv.x = marker_iv.getX(); //marker_iv is red marker imageview
iv.y = marker_iv.getY();
iv.invalidate();
}
});
Custom ImageView class -
public class DrawImageView extends ImageView {
private Paint currentPaint;
public boolean drawRect = false;
public float x;
public float y;
public Bitmap newBitmap;
public Matrix matrix;
public DrawImageView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
currentPaint = new Paint();
currentPaint.setDither(true);
currentPaint.setColor(0xFF00CC00);
currentPaint.setStyle(Paint.Style.STROKE);
currentPaint.setStrokeJoin(Paint.Join.ROUND);
currentPaint.setStrokeCap(Paint.Cap.ROUND);
currentPaint.setStrokeWidth(60);
}
#SuppressLint("NewApi")
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (drawRect) {
float[] pts = {x, y};
Matrix matrix = this.getImageMatrix();
matrix.mapPoints(pts);
System.out.println("Rushi : NewPoint : " + pts[0] + "," + pts[1]);
canvas.drawPoint(pts[0], pts[1], currentPaint);
}
}
}

How to make a dynamic gradient effect in a dynamically generated view?

I have to make a gradient color effect in the view that generated dynamically according to the scenario and also the view would be of any shape (diagonal or square)
As shown in image, gradient effect could be in any shape.
Also, if I create custom view for every possible case and play with Visibility, then how I will manage these views to fit perfectly on every device screen size?
Just need a small help to start.
Thanks in advance.

I have solved the issue using this approach.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView(this));
}
}
and now create a CustomView class
public class CustomView extends View {
Rect rect;
private Rect rectangle;
private Paint paint;
public CustomView(Context context) {
super(context);
int x = 50;
int y = 50;
int sideLength = 200;
int sideLength1 = 100;
rectangle = new Rect(x, y, sideLength, sideLength1);
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
int width = this.getMeasuredWidth();
int height = this.getMeasuredHeight();
BitmapShader shader;
//shader = new BitmapShader(header, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//paint.setShader(shader);
Path path = new Path();
path.moveTo(40,40);
path.lineTo(5,height/2);
path.lineTo(width/2,height/4);
path.lineTo(width/2,0);
canvas.drawPath(path,paint);
}

Android dynamic Bubbles on the view

Can anyone how to make dynamic bubble on the Android layout which is clickable.
My designer thought for the screen is below [![I the image all the bubble are some set of task assigned to the user.The label of bubble changes according to the task ][1]][1]
According to my project requirement the color and radius will change as per the api response.
Can you please suggest any demo or example. I googled it but i cant find the answer for this. Please guide me to accomplish this .

As one answer is already posted, I also tried for you. Hope you get some help from here too :
public class BubbleBackgroundDemoActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
View view = new CustomView(this);
// RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(this.getWidth(),
// ViewGroup.LayoutParams.MATCH_PARENT);
// view.setLayoutParams(lp);
setContentView(view);
}
public class CustomView extends View {
private Paint paint;
int screenWidth, screenHeight;
public CustomView(Context context) {
super(context);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
screenWidth = displaymetrics.widthPixels;
screenHeight = displaymetrics.heightPixels;
// create the Paint and set its color
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
canvas.drawCircle(200, 200, 100, paint);
canvas.drawCircle(screenWidth-200, 200, 100, paint);
canvas.drawCircle(screenWidth/2, screenHeight/2, 300, paint);
canvas.drawCircle(screenWidth-200, screenHeight-200, 100, paint);
canvas.drawCircle(200, screenHeight-200, 100, paint);
}
}
}

This is how customize circle created you can refere various links to create circle on canvas dynamically
public class CustomView extends View {
private Paint paint;
public CustomView(Context context) {
super(context);
// create the Paint and set its color
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
canvas.drawCircle(200, 200, 100, paint);
}
}
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView(this));
}
}

Android bitmap mask clear doesn't stick

I have a class called MaskView:
public class MaskView extends View
{
private Context context;
public Bitmap imageMask;
public int maskXPos;
public int maskYPos;
private Paint maskPaint;
public MaskView(Context context)
{
super(context);
this.context = context;
maskXPos = 0;
maskYPos = 0;
maskPaint = new Paint();
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
// 90% alpha
this.setBackgroundColor(Color.argb(230, 0, 0, 0));
}
#Override public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.save();
if(imageMask != null)
{
canvas.drawBitmap(imageMask, maskXPos, maskYPos, maskPaint);
}
canvas.restore();
}
}
At the moment, I got an Activity that fades in my mask using alpha fade in animation.
During the animation, I see my black mask overlay with the circular cutout bitmap mask.
However, after the mask view finish animating in, the bitmap mask instead of staying transparent, it gets rendered, and so I see a black circular bitmap instead of circular hole in my Mask view.
Is there a way to get the bitmap mask to remain a bitmap mask, and not get rendered?

I found the solution...after a few hours :D
Needed one line extra:
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
I don't know what the implications are for setting the layer type to software, but on my Galaxy Nexus, the view is rendering fine with animation. Doesn't seem to be any bad performance here.
Here's full code:
public class MaskView extends View
{
private Context context;
public Bitmap imageMask;
public int maskXPos;
public int maskYPos;
private Paint maskPaint;
public MaskView(Context context)
{
super(context);
setClickable(true);
this.context = context;
maskXPos = 0;
maskYPos = 0;
maskPaint = new Paint();
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
// ------------------------------------------------------
// This line is needed for the mask to work
// ------------------------------------------------------
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
#Override public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawColor(Color.argb(230, 0, 0, 0));
if(imageMask != null)
{
canvas.drawBitmap(imageMask, maskXPos, maskYPos, maskPaint);
}
}
}
I discovered the solution after trying out this tutorial:
https://medium.com/#rgomez/android-how-to-draw-an-overlay-with-a-transparent-hole-471af6cf3953#.7uxgln7n4
Hope it helps others.