I need to display a TextView over a gradient background. The TextView itself should have a plain white background, and the text should be transparent.
However, setting a transparent color (#00000000) to the text doesn't work: it only shows a white rectangle, the background doesn't show up where the text is (the text takes the same color as the TextView background).
How can I display a transparent text with a background color on my TextView?
Update, Jan 30, 2016
I made a small library and written a blog post out of this answer, so you don't need to copy and paste code and I do the maintenance for you. :)
Use the view in xml as:
<it.gilvegliach.android.transparenttexttextview.TransparentTextTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/view_bg"
android:text="Hello World" />
Gradle dependency:
compile 'it.gilvegliach.android:transparent-text-textview:1.0.3'
Original Answer
This is how you can achieve that effect:
you render the text over a transparent background on a bitmap
you use that bitmap to clip the text shape out of the solid white background
Here is a simple subclass of TextView that does that.
final public class SeeThroughTextView extends TextView
{
Bitmap mMaskBitmap;
Canvas mMaskCanvas;
Paint mPaint;
Drawable mBackground;
Bitmap mBackgroundBitmap;
Canvas mBackgroundCanvas;
boolean mSetBoundsOnSizeAvailable = false;
public SeeThroughTextView(Context context)
{
super(context);
mPaint = new Paint();
mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
super.setTextColor(Color.BLACK);
super.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}
#Override
#Deprecated
public void setBackgroundDrawable(Drawable bg)
{
mBackground = bg;
int w = bg.getIntrinsicWidth();
int h = bg.getIntrinsicHeight();
// Drawable has no dimensions, retrieve View's dimensions
if (w == -1 || h == -1)
{
w = getWidth();
h = getHeight();
}
// Layout has not run
if (w == 0 || h == 0)
{
mSetBoundsOnSizeAvailable = true;
return;
}
mBackground.setBounds(0, 0, w, h);
invalidate();
}
#Override
public void setBackgroundColor(int color)
{
setBackgroundDrawable(new ColorDrawable(color));
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
mBackgroundBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mBackgroundCanvas = new Canvas(mBackgroundBitmap);
mMaskBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mMaskCanvas = new Canvas(mMaskBitmap);
if (mSetBoundsOnSizeAvailable)
{
mBackground.setBounds(0, 0, w, h);
mSetBoundsOnSizeAvailable = false;
}
}
#Override
protected void onDraw(Canvas canvas)
{
// Draw background
mBackground.draw(mBackgroundCanvas);
// Draw mask
mMaskCanvas.drawColor(Color.BLACK, PorterDuff.Mode.CLEAR);
super.onDraw(mMaskCanvas);
mBackgroundCanvas.drawBitmap(mMaskBitmap, 0.f, 0.f, mPaint);
canvas.drawBitmap(mBackgroundBitmap, 0.f, 0.f, null);
}
}
Example screenshot: indigo pattern for activity background, pink solid fill for TextView background.
This works both for solid color backgrounds and general drawables. Anyway, this is only a BASIC implementation, some feature such as tiling are not supported.
I have not tried this, but you might be able to do this by (against all documentation advice) getting the TextPaint through TextView.getTextPaint() and call setXferMode(new PorterDuffXferMode(PorterDuff.Mode.MULTIPLY)), in order to clear the alpha bits on the background while rendering.
Otherwise, implement your own text view where you are in full control of the rendering.
Add this code to your textview tag:
android:background="#07000000"
Related
I try to hide a picture and show interactively its portions when user touches a screen. I tried numerous approaches like having background view that is overlapsed with views that I will make transparent which somehow worked. A final solution shall be a single custom view which will give me more painting flexibility.
Activity:
hiddenPicture.setBackgroundResource(R.drawable.picture);
View:
init()
eraserPaint = new Paint();
eraserPaint.setColor(Color.TRANSPARENT);
// eraserPaint.setAlpha(0);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
veilPaint = new Paint();
veilPaint.setColor(Color.GRAY);
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(0, 0, w, h, veilPaint);
canvas.drawOval(new RectF(20, 20, 220, 220), eraserPaint);
}
The problem is that the oval is black. I found tons of similar questions but I am too junior in Android to apply them to my case. What shall I do to erase oval in grey veil and show background picture? Thank you.
Update:
I found nice blog: http://www.41post.com/4794/programming/android-rendering-a-path-with-a-bitmap-fill
I recycled it to my code:
fillBMP = BitmapFactory.decodeResource(context.getResources(), R.drawable.picture);
fillBmpShader = new BitmapShader(fillBMP, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
eraserPaint.setColor(0xFFFFFFFF);
eraserPaint.setStyle(Paint.Style.FILL);
eraserPaint.setShader(fillBmpShader);
It seemed to work but the problem is that it does not scale the image used as brush. Is really the only solution to implement onDraw() this way:
Paint the picture
Paint the veil except uncovered parts
I worry about the performance. I do not want to paint complete screen after each user interaction. I would prefer to repaint only relevant parts. Is this even possible or am I over-optimizing already?
I have to maintain and paint two bitmaps - one for background and second for veil with transparent hollows:
private void setupDrawing() {
eraserPaint = new Paint();
eraserPaint.setColor(Color.TRANSPARENT);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
veilPaint = new Paint();
veilPaint.setColor(Color.GREEN);
canvasPaint = new Paint(Paint.DITHER_FLAG);
}
// http://developer.android.com/training/custom-views/custom-drawing.html
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
drawCanvas = new Canvas(canvasBitmap);
drawCanvas.drawRect(0, 0, w, h, veilPaint);
}
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(fillBitmap, 0, 0, canvasPaint);
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
drawCanvas.drawCircle(event.getX(), event.getY(), 150, eraserPaint);
invalidate();
}
return true;
}
I created a function to draw a text on a path:
public void drawText(float x, float y, String text) {
Log.i("DRAWING", "drawText");Typeface.BOLD);
mPath.reset();
mPath.moveTo(x, y);
mPath.lineTo(x+200,y);
Paint textPaint = new Paint();
textPaint.setColor(Color.RED);
textPaint.setTextSize(20f);
textPaint.setAntiAlias(true);
textPaint.setStrokeWidth(5f);
textPaint.setStyle(Paint.Style.FILL);
mCanvas.drawTextOnPath(text, mPath, 0, 0, textPaint);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
paths.add(mPath);
invalidate();
}
I set a Bitmap like this:
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas();
mCanvas.setBitmap(mBitmap);
reset();
}
Question:
When I set a bitmap, it works fine and the text appears on the ImageView, but when I don't, just a white line appears and not the text.
Do I have to use a Bitmap to draw text on path with drawTextOnPath ? Because I want to use only paths (all works fine except text, like it needed a Bitmap).
So a Bitmap is mandatory to draw text with drawTextOnPath.
The text won't appear if there is no Bitmap.
For those who, like me, implemented a Undo/Redo functionnality, I guess you have to save both paths and bitmaps to allow user to go back and forward.
I need a bit of help. I have an ImageView with a touch listener, and I am able to capture all touch inputs into a matrix, and apply that matrix to the ImageView and VOILA! the image pans and zooms appropriately.
Here is the trouble: I'd now like to CROP the image in such a way that it ALWAYS ends up the same size; eg a 300x300 image.
In other words, suppose I have a 300x300 square in the middle of my screen, a user pans and zooms an image until an item of interest fits into that square, and hits "next". I would like to have a resulting image that has cropped the photo to only be the 300x300 portion that was contained in the box.
Make sense?? Please help! Thanks comrades! See a bit of code below for what I have tried thus far.
float[] matrixVals = new float[9];
ImageTouchListener.persistedMatrix.getValues(matrixVals);
model.setCurrentBitmap(Bitmap.createBitmap(model.getOriginalBitmap(), 0, 0, model.getTargetWidth(), model.getTargetHeight(), ImageTouchListener.persistedMatrix, true));
model.setCurrentBitmap(Bitmap.createBitmap(model.getCurrentBitmap(), Math.round(matrixVals[Matrix.MTRANS_X]), Math.round(matrixVals[Matrix.MTRANS_Y]), model.getTargetWidth(), model.getTargetHeight(), null, false));
Finally, I would also like to be able to SHRINK the image into the box, where the edges may actually need to be filled in with black or white or some kind of border... So far, everything I do other than no pan or zoom at all crashes when I hit next.
Thanks again!
see this custom ImageView, the most important part is onTouchEvent where cropped Bitmap is created and saved to /sdcard for verification:
class IV extends ImageView {
Paint paint = new Paint();
Rect crop = new Rect();
public IV(Context context) {
super(context);
paint.setColor(0x660000ff);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
crop.set(w / 2, h / 2, w / 2, h / 2);
crop.inset(-75, -75);
}
#Override
public void setImageResource(int resId) {
super.setImageResource(resId);
setScaleType(ScaleType.MATRIX);
Matrix m = getImageMatrix();
m.postScale(2, 2);
m.postTranslate(40, 30);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Bitmap croppedBitmap = Bitmap.createBitmap(crop.width(), crop.height(), Config.ARGB_8888);
Canvas c = new Canvas(croppedBitmap);
c.translate(-crop.left, -crop.top);
c.concat(getImageMatrix());
getDrawable().draw(c);
// just save it for test verification
try {
OutputStream stream = new FileOutputStream("/sdcard/test.png");
croppedBitmap.compress(CompressFormat.PNG, 100, stream);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return false;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(crop, paint);
}
}
It's not really clear for me what your problem is, a calculation or a drawing problem ... if it is a drawing problem I might have the solution ...
Create a new bitmap, get the canvas and draw the correct rect of the big image into the new smaller one ....
Bitmap bigPicture; //your big picture
Bitmap bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
Rect source = ...
Rect dest = ...
c.drawBitmap(bigPicture, source, dest, paint);
Now if your problem is a calculation problem I might have a solution too ...
I need a little help with the application that I'm working. I'm trying to create an application for painting and there is one problem which I noticed a few days ago and now I decide to make some research to solve it. When I use PorterDuff.Mode.CLEAR to use my brush as eraser it's working as it should be while my background is white. But if I set my background in other color ( for example Black like : mCanvas.drawColor(Color.BLACK); ) and after I use the eraser, the places where I use the eraser are painted with white color.
Here is how I'm setting the variables for my eraser :
erase.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
stamp=false;
MODE = ERASER_MODE;
mPaint.setColorFilter(null);
mPaint.setShader(null);
mPaint.setMaskFilter(null);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
});
So any ideas why it's happening and how can I fix that problem?
Thanks in advance!
Actually I find where were my problem. In my Custom View that I was using for drawing and etc I was doing this
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
mCanvas.drawColor(parentColor); //parentColor = currentBackgroundColor
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}
and I had to change only on my
I think I'm a bit confused about how to use custom views. I'm following along with slides from a talk given by Eric Burke from Square (from this year's anddevcon, slides here: http://www.andevcon.com/AndevCon_II/downloadpresentation.aspx?aid=Taming_Android__User_Experience_Lessons_from_Square_pdf.zip&sid=2).
His code, or at least the part he showed in the slides, went something like this:
public class EditablePhoto extends View {
private Bitmap framedPhoto;
private Bitmap image;
private Drawable placeholder;
public EditablePhoto(Context context) {
super(context);
}
#Override protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
int measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
//ensure view always square
int min = Math.min(measuredHeight, measuredWidth);
setMeasuredDimension(min, min);
}
#Override
protected void onDraw(Canvas canvas) {
if(placeholder == null && image==null) return;
if(framedPhoto == null) {
createFramedPhoto(Math.min(getWidth(), getHeight()));
}
canvas.drawBitmap(framedPhoto, 0, 0, null);
}
private void createFramedPhoto(int size) {
Drawable imageDrawable = (image!=null)
? new BitmapDrawable(image) : placeholder;
Bitmap output = Bitmap.createBitmap(size, size,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
RectF outerRect = new RectF(0, 0, size, size);
float outerRadius = size / 18f;
//Red rectangle
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawRoundRect(outerRect, outerRadius, outerRadius, paint);
paint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.SRC_IN));
imageDrawable.setBounds(0, 0, size, size);
canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
imageDrawable.draw(canvas);
canvas.restore();
}
}
What I don't get is how to actually use this View now.... Where and when do you set the bitmaps, which are private fields in this class...?
Generally confused and would love some enlightenment.
More than one year passed, but I hope this will help anyone who looking for the right answer. In my case, I putted this line of code
framedPhoto = output;
as the last one in createFramedPhoto() method. It works.
In the example, the author created a rounded rectangle as background then he draw the bitmap on it with XOR mode, so all pixel outside the rounded rectangle will be trim off.
OnDraw() is the method where you will Draw your view on canvas. here too you can analyze onDraw() will fisrt call CreateFramePhoto then draw this Bitmap on canvas .
You can add this customView in layout Either from xml or in Java Class
1) Through Xml :
<EditablePhoto android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
..........................
/>
dont forgate to add constructor EditablePhoto(Context context, AttributeSet attributeSet) for this case
2) through Java class :
EditablePhoto editablePhoto = new EditablePhoto(this);
addView(editablePhoto) // or do anthing you want with this