Question

I’m making an app for android, I’m using Google Directions API to get and parse every leg in the route.
I’m displaying the route on the map (that’s already working)

I want to display a list of the turn by turn directions (though they’ll not advance as you goes on, just a list of the directions.

I have a few questions,
First, how to get each leg’s description? Parsing the JSON gets me this line:

"html_instructions": "Head \u003cb\u003enorth\u003c/b\u003e on \u003cb\u003eS Morgan St\u003c/b\u003e toward \u003cb\u003eW Cermak Rd\u003c/b\u003e"

which Java outputs as:

Head <b>north</b> on <b>S Morgan St</b> toward <b>W Cermak Rd</b>

is there an easy way of parsing this to a normal string to be displayed on a list? or just replacing the html chars by “”?

Second, How do you display a list with a semi-transparent background, on top of the map view, based on the size of an array?

EDIT:
the desired result should be something like this:

Only they used TableLayout with a fixed amount of textviews. I want something like that, preferably a bit smaller which would display all, or just some (and than have the ability to change) the routes descriptions
Couldn’t find information on these issues.
Thanks

Answer 1

is there an easy way of parsing this to a normal string to be displayed on a list?

Probably the easiest way out is to call Html.fromHtml(htmlString).toString().

Second, How do you display an transparent list based on the size of an array?

What exactly do you mean by ‘transparent list’? I’m assuming a list that displays ’empty’ items? You could probably populate the data set with null for any items that should be invisible, which you can then check for in your Adapter. Alternatively, you could e.g. use a Map<String, Boolean>, where the value represents whether you want to display the string (key) in the ListView or hide it/make it transparent.

Edit after updating question: To get that sort of transparent effect is actually pretty straightforward. The ‘rectangle’ is simply a separate ViewGroup with a black background color that includes transparency; e.g. #55000000. You can play around with the first two hexadecimal numbers to change the transparency, and thus the visual tint.

To get the route information displayed on top of the map, you’ll want to use a RelativeLayout as root (and probably set the semi-transparent background color to it). After that, you can populate that particular piece of UI with anything you’d like it to show. For example, I created something similar the other day (as a birthday present to a friend) that will take him to the actual location of the present. I simply added previous/next buttons to manually move between the navigation hints.

(Sorry, hints are in Dutch, but I’m sure you get the idea)