Android Wireframe Toolbox

Ribbon

Design > Diagram > Toolbox

Keyboard Shortcuts

Alt+5

Android Phone

Generates a frame for the face of the Android Phone you are modeling. A prompt displays for you to specify portrait or landscape orientation.

Child controls will be contained within the area of the screen.

Tagged Values:

• MenuButtons - click on the drop-down button and select to 'Show' or 'Hide' the menu button bar at the bottom of the screen
• NotificationBar - click on the drop-down button and select to 'Show' or 'Hide' the Notification bar at the top of the screen

Android Tablet

Generates a frame for the Android Tablet you are modeling. A prompt displays for you to specify portrait or landscape orientation.

Child controls will be contained within the area of the screen.

Tagged Values:

• MenuButtons - click on the drop-down button and select to 'Show' or 'Hide' the menu button bar at the bottom of the screen
• NotificationBar - click on the drop-down button and select to 'Show' or 'Hide' the Notification bar at the top of the screen

Client Area

Generates a frame element that represents the client area of the device.

Tagged Values:

• Border Style - click on the drop-down arrow and select to render the border as a solid line or a dashed line, or to have no border at all (None)
• ScrollbarH - click on the drop-down arrow and select to place a horizontal scrollbar at the top or bottom of the client area, or to have no horizontal scrollbar (<none>)
• ScrollbarV - click on the drop-down arrow and select to place a vertical scrollbar on the left or right of the client area, or to have no vertical scrollbar (<none>)

Expandable List View

Generates an element that represents a two-level grouped list that can be expanded to show one or both levels of item.

Double-click on the element to display the 'Properties' dialog at the 'Wireframe' page, which shows the root node (the Expandable List element name), the group heading items (directly under the element name) and the group items (under the group headings).

• To add a new item click on the level above (the element name or the group heading names) and on the Add button, and in response to the prompt type in the name of the item, which adds the name to the bottom of the section of the list you have created it in
  To position the item on the list, click on it in the list and click on the buttons
• To remove an item from the list, click on it and click on the Remove button; the item is immediately removed from the list

Click on the Item Name (the first-level list item directly underneath the element name).

• Name - type in the name for this item group
• Expanded - click on the drop-down arrow and select True to show the sub-items for this item, or False to hide the sub-items

Click on a sub-item name (the second-level list item) directly under an Item name. Sub-item nodes do not have any child nodes.

• Name - type the name of the sub-item
• Selected - click on the drop-down arrow and select True to highlight the item as selected, or False to omit the highlight

Table

Generates a Table element with labeled columns, rows and cells.

Double-click on the table to bring up the element 'Properties' dialog at the 'Wireframe' page, which provides the facilities for editing the table (adding, renaming and deleting columns and rows, changing the column width and editing the cell text) through context menu options and buttons. Note that the editor does not provide a true image of the table's appearance on the screen.

• Draw Lines - click on the drop-down arrow and select True to display horizontal and vertical lines between the table cells, or False to hide the lines
• Highlight Headers - click on the drop-down arrow and select True to highlight the header of each column, or False to leave the table columns a uniform color

Tab Host

Generates a tab control element on the diagram. You can name the tabs and mark them as selected; however, child elements will not 'switch' when changing tabs (that is, setting a different tab as selected will still display the same child items in the tab space).

Tagged Values:

• Tabs - click on the drop-down arrow and click on the tab that is to be highlighted as selected
  You can name the tabs, and add more to the list, by editing the 'Values:' list in the Tagged Value notes

If you reduce the size of the element so that all tabs cannot be shown, a scroll icon () automatically displays in the top right corner of the element.

Simple List

Generates a list box containing a list of items with no sub-items.

Double-click on the element to display the 'Properties' dialog at the 'Wireframe' page. To:

• Change an item to different text, overtype the 'Item<n>' text in the 'Name' field
• Highlight the item as selected, in the 'Selected' field click on the drop-down arrow and select True
• Add another item, click on the element name and on the Add button, and type in the item name
• Remove an item from the list, click on it and click on the Remove button
• Move an item to a different position in the list, click on it and click on one of the buttons as appropriate

2 Lane List

Generates a list box as for a Simple List, but each item name is in bold and can have a description underneath the item name.

Double-click on the element to display the 'Properties' dialog at the 'Wireframe' page.

• To add the description, click on the item name and, in the 'Text' field, type the description text

Other options are the same as for the Simple List.

Checklist

Generates a list box as for a Simple List, but each item name has a tick outline to the right of it. For selected items, the outline is filled.

Double-click on the element to display the 'Properties' dialog at the 'Wireframe' page.

• To set a tick to selected (filled) click on the 'Checked' drop-down arrow and click on True; to change the tick to unselected (outline), set the field to False

Other options are the same as for the Simple List.

Single Choice List

Generates a list box as for a Simple List, but each item name has a radio button outline to the right of it. For a selected item, the outline is filled.

Double-click on the element to display the 'Properties' dialog at the 'Wireframe' page.

• To set a radio button to selected (filled) click on the 'Selected' field drop-down arrow and click on True; to change the radio button to unselected (outline), set the field to False
  All items can be set to False (unselected), but if more than one item is set to True (selected) only the item lowest on the list displays as selected

Other options are the same as for the Simple List.

Switch

Generates an element representing a simple Android switch. The switch can have two states (such as On and Off) and a label taken from the name of the element.

Tagged Values:

• States - click on the drop-down arrow and select the switch position depicted by the element
  You can edit the 'Values:' field in the Tagged Value Notes to change the text of the state values
  You can add more than two values, but you can only toggle the 'States' field between the first two values in the list; the other values are ignored if selected

Rating Control

Generates an element depicting a star-rating band. The element always shows five stars, and the number of filled stars indicates the rating.

