I am trying to get a shadow effect on a text in canvas. The problem I am facing is the shadow that is being created is very dim and showing weird shapes. I am trying to overcome these problems. I am open to suggestions where I can create Images and save to disk without using canvas.
Code:
class MainActivity : AppCompatActivity() {
private lateinit var canvasIV: ImageView
private lateinit var imgBitmap: Bitmap
private lateinit var canvas: Canvas
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
canvasIV = findViewById(R.id.canvasIV)
val displayMetrics = DisplayMetrics()
windowManager.defaultDisplay.getMetrics(displayMetrics)
val height = displayMetrics.heightPixels
val width = displayMetrics.widthPixels
imgBitmap =
Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565)
canvas = Canvas(imgBitmap)
canvas.drawBitmap(imgBitmap, 0f, 0f, null)
val shadowPaint = Paint()
shadowPaint.isAntiAlias = true
shadowPaint.color = Color.parseColor("#F897B9")
val tSize = 80.0f
shadowPaint.textSize = tSize
shadowPaint.strokeWidth = 20.0f
shadowPaint.style = Paint.Style.FILL
shadowPaint.alpha = 0x100
//shadowPaint.setShadowLayer(20.0f, 5f, 5f, Color.parseColor("#F897B9"))
shadowPaint.setShadowLayer(tSize, 5f, 5f, Color.GREEN)
canvas.drawText("Sayok Dey Majumder", 50f, 200f, shadowPaint)
//canvasIV.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
canvasIV.setImageDrawable(BitmapDrawable(resources, imgBitmap))
}
fun convertToPixels(context: Context, nDP: Int): Float {
val conversionScale: Float = context.getResources().getDisplayMetrics().density
return (nDP * conversionScale + 0.5f)
}
fun getTextWidth(text: String, paint: Paint): Int {
val bounds = Rect()
paint.getTextBounds(text, 0, text.length, bounds)
return bounds.left + bounds.width()
}
fun getTextHeight(text: String, paint: Paint): Int {
val bounds = Rect()
paint.getTextBounds(text, 0, text.length, bounds)
return bounds.bottom + bounds.height()
}
}
What I am getting is:
What I am trying to achieve:
The Bitmap with config Bitmap.Config.ARGB_8888 don't support Alpha channel.
Use this instead:
imgBitmap =Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
also the following line don't do anything:
canvas.drawBitmap(imgBitmap, 0f, 0f, null)
Better Solution:
Also, shadow layer has limited capacity and I recommend to draw the shadow manually.
val shadowPaint = Paint(defaultPaint)
// ... here customize shadow paint
canvas.drawText("your text", x, y, defaultPaint);
canvas.drawText("your text", x, y, shadowPaint);
Also, you could extend TextView and override the onDraw function. Here I create customView that add shadow. you could adjust it.
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.TextPaint;
import android.util.AttributeSet;
public class ShadowTextView extends androidx.appcompat.widget.AppCompatTextView {
private TextPaint normalPaint;
private int color;
TextPaint shadowPaint;
public ShadowTextView(Context context) {
super(context);
init();
}
public ShadowTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ShadowTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
normalPaint=new TextPaint(getPaint());
shadowPaint=new TextPaint(getPaint());
shadowPaint.setStyle(Paint.Style.FILL_AND_STROKE);
shadowPaint.setStrokeCap(Paint.Cap.ROUND);
shadowPaint.setStrokeJoin(Paint.Join.ROUND);
shadowPaint.setStrokeWidth(30);
shadowPaint.setMaskFilter(new BlurMaskFilter( 10, BlurMaskFilter.Blur.NORMAL));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.savePaint();
getPaint().set(shadowPaint);
setTextColor(Color.argb(100,255,0,0));
super.onDraw(canvas);
this.restorePaint();
}
public void savePaint() {
normalPaint.set(getPaint());
color=getCurrentTextColor();
}
public void restorePaint() {
getPaint().set(normalPaint);
setTextColor(color);
}
}
Related
I am starting with my first attempts to write an android app. I'd like to to visualize the Monte-Carlo-Approximation for pi. Hence I first want to draw a Circle onto a view but i dont get it working!
I have tried to create my own "CircleView" Class which extends "View" and overwrite the onDraw(..) method like its explained over here: How to draw circle by canvas in Android?
This is my CircleView Class
public class CircleView extends View {
public CircleView(Context context) {
super(context);
}
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(150);
canvas.drawCircle(50,50,20,paint);
}
}
I have inserted the CircleView into a LinearLayout with the following XML-code
<com.tak3r07.montecarlopi.CircleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/circleView"
android:layout_weight="1"/>
(Btw Android Studio is telling me in the XML-view at the right side: "Rendering Problems Custom view CircleView is not using the 2- or 3-argument View constructors; XML attributes will not work")
The App just crashes with the following log: http://pastebin.com/Gv1GaHtX
Can someone tell what i did wrong?
I thought this setup would create an activity with a view which displays a circle.
Regards
Edit: Crash is fixed by adding the 2 and 3 Parameter Constructor in CircleView (See https://stackoverflow.com/a/13797457/3248708)
But now i still do not see any Circle in the activity
A couple of observations:
You need to take into account the width and height assigned to your view when determining your circle's center point and radius.
You should take into account the padding assigned to your View so you don't draw in that reserved portion.
You should avoid allocating objects within your onDraw method since this gets called a lot.
In order to allow your view to be specified in an XML layout, you need to provide the constructor that takes a Context and an AttributeSet. The AttributeSet is the mechanism by which your XML attributes are passed to your view.
Give this a try:
package com.tak3r07.montecarlopi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class CircleView extends View
{
private static final int DEFAULT_CIRCLE_COLOR = Color.RED;
private int circleColor = DEFAULT_CIRCLE_COLOR;
private Paint paint;
public CircleView(Context context)
{
super(context);
init(context, null);
}
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs)
{
paint = new Paint();
paint.setAntiAlias(true);
}
public void setCircleColor(int circleColor)
{
this.circleColor = circleColor;
invalidate();
}
public int getCircleColor()
{
return circleColor;
}
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
int w = getWidth();
int h = getHeight();
int pl = getPaddingLeft();
int pr = getPaddingRight();
int pt = getPaddingTop();
int pb = getPaddingBottom();
int usableWidth = w - (pl + pr);
int usableHeight = h - (pt + pb);
int radius = Math.min(usableWidth, usableHeight) / 2;
int cx = pl + (usableWidth / 2);
int cy = pt + (usableHeight / 2);
paint.setColor(circleColor);
canvas.drawCircle(cx, cy, radius, paint);
}
}
You can create a Circular layout and inside this view, every childs should be rounded up :
public class CircleView extends FrameLayout {
private Bitmap maskBitmap;
private Paint paint, maskPaint;
public CircleView(Context context) {
super(context);
init();
}
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public CircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
setWillNotDraw(false);
}
#Override
public void draw(Canvas canvas) {
Bitmap offscreenBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas offscreenCanvas = new Canvas(offscreenBitmap);
super.draw(offscreenCanvas);
if (maskBitmap == null) {
maskBitmap = createMask(getWidth(), getHeight());
}
offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
}
private Bitmap createMask(int width, int height) {
Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
Canvas canvas = new Canvas(mask);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
canvas.drawRect(0, 0, width, height, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRoundRect(new RectF(0, 0, width, height), width/2f, height/2f, paint);
return mask;
}
}
I'm having trouble with a library I got from the GitHub.
The Library leads to round an image. The rounding part works very well, but the image resizing doesn't do as great as the rest. It differs from image to image and I'd like to make this work to resize any image to the size of my View on android. For example, if I call this with android:layout_width="100dp" , I'd like to the image to be resized that much.
Thank you very much for your time.
This is the library:
package com.roundimage.support;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.provider.MediaStore;
import android.util.AttributeSet;
import android.widget.ImageView;
public class CircularImageView extends ImageView {
private int borderWidth = 3;
private int viewWidth;
private int viewHeight;
private Bitmap image;
private Paint paint;
private Paint paintBorder;
private BitmapShader shader;
public CircularImageView(Context context) {
super(context);
setup();
}
public CircularImageView(Context context, AttributeSet attrs) {
super(context, attrs);
setup();
}
public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setup();
}
private void setup()
{
// init paint
paint = new Paint();
paint.setAntiAlias(true);
paintBorder = new Paint();
setBorderColor(Color.WHITE);
paintBorder.setAntiAlias(true);
}
public void setBorderWidth(int borderWidth)
{
this.borderWidth = borderWidth;
this.invalidate();
}
public void setBorderColor(int borderColor)
{
if(paintBorder != null)
paintBorder.setColor(borderColor);
this.invalidate();
}
private void loadBitmap()
{
BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();
if(bitmapDrawable != null)
image = bitmapDrawable.getBitmap();
}
#SuppressLint("DrawAllocation")
#Override
public void onDraw(Canvas canvas)
{
//load the bitmap
loadBitmap();
// init shader
if(image !=null)
{
shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
int circleCenter = viewWidth / 2;
// circleCenter is the x or y of the view's center
// radius is the radius in pixels of the cirle to be drawn
// paint contains the shader that will texture the shape
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder);
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter, paint);
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int width = measureWidth(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec, widthMeasureSpec);
viewWidth = width - (borderWidth *2);
viewHeight = height - (borderWidth*2);
setMeasuredDimension(width, height);
}
private int measureWidth(int measureSpec)
{
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text
result = viewWidth;
}
return result;
}
private int measureHeight(int measureSpecHeight, int measureSpecWidth) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpecHeight);
int specSize = MeasureSpec.getSize(measureSpecHeight);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text (beware: ascent is a negative number)
result = viewHeight;
}
return result;
}
}
This is how I call it on XML:
<com.roundimage.support.CircularImageView
android:id="#+id/item_pic"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/example_id" />
How this stays like:
And how the image really is:
And for different images with different sizes, for different devices with diferent resolution, the image appear in a different way..
Ok, your code should work well, But it put image in image view without resize to fit in viewer, because you had these results.
Try adding this in layout:
android:scaleType="fitCenter"
Read mode about this in this tutorial: http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2
Try using scaleType in the xml to be fitXY
android:ScaleType = "fitXY"
Or programmatically
imageview.setScaleType (ScaleType.FITXY)
If it doesn't work try another scaletype.
EDIT: See this post here.
#youssefhassan link points it out correctly:
You have to resize your image bitmap to desired size:
`
private void loadBitmap()
{
BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();
if(bitmapDrawable != null) {
int size = getPixelsFromDp(70);
Bitmap imageRealSize = bitmapDrawable.getBitmap();
image = Bitmap.createScaledBitmap(imageRealSize, size, size, true);
}
}
`
Where 'getPixelsFromDp' is a function to get dp's you added on xml in pixels (you can find load of pages to get its implementation)
I want to draw circle by canvas. Here is my code:
[MyActivity.java]:
public class MyActivity extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
...
setContentView(new View(this,w,h));
}
}
[View.java]:
public class View extends SurfaceView
{
public View(Context context, int w, int h)
{
super(context);
Canvas grid = new Canvas(Bitmap.createBitmap(h,w, Bitmap.Config.ARGB_8888));
grid. drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
grid.drawCircle(w/2, h/2 , w/2, paint);
}
}
So I have just black screen without circle.
Why it does not work? How to fix it?
You can override the onDraw method of your view and draw the circle.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, paint);
}
For a better reference on drawing custom views check out the official Android documentation.
http://developer.android.com/training/custom-views/custom-drawing.html
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View
{
Paint paint = null;
public MyView(Context context)
{
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas)
{
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);
}
}
}
Edit
if you want to draw circle at centre. You could also translate your entire canvas to center then draw circle at center.using
canvas.translate(getWidth()/2f,getHeight()/2f);
canvas.drawCircle(0,0, radius, paint);
These two link also help
http://www.compiletimeerror.com/2013/09/introduction-to-2d-drawing-in-android.html#.VIg_A5SSy9o
http://android-coding.blogspot.com/2012/04/draw-circle-on-canvas-canvasdrawcirclet.html
public class CircleView extends View {
private static final String COLOR_HEX = "#E74300";
private final Paint drawPaint;
private float size;
public CircleView(final Context context, final AttributeSet attrs) {
super(context, attrs);
drawPaint = new Paint();
drawPaint.setColor(Color.parseColor(COLOR_HEX));
drawPaint.setAntiAlias(true);
setOnMeasureCallback();
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(size, size, size, drawPaint);
}
private void setOnMeasureCallback() {
ViewTreeObserver vto = getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
removeOnGlobalLayoutListener(this);
size = getMeasuredWidth() / 2;
}
});
}
#TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void removeOnGlobalLayoutListener(ViewTreeObserver.OnGlobalLayoutListener listener) {
if (Build.VERSION.SDK_INT < 16) {
getViewTreeObserver().removeGlobalOnLayoutListener(listener);
} else {
getViewTreeObserver().removeOnGlobalLayoutListener(listener);
}
}
}
Xml example: will produce a circle of 5dp
<com.example.CircleView
android:layout_width="10dp"
android:layout_height="10dp"/>
If you are using your own CustomView extending View class, you need to call canvas.invalidate() method which will internally call onDraw method. You can use default API for canvas to draw a circle. The x, y cordinate define the center of the circle. You can also define color and styling in paint & pass the paint object.
public class CustomView extends View {
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
setupPaint();
}
}
Define default paint settings and canvas (Initialise paint in constructor so that you can reuse the same object everywhere and change only specific settings wherever required)
private Paint drawPaint;
// Setup paint with color and stroke styles
private void setupPaint() {
drawPaint = new Paint();
drawPaint.setColor(Color.BLUE);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(5);
drawPaint.setStyle(Paint.Style.FILL_AND_STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
}
And initialise canvas object
private Canvas canvas;
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
canvas.drawCircle(xCordinate, yCordinate, RADIUS, drawPaint);
}
And finally, for every view refresh or new draw on the screen, you need to call invalidate method. Remember your entire view is redrawn, hence this is an expensive call. Make sure you do only the necessary operations in onDraw
canvas.invalidate();
For more details on canvas drawing refer https://medium.com/#mayuri.k18/android-canvas-for-drawing-and-custom-views-e1a3e90d468b
#Override
public void onDraw(Canvas canvas){
canvas.drawCircle(xPos, yPos,radius, paint);
}
Above is the code to render a circle. Tweak the parameters to your suiting.
Try this
The entire code for drawing a circle or download project source code and test it on your android studio. Draw circle on canvas programmatically.
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.widget.ImageView;
public class Shape {
private Bitmap bmp;
private ImageView img;
public Shape(Bitmap bmp, ImageView img) {
this.bmp=bmp;
this.img=img;
onDraw();
}
private void onDraw(){
Canvas canvas=new Canvas();
if (bmp.getWidth() == 0 || bmp.getHeight() == 0) {
return;
}
int w = bmp.getWidth(), h = bmp.getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bmp, w);
img.setImageBitmap(roundBitmap);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f, finalBitmap.getHeight() / 2 + 0.7f, finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
Here is example to draw stroke circle canvas
val paint = Paint().apply {
color = Color.RED
style = Paint.Style.STROKE
strokeWidth = 10f
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawCircle(200f, 100f, 100f, paint)
}
Result
Example to draw solid circle canvas
val paint = Paint().apply {
color = Color.RED
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawCircle(200f, 100f, 100f, paint)
}
Result
Hope it help
private Paint green = new Paint();
private int greenx , greeny;
green.setColor(Color.GREEN);
green.setAntiAlias(false);
canvas.drawCircle(greenx,greeny,20,green);
I want to display text as below in my app. I am using Paint class with style FILL_AND_STROKE to achieve this. But only one method setColor() is available to set the color.
How do I set different stroke and fill colors?
Inside custom TextView (does not work in EditText):
#Override
public void onDraw(Canvas canvas)
{
final ColorStateList textColor = getTextColors();
TextPaint paint = this.getPaint();
paint.setStyle(Style.STROKE);
paint.setStrokeJoin(Join.ROUND);
paint.setStrokeMiter(10);
this.setTextColor(strokeColor);
paint.setStrokeWidth(strokeWidth);
super.onDraw(canvas);
paint.setStyle(Style.FILL);
setTextColor(textColor);
super.onDraw(canvas);
}
Don't use FILL_AND_STROKE. Draw once with FILL and then change the color and draw with STROKE.
(That works for rectangles. I'm not sure STROKE works at all for text. You'll have to try it and find out.)
I used the first solution above to come up with this idea: put down a larger STROKE, text and then overlay it with a smaller FILL_AND_STROKE text:
mScorePaint = new TextPaint();
mScorePaint.setTextSize(63);
mScorePaint.setStyle(Style.STROKE);
mScorePaint.setStrokeJoin(Join.ROUND);
mScorePaint.setStrokeMiter(10.0f);
mScorePaint.setStrokeWidth(frameWidth/50.0f); // about 12
mScorePaint.setColor(0xffff0000); // black
c.drawText(Integer.toString(mScore), x, y, mScorePaint); // red first
mScorePaint.setStrokeWidth(frameWidth/125.0f); // about 5
mScorePaint.setColor(0xff000000); // red
c.drawText(Integer.toString(mScore), x, y, mScorePaint); // black on top
Because the FILL alone was not seeing any of the Stroke attributes and was coming out very thin.
import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.Paint.Join
import android.graphics.Rect
import android.util.AttributeSet
import android.widget.TextView
#SuppressLint("AppCompatCustomView")
class BorderTextView #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextView(context, attrs, defStyleAttr) {
private var strokeWidth: Float = 0F
private val paintStroke = Paint(Paint.ANTI_ALIAS_FLAG)
init {
paint.color = currentTextColor
paint.typeface = typeface
if (attrs != null) {
val a = context.obtainStyledAttributes(attrs, R.styleable.BorderTextView)
if (a.hasValue(R.styleable.BorderTextView_strokeColor)) {
strokeWidth =
a.getDimensionPixelSize(R.styleable.BorderTextView_strokeWidth, 1).toFloat()
val strokeColor = a.getColor(R.styleable.BorderTextView_strokeColor, 0)
val strokeMiter =
a.getDimensionPixelSize(R.styleable.BorderTextView_strokeMiter, 10).toFloat()
var strokeJoin: Join? = null
when (a.getInt(R.styleable.BorderTextView_strokeJoinStyle, 2)) {
0 -> strokeJoin = Join.MITER
1 -> strokeJoin = Join.BEVEL
2 -> strokeJoin = Join.ROUND
}
setStroke(strokeWidth, strokeColor, strokeJoin, strokeMiter)
}
a.recycle()
}
}
private fun setStroke(width: Float, color: Int, join: Join?, miter: Float) {
paintStroke.strokeJoin = join
paintStroke.strokeMiter = miter
paintStroke.strokeWidth = width
paintStroke.style = Paint.Style.STROKE
paintStroke.color = color
paintStroke.textSize = textSize
paintStroke.typeface = typeface
paintStroke.letterSpacing = letterSpacing
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
this.setMeasuredDimension(measuredWidth + strokeWidth.toInt(), measuredHeight);
}
override fun onDraw(canvas: Canvas) {
val r = Rect()
paint.getTextBounds(text.toString(), 0, text.length, r)
val desc = paint.descent()
val asc = paint.ascent()
val y = (height.toFloat() - (1 + asc + desc / 2F)) / 2F
val x = width / 2f - r.width() / 2f - r.left
canvas.drawText(text.toString(), x, y, paintStroke)
canvas.drawText(text.toString(), x, y, paint)
}
}
First draw stroke, then draw text.
WARNING: setTextColor will call onDraw recursively, so you need avoid this, see 'callInvalidate' flag.
class StrokeTextView #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.textViewStyle
) : AppCompatTextView(context, attrs, defStyleAttr) {
private val realTextColor: ColorStateList = textColors
private var strokeColor: ColorStateList? = null
private var strokeWidth: Float? = null
private var callInvalidate = true
init {
context.obtainStyledAttributes(attrs, R.styleable.StrokeTextView, defStyleAttr, 0).use {
strokeColor = it.getColorStateList(R.styleable.StrokeTextView_stroke_color)
strokeWidth = it.getDimension(R.styleable.StrokeTextView_stroke_width, 0F)
}
}
override fun onDraw(canvas: Canvas) {
if (strokeWidth != null && strokeWidth!! > 0 && strokeColor != null) {
//stroke
setTextColorOnDraw(strokeColor!!)
paint.style = Paint.Style.STROKE
paint.strokeWidth = strokeWidth!!
super.onDraw(canvas)
//text
setTextColorOnDraw(realTextColor)
paint.style = Paint.Style.FILL
paint.strokeWidth = 0F
super.onDraw(canvas)
} else {
//default
super.onDraw(canvas)
}
}
override fun invalidate() {
if (callInvalidate) {
super.invalidate()
}
}
/**
* Call setTextColor in OnDraw.
*/
private fun setTextColorOnDraw(colors: ColorStateList) {
callInvalidate = false
setTextColor(colors)
callInvalidate = true
}
not perfectly sure, but maybe you could use this:
link
TextView test = (TextView) findViewById(R.id.test);
test.setShadowLayer(float, float, float, int);
I would like to change an image I loaded to have round corners.
Any hints, tutorials, best practices you know of?
For a more controlled method draw a rounded rectangle and mask it onto your image using the porter-duff Xfer mode of the paint.
First setup the Xfer paint and the rounded bitmap:
Bitmap myCoolBitmap = ... ; // <-- Your bitmap you want rounded
int w = myCoolBitmap.getWidth(), h = myCoolBitmap.getHeight();
// We have to make sure our rounded corners have an alpha channel in most cases
Bitmap rounder = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(rounder);
// We're going to apply this paint eventually using a porter-duff xfer mode.
// This will allow us to only overwrite certain pixels. RED is arbitrary. This
// could be any color that was fully opaque (alpha = 255)
Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
xferPaint.setColor(Color.RED);
// We're just reusing xferPaint to paint a normal looking rounded box, the 20.f
// is the amount we're rounding by.
canvas.drawRoundRect(new RectF(0,0,w,h), 20.0f, 20.0f, xferPaint);
// Now we apply the 'magic sauce' to the paint
xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
Now apply this bitmap ontop of your image:
Bitmap result = Bitmap.createBitmap(myCoolBitmap.getWidth(), myCoolBitmap.getHeight() ,Bitmap.Config.ARGB_8888);
Canvas resultCanvas = new Canvas(result)
resultCanvas.drawBitmap(myCoolBitmap, 0, 0, null);
resultCanvas.drawBitmap(rounder, 0, 0, xferPaint);
Bitmap with rounded corners now resides in result.
Why not use clipPath?
protected void onDraw(Canvas canvas) {
Path clipPath = new Path();
float radius = 10.0f;
float padding = radius / 2;
int w = this.getWidth();
int h = this.getHeight();
clipPath.addRoundRect(new RectF(padding, padding, w - padding, h - padding), radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
Romain Guy himself writes about this in his blog:
To generate the rounded images I simply wrote a custom Drawable that
draws a rounded rectangle using Canvas.drawRoundRect(). The trick is
to use a Paint with a BitmapShader to fill the rounded rectangle with
a texture instead of a simple color. Here is what the code looks like:
BitmapShader shader;
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
RectF rect = new RectF(0.0f, 0.0f, width, height);
// rect contains the bounds of the shape
// radius is the radius in pixels of the rounded corners
// paint contains the shader that will texture the shape
canvas.drawRoundRect(rect, radius, radius, paint);
The sample application goes a little further and fakes a vignette
effect by combining the BitmapShader with a RadialGradient.
Here's a way I discovered to do it with an ImageView. I tried other methods, including the answers here and on similar questions, but I found that they didn't work well for me, as I needed the corners to be applied to the image view and not directly to the bitmap. Applying directly to the bitmap won't work if you're scaling/cropping/panning that bitmap, since the corners will also be scaled/cropped/panned.
public class RoundedCornersImageView extends ImageView {
private final Paint restorePaint = new Paint();
private final Paint maskXferPaint = new Paint();
private final Paint canvasPaint = new Paint();
private final Rect bounds = new Rect();
private final RectF boundsf = new RectF();
public RoundedCornersImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public RoundedCornersImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RoundedCornersImageView(Context context) {
super(context);
init();
}
private void init() {
canvasPaint.setAntiAlias(true);
canvasPaint.setColor(Color.argb(255, 255, 255, 255));
restorePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
maskXferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
}
#Override
protected void onDraw(Canvas canvas) {
canvas.getClipBounds(bounds);
boundsf.set(bounds);
canvas.saveLayer(boundsf, restorePaint, Canvas.ALL_SAVE_FLAG);
super.onDraw(canvas);
canvas.saveLayer(boundsf, maskXferPaint, Canvas.ALL_SAVE_FLAG);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(boundsf, 75, 75, canvasPaint);
canvas.restore();
canvas.restore();
}
}
Here's an alternative that uses hardware layers for the final layer composite:
public class RoundedCornersImageView extends ImageView {
private final Paint restorePaint = new Paint();
private final Paint maskXferPaint = new Paint();
private final Paint canvasPaint = new Paint();
private final Rect bounds = new Rect();
private final RectF boundsf = new RectF();
public RoundedCornersImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public RoundedCornersImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RoundedCornersImageView(Context context) {
super(context);
init();
}
private void init() {
canvasPaint.setAntiAlias(true);
canvasPaint.setColor(Color.argb(255, 255, 255, 255));
restorePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
maskXferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
setLayerType(View.LAYER_TYPE_HARDWARE, restorePaint);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.getClipBounds(bounds);
boundsf.set(bounds);
super.onDraw(canvas);
canvas.saveLayer(boundsf, maskXferPaint, Canvas.ALL_SAVE_FLAG);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(boundsf, 75, 75, canvasPaint);
canvas.restore();
}
}
At first I wasn't able to get it to work with this method because my corners were becoming black; I later realized what the problem was after reading this question: Android how to apply mask on ImageView?. It turns out that modifying the alpha in the canvas is actually "scratching it out" directly on the screen, and punching a hole to the underlying window which is black. That's why two layers are needed: one to apply the mask, and another to apply the composited image to the screen.
How about creating a NinePatchDrawable image that has just rounded corners and has a transparent body. Overlay your image with an appropriately re-sized version of your NinePatchDrawable.
package com.pkg;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.os.Bundle;
import android.os.Environment;
import android.widget.ImageView;
public class RoundedImage extends Activity {
/** Called when the activity is first created. */
ImageView imag;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imag=(ImageView)findViewById(R.id.image);
//ImageView img1=(ImageView)findViewById(R.id.imageView1);
BitmapFactory.Options bitopt=new BitmapFactory.Options();
bitopt.inSampleSize=1;
// String img=Environment.getExternalStorageDirectory().toString();
// String filepath =Environment.getExternalStorageDirectory().toString();
String filepath ="/mnt/sdcard/LOST.DIR";
File imagefile = new File(filepath + "/logo.jpg");
FileInputStream fis = null;
try
{
fis = new FileInputStream(imagefile);
}
catch (FileNotFoundException e1)
{
// TODO Auto-generated catch block
e1.printStackTrace();
}
Bitmap bi = BitmapFactory.decodeStream(fis);
if(bi!=null){
imag.setImageBitmap(getRoundedCornerBitmap(bi));
}
}
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
}
Here's another rounded ImageView implementation using Path. The performance is great, but in certain conditions some bugs may appear on emulators because of the hardware drawing.
public class RoundImageView extends ImageView {
private Path mPath;
private RectF mRect;
private Paint mPaint;
private int mCornerRadius;
private float mImageAlpha;
private boolean mIsCircular;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.roundImageViewStyle);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(
attrs, R.styleable.RoundImageView, defStyle, 0);
mCornerRadius = a.getDimensionPixelSize(R.styleable.RoundImageView_cornerRadius, 0);
mIsCircular = a.getBoolean(R.styleable.RoundImageView_isCircular, false);
mImageAlpha = a.getFloat(R.styleable.RoundImageView_imageAlpha, 1);
a.recycle();
setAlpha((int) (mImageAlpha * 255));
// Avoid expensive off-screen drawing
setLayerType(LAYER_TYPE_HARDWARE, null);
mPath = new Path();
mRect = new RectF();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
if (mIsCircular) {
float halfWidth = canvas.getWidth() / 2;
float halfHeight = canvas.getHeight() / 2;
float radius = Math.max(halfWidth, halfHeight);
mPath.addCircle(halfWidth, halfHeight, radius, Path.Direction.CW);
} else {
mRect.right = canvas.getWidth();
mRect.bottom = canvas.getHeight();
mPath.addRoundRect(mRect, mCornerRadius, mCornerRadius, Path.Direction.CW);
}
canvas.drawPath(mPath, mPaint);
}
}
P.S. Learn OpenGL ES provided the best solution. It's very smooth and works on emulators too.
best solution I found ->
1) create rounded corner drawable. And set to imageview as background.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="10dp" /></shape>
2) Then set image view object property of setClipToOutline(true) in java code.
imageview.setClipToOutline(true);
It works like charm