INeedIt - Addressing text size issues

This post is more than 2 years old.

This past Saturday I wrote about my experience creating a Flex Mobile application called INeedIt. Based on the Google Places API, it was a simple application that found businesses of a certain type around your location. One of the issues I ran into was with text size. Consider what the simulator showed:

This looked perfect to me. But when run in my device, the text ended up being a lot smaller. Here's a shot I took with my web cam. Not perfect, but it should give you an idea of how much smaller it ended up:

I wasn't quite sure what to do. I knew Flex 4.5 had support for handling DPI changes - but nothing I tried seemed to work right. Finally I gave up and tried just adding fontSize to the list. Here is the entire layout for first page:

<s:List id="typeList" dataProvider="{types}" labelField="label" width="100%" height="100%" click="loadType(event)" includeIn="normal" />

Obviously there's more in the file, but in terms of UI, that's pretty much it. So as I said, I added fontSize in and that worked, but only for one page. I then turned to Adobe evangelist Holly Schinsky. Her suggestion was simple - CSS. I keep forgetting you can use CSS in Flex. In fact, she pointed out two simple CSS items to cover the entire application. Here is INeedIt.mxml - my root file for the application.

<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.INeedItHomeView" splashScreenImage="@Embed('assets/first.jpg')"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations>

&lt;fx:Style&gt;
@namespace s "library://ns.adobe.com/flex/spark";
global {
	fontSize: 36pt;
}
s|ActionBar #titleDisplay
{
	fontSize: 36pt;
}		
&lt;/fx:Style&gt;

</s:ViewNavigatorApplication>

The first declaration, global, applies to everything within the app - but not the title bar. I'm taking a guess here but I'd bet it also doesn't apply to menus. (More on how to use menus later.) To cover the title bar (really the ActionBar), I simply specify the second one. Note the use of the namespacing there. That's required for it to work. The numbers I picked were pretty arbitrary. I started big (100) and went down until it seemed "comfortable" for my big fat fingers. Check out the difference:

Again - not the best camera shot, but you can definitely tell a difference. Want to see all the code. I've now put it up on GitHub: https://github.com/cfjedimaster/ineedit. Feel free to download and modify the code to your liking. I've also included the APK as an attachment to this entry. In theory you can download and install right from your mobile browser. (As always, even if your phone company thinks your an idiot and can't be trusted to install applications, don't forget you can easily work around that by using the Android SDK.)

Ok - so what's next? I want to add menu support and see if I can fix the map. I bet I can also add in driving directions pretty easily.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Scott Stroz posted on 5/18/2011 at 7:24 AM

I know I canot be the only one who is not surprised Ray 'forgot' about CSS. :D

Comment 2 by Narciso Jaramillo posted on 5/18/2011 at 8:29 AM

Hi Ray--did you try setting applicationDPI="160" on your root application tag? That should make your application scale properly to higher DPIs.

Comment 3 by Narciso Jaramillo posted on 5/18/2011 at 8:29 AM

Hi Ray--did you try setting applicationDPI="160" on your root application tag? That should make your application scale properly to higher DPIs.

Comment 4 by Raymond Camden posted on 5/18/2011 at 2:48 PM

I did - and it did not help. I tried no DPI, and all 3 supported values.

Comment 5 by Scott P posted on 5/18/2011 at 8:25 PM

I'm sure you know but you can take screenshots using the sdk - ddms. Plugin in usb, enable debugging then start ddms.

you know all of this already right?

Comment 6 by Raymond Camden posted on 5/18/2011 at 8:26 PM

I did know it - but I had forgotten it. :) Will use it going forward. Thanks!

Comment 7 by Narciso Jaramillo posted on 5/18/2011 at 9:04 PM

What kind of device do you have? I've heard that there may be issues with the Atrix--apparently a recent Android update might have broken the value that it reports to AIR as its physical DPI.

Comment 8 by Raymond Camden posted on 5/18/2011 at 9:16 PM

HTC Inspire. Holly actually recommended I do a trace() for the device's DPI. I wonder if I did that if it would return "" or null or some such. I'll try to test that after work today.

Comment 9 by Steven Shongrunden posted on 5/19/2011 at 1:23 AM

Trace out Capabilities.screenDPI and let us know what your device is reporting.

Comment 10 by Raymond Camden posted on 5/19/2011 at 1:52 AM

196

Comment 11 by Raymond Camden posted on 5/19/2011 at 8:22 PM

Here is a follow up by Jason San Jose of Adobe. He filed a bug report:

http://bugs.adobe.com/jira/...

And he added: "As a workaround for the Inspire, read my blog post about using runtimeDPIProvider or read about the workaround in this bug https://bugs.adobe.com/jira...."