How to make the first character much larger than other in a TextView

Question

I would like to display a paragraph of long text as follow. Here is the snapshot from Flipboard.

enter image description here

In order to achieve such effect, I tried to use 2 TextViews.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:text="T" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="76dp"
        android:text="op British supermarket Tesco (LSE: TSCO) (NASDAQOTH: TSCDY.US) is due to announce its half year results on" />

</LinearLayout>

I get the following result.

Quite close. But not what I want. This is because the 2nd line and the 3rd line is not align to the left most. The left most space for 2nd line and 3rd line, is occupied by the TextView with large font.

enter image description here

Is there any better technique I can use, such as the one in Flipboard's?

http://stackoverflow.com/questions/2159847/is-there-any-example-about-spanned-and-spannable-text — Andrew, Sep 26 '13 at 14:22
Just use `HTML` tags and load your data with `Html.fromHtml()` in `TextView` or either in `WebView`. — user370305, Sep 26 '13 at 14:22
@Andrew Spannable text is a great idea. Thanks. I added that as answer. — Cheok Yan Cheng, Sep 29 '13 at 17:25

score 5 · Accepted Answer · answered Sep 29 '13 at 17:24

By using a single TextView with BufferType.SPANNABLE will solve the problem.

final SpannableString spannableString = new SpannableString(title);
int position = 0;
for (int i = 0, ei = title.length(); i < ei; i++) {
    char c = title.charAt(i);
    if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9')) {
        position = i;
        break;
    }
}
spannableString.setSpan(new RelativeSizeSpan(2.0f), position, position + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//titleTextView.setText(spannableString.toString());
titleTextView.setText(spannableString, BufferType.SPANNABLE);

score 0 · Answer 2 · answered Sep 26 '13 at 14:22

0

For me probably you have use 3 TextViews: 1 - Paragraph Letter 2 - first and second line 3 - rest of the text.

answered Sep 26 '13 at 14:22

goodm

7,275
6
31
55

But in your Java code, how can you determine which content to place at which text views? – Cheok Yan Cheng Sep 26 '13 at 14:27
It's good to use WebView in it, but I probably won't do this. You need to find out how much of the text will fill up the first 2 TextViews and after it subtract the string. Check this: http://stackoverflow.com/questions/3630086/how-to-get-string-width-on-android and http://stackoverflow.com/questions/5864159/count-words-in-a-string-method . – goodm Sep 26 '13 at 14:34

score 0 · Answer 3 · answered Sep 26 '13 at 15:26

Try this.

Layout XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal" >

<TextView
    android:id="@+id/bigChar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="center_vertical"
    android:text="T"
    android:textSize="40sp" />

<TextView
    android:id="@+id/sideText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@id/bigChar"
    android:gravity="center_vertical"
    android:maxLines="2" />


<TextView
    android:id="@+id/spillText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/bigChar"
    android:layout_alignParentLeft="false"
    android:layout_below="@id/bigChar"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="-5dp"
    android:gravity="center_vertical" />
</RelativeLayout>

Activity class

public class MainActivity extends Activity {
private String inputString = "op British supermarket Tesco (LSE: TSCO) (NASDAQOTH: TSCDY.US) is due to announce its half year results on and this is the extra bit of spill text";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    TextView bigChar = (TextView) findViewById(R.id.bigChar);
    final TextView sideText = (TextView) findViewById(R.id.sideText);
    final TextView spillText = (TextView) findViewById(R.id.spillText);


    ViewTreeObserver vto = sideText.getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
           Layout layout = sideText.getLayout();  
           int numOfLines = layout.getLineEnd(2);

           // split the string now
           String spillTextString = inputString.substring(numOfLines, inputString.length());
           spillText.setText(spillTextString);
        }
    });
}
}

How to make the first character much larger than other in a TextView

3 Answers3

Linked