Tagged Values:

• Rating - click on the drop-down arrow and select the number of stars to show filled (the rating)

You can only re-size the element horizontally; the vertical dimension adjusts automatically to always depict five uniformly-shaped stars.

Toggle Button

Generates an element depicting a single-celled switch with no label (the element name is not shown).

You can edit the depicted state in the same way as for the Switch element (above).

Progress Bar (Large)

Generates an element representing the circular Android progress icon.

Progress Bar (Horizontal)

Generates an element representing the progress of a process, defaulted to 30% complete.

Tagged Values:

• Progress - type the percentage completion of the progress to depict on the element

Button

Generates a simple labeled Button element, the label text being the name of the element.

Radio Button

Generates a labeled radio button element, the label text being the name of the element.

Tagged Values:

• State - click on the drop-down arrow and select the state to depict - 'Selected' (filled) or 'Unselected' (outline)

Checkbox

Generates a labeled checkbox element, the label text being the name of the element.

Tagged Values:

• State - click on the drop-down arrow and select the state to depict - 'Checked' (tick icon) or 'Unchecked' (box outline)

Seek Bar

Generates an element representing the progress in playing through an audio or video file.

Tagged Values:

• Progress - type the percentage progress to depict on the element

Keyboard

Generates an element that depicts a keyboard for Android applications.

Tagged Values:

• Type - switches the image between a text (QWERTY) keyboard and a numeric keyboard

Spinner

Generates an element representing the Android version of a drop-down combo box.

Tagged Values:

• Expanded - click on the drop-down arrow and select True to depict the combo box in use, displaying all values, or False to depict the combo box with a single selected value
• Values - click on the drop-down arrow and select the value to depict as currently selected in the combo box
  You can change the text of the values, and add more to the list, by editing the 'Values:' list in the Tagged Value notes

Plain Text

Generates a text element with no border, the text being the element name.

Tagged Values:

• Align Text - click on the drop-down arrow and select to align the text to the left, center or right of the element frame
• Multiline - click on the drop-down arrow and select True to allow the text to wrap around onto more than one line (automatically increasing the element depth), or False to only show the text that fits on one line within the current element width

Multiline Text

Generates a text element with no border, but that can contain multi-line text with basic HTML formatting.

Tagged Values:

• Align Text - click on the drop-down arrow and select to align the text to the left, center or right of the element frame
• Text - click on the button to edit the Tagged Value Note screen, on which you can create the text to depict on the diagram; this can use HTML formatting tags such as <b> </b> for bold or <u>  </u> for underlined - not all HTML formatting is supported

Image

Generates a place holder to indicate where an image will be placed on the phone or tablet.

You can display an actual image by assigning an alternative image to the element.

Video Player

Generates an element that represents a video player control on the phone or tablet.

Audio Player

Generates an element that represents an audio player control on the phone or tablet.

Calendar

Generates an element depicting a calendar (the default image), showing the current month, day and year based on the system date.

Tagged Values:

• DateFormat - click on the drop-down arrow and select the date format to display if spinners are shown:
       -  d/m/y
       -  m/d/y
       -  y/m/d (not possible if the calendar is also displayed)

• ShowCalendar - defaults to True to display the calendar; if spinners are also displayed, the calendar will force the spinner display to show the year at the right-hand end, and will replace the year spinner
  If set to False, the day, month and year spinners display regardless of the 'ShowSpinners' value
• ShowSpinners
       -  If set to True AND 'ShowCalendar' is True, displays spinner 
          controls for the day and month (the calendar acts as a year
          marker)
       -  If set to False AND 'ShowCalendar' is True, no spinners are
          shown with the calendar
       -  If 'ShowCalendar' is set to False, the day, month and year
          spinners are automatically displayed in the format defined in
          'DateFormat', showing the system date

You cannot resize this element.

Date Picker

Generates an element that depicts a set of spinners showing today's date, derived from the system date.

Tagged Values:

• Date - click on the drop-down arrow and select a different date from the calendar; if the current date is not today, you can reset it to today's date by clicking on the Today button, or by simply clearing the 'Date' value field
• DateFormat - as for the Calendar element
• ShowCalendar - defaults to False to hide the calendar; otherwise, as for the Calendar element
• ShowSpinners - as for the Calendar element, above

You cannot resize this element.

Time Picker

Generates an element that depicts a pair of spinners showing the current time, in hours and minutes, derived from the system clock.

Tagged Values:

• 24 Hour View - click on the drop-down arrow and set to True to show the time in 24-hour format, or False to display the time in 12-hour format with AM or PM to the right of the time
• Time - overtype the hours, minutes and AM/PM setting to display a time other than the system time (you can only set the time in 12-hour format); to revert to the system time, overtype the field with '12:00 AM'

You cannot resize this element.

Clock

Generates an element that represents an analog clock face with hour and minute hands and no numerals, displaying the system time. You can change the rendition to a digital display.

Tagged Values:

• 24 Hour View - if you set the 'Type' to 'Digital', click on the drop-down arrow and select True to display the time in 24-hour format, or False to display the time in 12-hour format with AM or PM to the right, as appropriate
• Time - overtype the hours, minutes and AM/PM setting to display a time other than the system time (you can only set the time in 12-hour format); to revert to the system time, overtype the field with 12:00 AM
• Type - click on the drop-down arrow and select 'Digital' to display the time as a digital display, or 'Analog' to display the time as the clock face  

You can resize the element in 'Analog' format, but not in 'Digital' format.

Android Phone / Android Tablet

These Patterns create example models of the two Android product configurations. You can use them as your examples of how the elements are designed, as basic components of a larger model, or as the starting point to develop a more detailed model of one or more of the products.