How to show a text in 2 colors in android?

Question

I have a text which has some other view overlapping with it (in a RelativeLayout). I want the part of text inside the overlapping view of a different color and that outside the view of different color. Please see the sample image for the same.

I have tried using a TextView for overlapping view and set its textColor attribute but that does not work. Any help would be appreciated.

Edit: As shown in the image, I want that some part of 'a' should be of different color and the rest inside oval to be of different color.

Edit: Consider the following sample code which illustrates my purpose. Here letter 'm' has some part inside the other part (red one). Currently all text is in white. What I need is that the part just after the boundary (from where the red color view starts) all text to be in black color. The screen shot is also attached below. Hope now I am clear.

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="#0000ff">

            <View
                android:layout_width="257dp"
                android:layout_height="match_parent"
                android:background="#ff0000"
                android:layout_alignParentRight="true"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Hi I am some text"
                android:textColor="#ffffff"/>

        </RelativeLayout>

score 4 · Accepted Answer · answered Jun 14 '17 at 14:02

I figured out a way to achieve this. Although I could not find a way to show a text inside a TextView in two colors. But similar effect is possible if we create a custom view class and draw the shapes as well as text on canvas and use color blending (PorterDuffXferMode).

Here is the sample code of the onDraw method of the custom view which I used:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int color1 = Color.rgb(137, 195, 246);  // outside background's color
    int color2 = Color.rgb(246, 187, 137);  // inside background's color
    int color3 = Color.WHITE;   // outside text's color
    int color4 = Color.BLACK;   // inside text's color

    canvas.drawColor(color1);   // fill outside background

    // make inside oval shape and fill it
    Paint paint = new Paint();
    paint.setColor(color2);
    canvas.drawArc(getWidth()*0.36f, 20, getWidth()*3/4, getHeight()-20, 0, 360, false, paint);

    /* create a bitnmap for a new canvas */
    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), ARGB_8888);
    Canvas bitmapCanvas = new Canvas(bitmap);   // new canvas

    /* draw text on bitmapCanvas */
    paint.setColor(color3);
    paint.setTextSize(80);
    bitmapCanvas.drawText("Hi I am some text", 50, 140, paint);

    /* use "source in" PorterDuff mode and draw inside oval on bitmapCanvas
    *  using color4 so that only the text inside oval will remain in color4 and
    *  rest will be transparent*/
    Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    paint.setXfermode(xfermode);
    paint.setColor(color4);
    bitmapCanvas.drawArc(getWidth()*0.36f, 20, getWidth()*3/4, getHeight()-20, 0, 360, false, paint);

    /* draw this bitmap to original canvas */
    paint.setXfermode(null);
    canvas.drawBitmap(bitmap,0,0,paint);
}

And the view look likes this:

score 1 · Answer 2 · answered Dec 02 '16 at 07:39

1

Try to create Spannable and set that Spannable to your textview,try like this

 TextView textview = (TextView)findViewById(R.id.textview);

    Spannable colorSpan = new SpannableString("HI I am some text");        

    colorSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    textview.setText(colorSpan);

answered Dec 02 '16 at 07:39

Jithu P.S

1,843
1
19
32

I have updated the question. I need the part of the letter 'a' which is inside the oval to be of different color. – user3800670 Dec 02 '16 at 11:03

Sagar Chavada · Answer 3 · 2016-12-02T10:43:50.340

0

just add your sentence in string.xml like this:

<resources>
  <string name="some_text"><font fgcolor="#FFFFFF">Hi i am</font><font fgcolor="#ffff0000">some red text</font></string> 
</resources>

and you can set like this:

String styledText = getResources().getString(R.string.some_text);
sometext.setText(Html.fromHtml(styledText), TextView.BufferType.SPANNABLE);

edited Dec 02 '16 at 10:43

answered Dec 02 '16 at 07:59

Sagar Chavada

5,169
7
40
67

I have updated the question. What I need is that the part outside oval to be of different color and the part inside oval to be of different color. – user3800670 Dec 02 '16 at 10:33
New answer does not seem to be doing anything. Its just showing plain text. I think there is some problem in the new android versions- [as shown here](http://stackoverflow.com/questions/18735290/how-can-i-get-the-fgcolor-attribute-to-work-on-recent-android-versions) But my question is that you are not doing anything specific to set for example some part of letter 'a' is inside oval and some part is outside. I want these two parts to be of different colors. I am not clear how I can achieve that. Hope I am clear. – user3800670 Dec 02 '16 at 12:25
Just make one PNG file of that color and set it in linear layouts background. And set text view under that layout. – Sagar Chavada Dec 02 '16 at 15:04
Could you explain a little bit more? – user3800670 Dec 05 '16 at 05:25

How to show a text in 2 colors in android?

3 Answers3