On Android, How do I display html in ListView?

Question

I am feeding a ListView from a database in this way (nothing special), except COL_TXT_TRANSL2 contains html formatting:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Bundle extras = getIntent().getExtras();
    mCurrBookID = extras.getString("BookID");
    mCurrChapterNum = extras.getString("ChapterNum");
    mCurrChapterTitle = extras.getString("ChapterTitle");
    mGitaDB= Central.mDB;

    this.setTitle(mCurrChapterNum+"."+mCurrChapterTitle);
    setContentView(R.layout.chapterdisplay);

    //set chapter intro
    TextView tvIntro=(TextView) findViewById(R.id.textIntro);
    tvIntro.setText(Html.fromHtml(extras.getString("ChapterIntro")));


    try {
        String[] columns = new String[] { mGitaDB.COL_TXT_TEXT_NUM, mGitaDB.COL_TXT_TRANSL2 };
        int[] to = new int[] { R.id.number_entry, R.id.title_entry };

        mCursor=mGitaDB.GetGitaTexts(mCurrBookID, mCurrChapterNum);
        mAdapter = new SimpleCursorAdapter(this,
                R.layout.textslist_row, mCursor, columns, to);

        setListAdapter(mAdapter);
    }
    catch (Exception e) {
         String err="Error: " + e.getMessage();
         Toast toast = Toast.makeText(Central.context, err, 15000);

         toast.show();
    }

}

Now the problem is that the text displayed in this ListView has HTML formatting.

How can I make listview display this HTML formatting? Currently it is displayed as a plain text with all tags.

Answer 1

My problem was similar to yours. I was reading data from file in json format, where I have objects with id and text fields. text field is html. I have resolved problem this way:

ArrayList<MyObject> myObjectsList = new ArrayList<MyObject>();
ArrayList<HashMap<String, CharSequence>> tableElements = new ArrayList<HashMap<String, CharSequence>>();

String keyword = in.getStringExtra(TAG_KEYWORD);

InputStream is = this.getResources().openRawResource(R.raw.data);

JSONParser jParser = new JSONParser();

myObjectsList = jParser.searchForObjects(is, keyword);


for (MyObject element : myObjectsList) 
{

    String id = Integer.toString(element.id);
    CharSequence text = Html.fromHtml(element.text);

    // creating new HashMap
    HashMap<String, CharSequence> map = new HashMap<String, CharSequence>();

    // adding each child node to HashMap key => value
    map.put(TAG_ID, id);
    map.put(TAG_TEXT, text);

    // adding HashList to ArrayList
    tableElements.add(map);
}



ListAdapter adapter = new SimpleAdapter(this,tableElements,
    R.layout.search_item,
    new String[] { TAG_ID, TAG_TEXT.toString()}, new int[] {
    R.id.exercise_id, R.id.text });

setListAdapter(adapter);

Answer 2

Assuming the HTML is fairly simple you can run it through this method: http://developer.android.com/reference/android/text/Html.html#fromHtml(java.lang.String ) The resulting Spannable can be sent to a TextView in the ListView. Beware the fromHtml method is very slow and may slow down scrolling, you might want to cache the Spannables.

Answer 3

Define a CharSequence ArrayList, include all the elements from your database to be displayed in this arraylist as HTML. Include a personal TextView layout for the individual entities of the listView, and display the Charsequence in the list. I had made use of the following code for my app:

List<CharSequence> styledItems = new ArrayList<CharSequence>();

droidDB.open();
articles = droidDB.getAllArticleTitles(feed.feedId);
droidDB.close();

for (Article article : articles) {
    styledItems.add(Html.fromHtml(article.title));
}

ArrayAdapter<CharSequence> notes = 
    new ArrayAdapter<CharSequence>(this, R.layout.feeds_row,styledItems);
setListAdapter(notes);

For the feeds_row.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" 
android:textColor="#FFFFFF"/>

Hope this helps.