I am trying to achieve the effect of creating a view with a custom shape(almost rectangular).
Here is what i tried to do:
public class CustomHeaderview extends View {
public CustomHeaderview(Context context) {
super(context);
}
public CustomHeaderview(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomHeaderview(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
Paint paint = new Paint();
#Override
public void draw(Canvas canvas) {
paint.setColor(Color.GRAY);
paint.setStyle(Style.FILL);
Path wallpath = new Path();
wallpath.reset(); // only needed when reusing this path for a new build
wallpath.moveTo(100, 100); // used for first point
wallpath.lineTo(100, 200);
wallpath.lineTo(200, 200);
wallpath.lineTo(150, 100);
wallpath.lineTo(100, 100);// there is a setLastPoint action but i found it not to work as expected
canvas.drawPath(wallpath, paint);
super.draw(canvas);
}
}
and the XML:
<CustomHeaderview
android:layout_width="152dp"
android:layout_height="152dp" />
EDIT
Thanks Dmitry, it works perfectly now!
You providing fancy coordinates for you rectangle:
x1: 100
y1: 100
x2: 100
y2: 120
So, you're getting rectangle with 0 width, thats why it is invisible.
Related
I have 12 lines I've created using the following class
public class LineView extends View {
private Paint paint = new Paint();
private PointF pointA,pointB;
// private void init() {
// paint.setColor(Color.BLACK);
// }
public LineView(Context context) {
super(context);
// init();
}
public LineView(Context context, AttributeSet attrs) {
super(context, attrs);
// init();
}
public LineView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// init();
}
#SuppressLint("ResourceAsColor")
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
int color = R.color.GradientStart;
paint.setColor(color);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(5);
//canvas.drawLine(x1, y1, x2, y2, paint);
canvas.drawLine(pointA.x, pointA.y, pointB.x, pointB.y, paint);
}
public void setPointA(PointF point){
pointA=point;
}
public void setPointB(PointF point){
pointB=point;
}
public void draw(){
invalidate();
requestLayout();
}
}
Instead of lines I what lines with arrows. The line with arrow will be drawn between buttons.
How can I add arrows to one end of my lines?
It would like like this when complete.
thanks
JN
I found two way for achieve your requirement.
1) To use nine patch image. I have tried to make nine patch image for you please use it
2) You can use vector image for it.
Tell me still you not getting solution.
I am trying to draw a Rectangle but with INVERSE_WINDING. This works as expected in the case of LAYER_TYPE_SOFTWARE, but weirdly in case of Hardware Acceleration. The below are the results:
CODE:
public class PathView extends View {
private final Paint mPaint;
public PathView(Context context) {
this(context, null, 0);
}
public PathView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public PathView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// setLayerType(LAYER_TYPE_SOFTWARE, null); // Toggle this!!!
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.RED);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final Path path = new Path();
path.addRect(50,50,400,400, Path.Direction.CCW); // CCW or CW, same result
path.close(); // same result even if I didn't close the path
path.setFillType(Path.FillType.INVERSE_WINDING);
canvas.drawPath(path, mPaint);
}
}
Why is Android behaving this way? I read the documentation on What can't be done in Hardware Acceleration, but it never mentioned anything on Path.FillType.
How do I get the same behavior in Hardware Acceleration as well?
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
I am developing a maths app in which i have to use numbers with bar on top. check this link http://en.wikipedia.org/wiki/Overline
Also how to use Exponentiation like in the following link http://en.wikipedia.org/wiki/Exponentiation in xml file.
This is not the perfect solution but it will give you the idea for text overline.
public class OverLineTextView extends TextView {
private Paint paint;
public OverLineTextView(Context context) {
super(context);
init();
}
public OverLineTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public OverLineTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.GREEN);
paint.setStyle(Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float width = getPaint().measureText(getText().toString());
canvas.drawLine(getTotalPaddingLeft(), getTotalPaddingTop() + 1,
getTotalPaddingLeft() + width, getTotalPaddingTop() + 1, paint);
}
}