TextView with a background and Transparent Text

Question

I'm trying to do the following:

enter image description here

For now, I am trying to use NativeAndroid.

However, I can do this with HTML and css.

As you can see, it's something like:

Holder with blue (might be any other color or even an IMAGE) background
TextView with (transparent??) color
TextView with gray background

However, if I set background to grey and the text to transparent, the text "disappears" and it's all shown as gray.

This is my try (Native Android):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000" >
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffcecece"
    android:padding="5dp"
    android:text="@string/hello_world"
    android:textColor="#00ffffff" />
</RelativeLayout>

However, it's showing the following:

enter image description here

There's text, bu as it is transparent, it's not shown.

So my question is:

How can I achieve this?
Canvas? Spans? I'm not used to those approach, so some directions would be appreciated.

Thanks!!

Edit: That blue background must be dynamic and it may be an IMAGE!

Will you have dynamic background? If not just set text color to background color. — Losiowaty, Oct 28 '13 at 09:20
The background is most probably an image... So, it's otally dynamic — Reinherd, Oct 28 '13 at 09:24
@Reinherd: you are looking exactly for [this answer](http://stackoverflow.com/a/24281113/913286) of mine. — Gil Vegliach, May 10 '16 at 19:12
@Reinherd: you're right :D Anyway, it will be a good reference for the future. — Gil Vegliach, May 11 '16 at 15:26

score 3 · Accepted Answer · edited Nov 21 '16 at 02:23

3

you can use Canvas for that:

Bitmap bmOverlay = Bitmap.createBitmap(1200, 1200, Bitmap.Config.ARGB_8888);//bMap.getConfig());

Canvas canvas = new Canvas(bmOverlay);
canvas.drawColor(Color.LTGRAY);
Paint paint = new Paint();

Paint mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintText.setStrokeWidth(3);
mPaintText.setStyle(Paint.Style.FILL_AND_STROKE);
mPaintText.setColor(Color.TRANSPARENT);
mPaintText.setTextSize(50f);
mPaintText.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));    
canvas.drawText("Your TExt", x, y, mPaintText);

edited Nov 21 '16 at 02:23

suku

10,507
16
75
120

answered Oct 28 '13 at 09:44

Dima

158
6

1

I'm not used in using canvas. How can I add this code as a View? – Reinherd Oct 28 '13 at 09:55
you can add an ImageView to your layout and then: ImageView image = (ImageView)getActivity().findViewById(R.id.imageView1);image.setImageBitmap(bmOverlay); – Dima Oct 28 '13 at 09:57
I've tried that and the text, if it's transparent it's invisible, so it's not working. – Reinherd Oct 28 '13 at 10:42
try this: http://android.okhelp.cz/create-bitmap-and-draw-text-into-bitmap-android-example/ – Dima Oct 28 '13 at 10:53
This is what I do need. However I tried to use it in my app (copy & paste) and the text is not transparent. Can you try it? – Reinherd Oct 28 '13 at 11:00
1

Okay, it worked with this: paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC)); – Reinherd Oct 28 '13 at 11:11

score 1 · Answer 2 · answered Oct 28 '13 at 09:21

1

Set the textcolor as your layout backgound color like light sky blue..

answered Oct 28 '13 at 09:21

kalyan pvs

14,486
4
41
59

jyomin · Answer 3 · 2013-10-28T09:58:03.553

0

You cannot achieve this in Xml Layout, you need to set same color for both layout background and the text like below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0011ff" >
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffcecece"
    android:padding="5dp"
    android:text="@string/hello_world"
    android:textColor="#0011ff" />
</RelativeLayout>

edited Oct 28 '13 at 09:58

answered Oct 28 '13 at 09:25

jyomin

1,957
2
11
27

Not what I need. Check my Edit. – Reinherd Oct 28 '13 at 09:29
You can do that in your java class where you want by setting the backgroundResource as follows: mRelativeLayout.setBackgroundResource(R.drawable.imagename); – jyomin Oct 28 '13 at 09:39
It's not about the image. It's about setting the text transparent, so you can read "through" the TextView – Reinherd Oct 28 '13 at 09:40
You don't understand what I am trying to do. Check the question again please. – Reinherd Oct 28 '13 at 10:01

TextView with a background and Transparent Text

3 Answers3