Change background color of part of textview

Question

I have a textview with three lines, for example, name, phone and address. I want to distinguish third line, I want to add image there, get a round border for it and change background color. Is there a way I can do?

Maybe this can help you: http://stackoverflow.com/questions/4911614/how-to-change-a-textviews-background-color-with-a-color-defined-in-my-values-co — dHoja, Sep 20 '13 at 08:38

score 7 · Answer 1 · edited May 23 '17 at 12:32

To change a part of the background you'll need is a Spannable.

int startColor = 0; //the size that start the background color
int endColor = 100; //the size that ends the background color

TextView textView = (TextView) findViewById(R.id.text_view_id);

Spannable spannable = new SpannableString(" Handle action bar item clicks here. The action bar will automatically handle clicks on the Home");

spannable.setSpan(new BackgroundColorSpan(Color.BLUE), startColor, endColor, 
                  Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

If you want it clickable you can use:

spannable.setSpan(new ClickableSpan() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "link clicked", Toast.LENGTH_SHORT).show();
        }
    }, startColor, endColor, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Font StackOverflow answer

score 1 · Answer 2 · answered Sep 20 '13 at 08:46

1

You have to use either Spannable or you have to use Html. These both will work.

Html Example:

YOURTEXTVIEW.setText(Html.fromHtml("<font color='green'><b>" + YOUR BACKGROUND TEXT + "</b></font>" + "  "+ YOUR LONG LONG TEXT));

You have to just write Html for set background.

And for spannable you will get lots of data from Google.

answered Sep 20 '13 at 08:46

Pratik Dasa

7,439
4
30
44

I know how to set image with Html. And how I can use border with background color with it? – Askar Zaitov Sep 20 '13 at 08:49
For that you have to learn a little Html, or ask any Html person, may be you will get better idea. – Pratik Dasa Sep 20 '13 at 08:52
@praktik Html in TextView is pretty limited, so there's no way to achieve a border etc. as this would require CSS support. You really should go with the solution proposed by Bontok and use 3 separate TextViews. – Ridcully Sep 20 '13 at 08:57
Yeah it will fine finally, but this solution is for if you must need to do with one. Otherwise 3 textviews are fine at last. – Pratik Dasa Sep 20 '13 at 08:59
Accept and upvote answer if you find it is useful for others; – Pratik Dasa Sep 20 '13 at 08:59

score 0 · Accepted Answer · answered Sep 20 '13 at 08:54

In an easy way, you can use 3 textviews like this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Details" />

    <LinearLayout
        android:layout_marginLeft="15dp"
        android:orientation="vertical"
         android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Phone" />

        <TextView
            android:background="#f00"
            android:textColor="#ffffff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Address" />
    </LinearLayout>

</LinearLayout>

Also see snapshot enter image description here

DropAndTrap · Answer 4 · 2013-09-20T10:10:25.183

change the back ground like this

customshape.xml

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >

      <solid android:color="your_back_ground_color" />  

        <corners android:radius="8dp" />

        <stroke
            android:width="0.5dp"
            android:color="Border_color" >
        </stroke>

    </shape>

put this in res/drawable

in layout xml

  <TextView
        android:background="@drawable/customshape"
        android:textColor="your_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="your_text" />

and I hope if its overlaping with the textview the add padding on the custom layout.

Change background color of part of textview

4 Answers4

customshape.xml