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:

Screenshot_20160502-115325Is there a way to center or right justify the items that appear in the ListPicker list like this? The first 4 items in this list are right justified and the last two are centered:

Screenshot_20160502-114442The answer to that question is basically “yes”, but it may not be perfect – as we will see.

Designer View

In the Designer View, we drag a ListPicker component from the Palette and then set the properties for the ListPicker.

DesignerViewOur sample app displays the ListPicker button (the ListPicker looks like and acts like a button – when touched, the button launches the ListPicker selection list on a new screen).

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”:

DesignerViewWidthThe 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:

DesignerViewTextAlignmentBlocks Code

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).

Blocks1lblSelected refers to the Label component that will display the selected item. We initialize it to display the calculated ListPickerWidth.

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:

BlocksAlignRightIn our example for “Honda” we extract 35 blank spaces from the text field containing the spaces and then join the word “Honda” on to the end, giving us:

”                                   Honda”

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.

Centering is handled in a similar fashion – except we add only half as many spaces:BlocksAlignCenterMake sure the string containing the blank spaces, above is long enough!

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:

BlocksAfterPicking

If we selected “Chrysler”, then the index position of 4 and the text “Chrysler” are displayed on the screen.

Screenshot_20160502-114810

Issues

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.

Source Code

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

5 thoughts on “Aligning the text that appears in ListPicker”

Comments are closed.