3

I have defined text of a textview as - 

<string name="text"><u>this is my text</u></string>

I needed some space between the text and the underline, so I added lineSpacingExtra="2dp" to the textview, but it is not working.

Can anyone tell how to achieve this?

I need to support API 14 till 21. The above test was done on API 21.

Sam
  • 4,302
  • 12
  • 40
  • 74

2 Answers2

4

I spent a great deal of my time on this question and here are my findings!

Firstly, To increase the spacing between the text and underline in css you need to use styles and unfortunately Android TextView does not support style tag when using Html.fromHtml(). Unfortunately even span tag is not supported (otherwise that could have been used). To see the entire list of tags supported check the HTML Tags Supported By TextView blog.

Now since we know the basic simple implementation wouldn't work, the only other way remaining is to fake it (fool the user!). In your xml layout where you have the TextView add a View below it with the following properties.

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:textSize="20sp"/>

    <View
        android:id="@+id/underlineView"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignEnd="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignRight="@+id/textView"
        android:layout_alignStart="@+id/textView"
        android:layout_below="@+id/textView"
        android:layout_marginTop="10dp"
        android:background="@android:color/holo_red_dark"/>

As you can see the underlineView is emulating the underline. It has its width fixed to the textview above it. You can set its color to whatever you need and importantly you can adjust the spacing using the android:layout_marginTop property. Hope this helps!

Community
  • 1
  • 1
Antrromet
  • 15,294
  • 10
  • 60
  • 75
1

My suggestion is to remove the underline from the text string entirely because you can't customize the spacing from there. After that, you have a few options. One option is to use the @drawable feature as discussed in the following link: http://www.quora.com/How-do-I-design-edit-text-view-with-bottom-border-alone-in-Android-and-edit-text-view-with-some-special-symbol-like-below-image

If you want a quick and easy "hack" then go to the layout XML for your activity where your TextView is created. Wrap your TextView in a LinearLayout as follows:

    <LinearLayout 
        android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/text"
             android:layout_marginBottom="2dp" />
        <TextView
             android:layout_width="fill_parent"
             android:layout_height="1dp"
             android:background="@color/underline" />
</LinearLayout>

The first TextView is where your text ("this is my text") is displayed so you can adjust the "layout_marginBottom" to whatever spacing you need between your text and the underline. The second TextView acts as your underline so to adjust its thickness you can change the "layout_height" value.

The final step to making this work is to go into your "values" folder in your project and create a new XML file named "colors.xml". The entire contents for this example are below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <color name="underline">#333333</color>
</resources>

Simply change the hex color value in this XML file to customize the underline color to your choice.

BreakingBrad
  • 256
  • 2
  • 8