I want to achieve the following effect in Android:
http://i.imgur.com/SPwQuNq.png
I am pretty close using the method below, but I now need it to clear the background while the text still is there. The overlay text also has a light tint – because of #setColor(Color.WHITE) – but without it no text is shown.
public static Bitmap filterTextLetters(Bitmap bitmap, String text) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setTextAlign(Align.CENTER);
paint.setTypeface(Typeface.DEFAULT_BOLD);
paint.setTextSize(180);
paint.setXfermode(new PixelXorXfermode(Color.BLACK));
Bitmap photo = bitmap.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(photo);
canvas.drawText(text, Statics.PHOTO_WIDTH / 2, Statics.PHOTO_HEIGHT / 2, paint);
return photo;
}
You can use a BitmapShader:
public static Bitmap filterTextLetters(Bitmap bitmap, String text) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextAlign(Align.CENTER);
paint.setTypeface(Typeface.DEFAULT_BOLD);
paint.setTextSize(180);
Shader shader = new BitmapShader(
bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
final int width = bitmap.getWidth();
final int height = bitmap.getHeight();
Bitmap photo = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(photo);
canvas.drawText(text, width / 2, height / 2, paint);
return photo;
}
Related
I have a question regarding a circular ImageView. When I try to set the background color of my ImageView, it actually ends up being a square and not a circle when in reality I would want the ImageView to be a simple circular ImageView with some text as the image. Here was my attempt.
ImageView imageView = postViewHolder.fourthCommenter;
Bitmap b=Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(b);
c.drawCircle(b.getWidth()/2, b.getHeight()/2, b.getWidth()/2, paint);
c.drawText("+10",30,30,paint);
imageView.setBackgroundColor(ContextCompat.getColor(context, R.color.material_color_grey_200));
imageView.setImageBitmap(b);
All I want is to have the image show a grey circular Imageview with the word "+10" in it. What shows up is a simple square Imageview with no text in it. I can't see what I am doing wrong.
Any help would be apprecaited.
Thanks!
EDIT: Here is an example of what I would want. I want to have an image that looks exactly like the +16 image shown on this photo:
All I want is to have the image show a grey circular Imageview
Try this code
Bitmap picture = BitmapFactory.decodeResource(getResources(), R.mipmap.add_image);
ImageView imageView = (ImageView) findViewById(R.id.imgProfilePicture);
imageView.setImageBitmap(getRoundedBitmap(picture));
public Bitmap getRoundedBitmap(Bitmap bitmap){
Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(circleBitmap);
c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
return circleBitmap;
}
Your xml file
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgProfilePicture"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginBottom="20dp"
app:civ_border_width="3dp"
app:civ_border_color="#color/light_gray" />
and add this in build.gradle
compile 'de.hdodenhof:circleimageview:2.1.0'
Cirular ImageView Done !
Not sure if it's the proper way to do it , but it should work for your case :
First use this to create the bitmap with the required circle shape :
public Bitmap getCircledBmp(Context mContext,Bitmap bmp){
Canvas canvas = new Canvas(bmp);
int color = ContextCompat.getColor(mContext, R.color.material_color_grey_200);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, bmp.getWidth(), bmp.getHeight());
RectF rectFloat = new RectF(rect);
paint.setAntiAlias(true);
paint.setColor(color);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawOval(rectFloat, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bmp, rect, rect, paint);
return bmp;
}
Then add the text that you want :
public Bitmap drawText(String text, Bitmap bmp, int textSize) {
//text dimensions
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
StaticLayout mTextLayout = new StaticLayout(text, textPaint,
bmp.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
Canvas canvas = new Canvas(bmp);
//draw text
canvas.save();
canvas.translate((canvas.getWidth() / 2), (canvas.getHeight() / 2) -
((mTextLayout.getHeight() / 2)));
mTextLayout.draw(canvas);
canvas.restore();
return bmp;
}
In the end you should get your desired image like this :
Bitmap bmp = Bitmap.createBitmap(100,100,Bitmap.Config.ARGB_8888); //change the values whatever you like
ImageView imageView = postViewHolder.fourthCommenter;
imageview.setImageBitmap(drawText("+10",getCircledBmp(this,bmp),30));
I'm developing an android app, I need to add a watermark effect (of an image) to a EditText of several lines. What is the best approach to achieve this?
Here is a great tutorial on android image processing. Below is the source code from the site
public static Bitmap mark(Bitmap src, String watermark, Point location, Color color, int alpha, int size, boolean underline) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(color);
paint.setAlpha(alpha);
paint.setTextSize(size);
paint.setAntiAlias(true);
paint.setUnderlineText(underline);
canvas.drawText(watermark, location.x, location.y, paint);
return result;
}
Im trying to draw a string on top of an Image,The code works but the transparency is not obtained i have used several values for alpha,but does not work.
paint.setAlpha(alpha);
Can some one tell me what are the range of values for transparency or what im doing wrong here
public static Bitmap drawtext(Bitmap src, String txt,int alpha) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setAlpha(alpha);
paint.setColor(Color.RED);
paint.setTextSize(18);
paint.setAntiAlias(true);
paint.setUnderlineText(true);
canvas.drawText(txt, 20, 25, paint);
return result;
}
See:
http://developer.android.com/reference/android/graphics/Paint.html#setColor(int)
The setColor will overwrite the alpha value you just set before that call. That should work:
paint.setColor(Color.RED);
paint.setAlpha(alpha);
Try this code or download demo here
public Bitmap drawText(String text, int textWidth, int color) {
// Get text dimensions
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(Color.parseColor("#ff00ff"));
textPaint.setTextSize(30);
StaticLayout mTextLayout = new StaticLayout(text, textPaint, textWidth, Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);
// Create bitmap and canvas to draw to
Bitmap b = Bitmap.createBitmap(textWidth, mTextLayout.getHeight(), Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(b);
// Draw background
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
c.drawPaint(paint);
// Draw text
c.save();
c.translate(0, 0);
mTextLayout.draw(c);
c.restore();
return b;
}
set the returned image to imageview
//background transparent
int colorT=Color.TRANSPARENT;
Bitmap img1=drawText(text,width,colorT);
img2.setImageBitmap(img1);
I want to add watermark to images just like flipboard does.
As you can see text is added at the bottom of the images with black transparent background. I want to do the exact same thing. Till now I've managed to write text on image but I am not able to make it's background black transparent just like the above picture.
Here's my code so far which I found from here.
public Bitmap mark(Bitmap src, String watermark) {
int w = src.getWidth();
int h = src.getHeight();
Shader shader = new LinearGradient(0, 0, 100, 0, Color.TRANSPARENT, Color.BLACK, TileMode.CLAMP);
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(Color.WHITE);
paint.setTextSize(50);
paint.setAntiAlias(true);
paint.setShader(shader);
paint.setUnderlineText(false);
canvas.drawText(watermark, 10 , h-15, paint);
return result;
}
I think it doesn't require gradient, you can draw it using simple color and using drawRect() method.
Sample code is below, i gonna take the black background size as 25% of whole image.
public Bitmap mark(Bitmap src, String watermark) {
int w = src.getWidth();
int h = src.getHeight();
Paint bgPaint=new Paint();
bgPaint.setColor(Color.parse("AA000000")); //transparent black,change opacity by changing hex value "AA" between "00" and "FF"
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(Color.WHITE);
paint.setTextSize(50);
paint.setAntiAlias(true);
paint.setUnderlineText(false);
//should draw background first,order is important
int left=0;
int right=w;
int bottom=h;
int top=bottom-(h*.25);
canvas.drawRect(left,top,right,bottom,bgPaint);
canvas.drawText(watermark, 10 , h-15, paint);
return result;
}
In my application I used canvas to draw the text. now I want to set the width of the draw text. I can set only x , y position. I can't set width and height.
My problem
update
for example "India is my Country" or if any length text it goes outside of canvas that is outside of the background image.
i want to print "India is
my country" if i set width mean i think it goes to next line
#Override
protected void onDraw(Canvas canvas1)
{
Paint paint = new Paint();
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ban_background);
Bitmap resizeImage1=Bitmap.createScaledBitmap(myBitmap,590,350,false);
canvas1.drawColor(Color.BLACK);
canvas1.drawBitmap(resizeImage1,10,5, null);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
paint.setTextSize(25);
paint.setColor(Color.BLUE);
paint.setFakeBoldText(true);
paint.setTextSize(20);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas1.drawText(CameraText, 100,175, paint);
}
}
i have used to create a bitmap as follows and iam able to set the width and height
Bitmap finalImage = Bitmap.createBitmap(IMAGE_WIDTH, IMAGE_HEIGHT,
Bitmap.Config.RGB_565);
Bitmap tempImage = Bitmap.createBitmap(IMAGE_WIDTH / 2, IMAGE_HEIGHT,
Bitmap.Config.RGB_565);
Canvas g = new Canvas(finalImage);
Canvas gtemp = new Canvas(tempImage);
g.drawColor(Color.WHITE);
gtemp.drawColor(Color.WHITE);
Paint pnt = new Paint();
pnt.setColor(Color.BLACK);
pnt.setTextAlign(Paint.Align.CENTER);
pnt.setTextSize(40);
pnt.setTypeface(font1);
g.drawText(input, IMAGE_WIDTH / 2, 40, pnt);
Rect grct = new Rect(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
Rect grctTemp = new Rect(0, 0, IMAGE_WIDTH / 2, IMAGE_HEIGHT);
gtemp.drawBitmap(finalImage, grct, grctTemp, pnt);
`
i am not sure what you mean but you can try the setStrokeWidth(2.0f)
i hope this helps :D