Showing HTML assets in Android

I want to show a nice intro dialog when someone first visits my app (and thereafter on  request). Showing the dialog is easy, but how do I show it with HTML styling? Because that’s what I really want – paragraphs, bullet points, headings – those things are difficult to pull off in Android XML layout.

The obvious candidate is the WebView. Just get my HTML content in there and I’m golden. One problem: WebView seems mostly geared toward loading external URLs. That’s what all the tutorials show. There’s also a WebView.loadData method where you can just give it a string, but that just pushes the problem back, because you can’t really include HTML styling of any significance in an Android resource; as far as I can tell it just gets stripped out unless it’s bold, underline, or italicize.

So what about just putting my HTML in a file and loading that in? Seems like a good idea, but the only apparent way to do this is to use Resources.loadRawResource which returns an InputStream, which is pretty low-level stuff. Seriously? Has to be a better way.

And there is. I just need to put my file in the right place (the “assets” folder at the top level of my project) and refer to it with the right URL (file:///android_assets/file.name) in the WebView.loadUrl method. Would have been nice for the official docs to mention that… I found mention of it in this forum post.

Next problem: the WebView doesn’t load the content right away – it takes a second to display in the emulator. Any way to make it preload? Not that I can see.

Tangent: I still don’t know what all the inputType settings on an EditText do. Particularly, I’m looking for the one that causes input to suggest and correct words as you’re typing. I set up a simple example project to try out all of the ones listed in the InputType class. None of them had that particular effect, so it seems I need to look further.

It seems I need to combine types. textAutoCorrect does not imply text –  have to put inputType=”text|textAutoCorrect” to get what I want. Looks like that does what I want, but not if I add “textAutoSuggest” – intuitive, no?

 

Advertisements

Restricting text to one line with EditText/TextView

I’ve let slide my habit of writing about what I’m doing. Let’s try to pick it back up.

I spent some time style-izing some things in WhenDidI. For one thing, I wanted to restrict text fields to just one line (not allowing newlines). It’s not enough to have android:lines=”1″ on the EditText. That keeps the display to one line, but doesn’t keep the user from using newlines to create a multi-line entry. This was worth creating a style for:

    <style name=”NameEditor” parent=”@android:style/Widget.EditText”>
      <item name=”android:layout_height”>wrap_content</item>
      <item name=”android:layout_width”>fill_parent</item>
      <item name=”android:lines”>1</item>
      <item name=”android:inputType”>textCapSentences|textAutoCorrect|textAutoComplete</item>
    </style>

The inputType attribute allows many different values, so check them all out. Somewhere in there is the one that lets the on-screen keyboard suggest words while you’re typing. Anyway, the point here is – if you specify inputType but don’t include textMultiLine, the user doesn’t get to use newlines.
N.B. it can be nice to put layout_height and layout_width in a style to reduce clutter – of course this isn’t a good idea all the time.
So the user can’t enter multiline text now, but they can still enter giant amounts of text, and I’m wanting these values to display in one line in a ListView item. How do you cut text short in display? Well, there’s the android:ellipsize attribute, but this doesn’t actually seem to work. That bug report contains a workaround, however, without even using any deprecated attributes:
    <style name=”EllipseText” parent=”@android:style/Widget.TextView”>
      <item name=”android:lines”>1</item>
      <item name=”android:scrollHorizontally”>true</item>
      <item name=”android:ellipsize”>end</item>
   </style>

This does the trick, although in my scrolling ListView the ellipses seem to only show two dots instead of three. Maybe judicious use of padding / margins will fix that.