Aligning the text that appears in ListPicker
Readers post questions on the FB page or the blog. Sometimes I can answer them but sometimes I cannot answer them right away. For those that I cannot answer, I add the question to a list of future tutorial ideas. If someone is not sure how to solve a problem, chances are that there are others who may need help with the same issue!
I am beginning to go through my list – watch for more tutorials based on reader questions. Note – I do not have time to solve specific or custom applications. I try to abstract the basic elements of the problem and create a generic solution that can apply to a wide variety of use cases.
ListPicker Text Alignment
A reader asked how to align the text that appears in the ListPicker box. The ListPicker displays a set of items on screen so that the user may select an item from the list. When the list appears on screen, all the items are “left justified” which means they appear on the left side of the screen.
To demonstrate, our ListPicker, below, displays a list of auto manufacturers:
In the Designer View, we drag a ListPicker component from the Palette and then set the properties for the ListPicker.
After selection, our app displays the item selected in the list in the are shown in the Designer View as “Your selection” – this is a Label component (whose name is set to lblSelected).
Calculating the Width
For centering and right alignment to work, we need to know the width of the screen that will be used by the ListPicker. Unfortunately, there is no way to know the ListPicker width but we can approximate the width by setting the width of the ListPicker button to fill the entire screen, horizontally, and then reference the width of the button itself. Of course, this requires that the ListPicker button be used as a full width button.
The button’s width is set in Properties by selecting the button and then setting its Width property to “Fill parent”:
The ListPicker button has a property called TextAlignment which sounds promising – but it only aligns the text that appears on the button itself and has nothing to do with the content of the ListPicker selection list:
The trick to right justifying or centering the text requires us to estimate the width of the ListPicker selection list, and then to add spaces in front of each text item appearing in the list.
To do this, we reference the property ListPicker1.Width and divide it by an estimated number of pixels per character (I used 8) to estimate the width in terms of text characters. This value is stored in the global variable ListPickerWidth.
ListPicker1.Width is the width of the button itself and NOT the width of the full screen ListPicker selection list – this is why we needed to set the ListPicker’s Width property to “fill screen”.
We add items into the selection list, aligning each item to the right – or to the center – by calling a couple of procedures – AlignRight and AlignCenter (see below).
Aligning the Text
To align the text to the right, we need to add spaces in front of the selection item. If our selection item is “Honda”, then to make it appear on the right side of the ListPicker, we insert spaces in front so that “Honda” becomes ” Honda”.
There are several ways we can put spaces on the front of the text string. In the method here, we use the segment text block to extract a string of spaces from a long set of blank space characters.
If the width is, say, 40, and the string is “Honda” (5 characters long), then we add 35 blank spaces in front of “Honda” to create a 40 character wide string for the selection list:
Note that the X variable is a parameter variable. When our code calls AlignRight, the value “Honda” was passed through to the procedure where it is stored in the variable X.
Finally, we process the ListPicker AfterPicking event and display the selected item’s index (position in the list) and the text of the selected item, on the screen:
If we selected “Chrysler”, then the index position of 4 and the text “Chrysler” are displayed on the screen.
Making this work required us to use a “work around” of setting the button width to the maximum width of the screen, and then use the button width to estimate the width of the ListPicker selection list. This value is not precise and results in the alignment being slightly off. It may be necessary to add a small constant to the estimated text width – but whether that would work on all devices would require additional testing.
No source code link as there is very little source code in this example! Just enter the blocks you need for your own apps!
E-Books and Printed Books
If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.
- App Inventor 2 Introduction (Volume 1 e-book)
Step-by-step guide to easy Android programming
- App Inventor 2 Advanced Concepts (Volume 2 e-book)
Step-by-step guide to Advanced features including TinyDB
- App Inventor 2 Databases and Files (Volume 3 e-book)
Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
- App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book)
Step-by-step guide to graphics, animation and charts
Thank you for visiting! — Ed