Displaying Clickable Text Across Platforms in Titanium

Displaying a clickable URL in your mobile app is a common use case. You may wish to add links within your mobile app to take the user to a company website, for example.Or in the case of the mobile app I’m building, be able to show photo credits for a picture that take you to the credited company’s website.

There are many ways to do this in Titanium, including displaying a webview with html hyperlinks. But unless your goal is to build a hybrid native/web app, you probably don’t want the added overhead of loading webviews in your app if you don’t need them.

For this blog post, I’m going to explain how to use the Label and TextArea components to display clickable URLs on both iOS and Android.

As I’ve explained in a previous blog post, because Titanium compiles into native code, each platform (Android or iOS) may render a native component a little differently, depending on the underlying native implementation.

It just so happens that on Android, the Label component has an autoLink property that allows you to display clickable URLs. However, the Label’s autoLink property doesn’t work on iOS. To display clickable URLs on iOS, you must use the TextArea component.

iOS: Notice URL link doesn’t work for Label

Android: Notice the bar underneath TextArea

So, what’s the big deal, you ask? Just use the TextArea component for both Android and iOS and you can display clickable URLs on both! Problem solved.

Not so fast. It turns out that displaying a TextArea on Android has the side effect of displaying an ugly horizontal bar across the bottom. (see screenshot) This is presumably because the TextArea component was originally designed to allow users to input text, not display static text. But in this case, I’m creating a hack or stop-gap solution, where I’m using the TextArea to display text in order to show clickable URLs, and setting the “editable” property to false.

So, the final solution I came up with is to use Label for Android and TextArea for iOS. The code snippets here will help explain the implementation.

From index.xml:

index.xml

From index.tss:

index.tss

You can get to my sample Github project here. Feel free to use it, fix any bugs or expand its functionality.

As I said, there are many ways to display clickable text across platforms in Titanium. This is just one solution, so feel free to share any other solutions in the comments below. My project was written in Alloy, so you’re also welcome to submit a link to a comparable CommonJS solution, if you’d like.

Hope you find this post useful. Enjoy!

FYI, infoGuide Apps is the mobile app product company I’m launching. Hope you’ll come check it out (and sign up for our blog)! 🙂

Advertisements