Index Key Link
action Click to view
add Click to view
affiliation Click to view
align Click to view
alignment Click to view
alpha Click to view
analog clock Click to view
animated image Click to view
app drawer Click to view
app group Click to view
application Click to view
audio Click to view
background Click to view
backup Click to view
beginner Click to view
behavior Click to view
blur Click to view
calendar Click to view
card Click to view
checklist Click to view
circle indicator Click to view
clean slate Click to view
clock Click to view
code block Click to view
code of conduct Click to view
color picker Click to view
communities Click to view
compass Click to view
compatibility Click to view
complementary color Click to view
conceptual learning Click to view
configure Click to view
contact Click to view
contrast Click to view
contribute Click to view
date Click to view
date / time Click to view
default launcher Click to view
delete Click to view
desktop Click to view
developer Click to view
discussion guideline Click to view
distribution Click to view
drawer Click to view
drawer handle Click to view
dual-screen Click to view
dynamic color Click to view
dynamic image Click to view
dynamic text Click to view
edit Click to view
editing Click to view
edit mode Click to view
export Click to view
feature Click to view
file naming Click to view
flip-style Click to view
foldable Click to view
folder Click to view
font Click to view
full screen Click to view
gaussian Click to view
gesture Click to view
getting started Click to view
gradient Click to view
group Click to view
heading Click to view
help Click to view
hide Click to view
html Click to view
hue Click to view
icon Click to view
import Click to view
install Click to view
installation Click to view
instructable Click to view
intellectual property Click to view
issue Click to view
key Click to view
keys & gestures Click to view
label Click to view
landscape mode Click to view
launcher action Click to view
layout Click to view
liability Click to view
lifetime purchase Click to view
light source Click to view
link Click to view
list Click to view
luminance Click to view
macro Click to view
macrodroid Click to view
margin Click to view
mask Click to view
media controller Click to view
mobile Click to view
month/year/day Click to view
move Click to view
multi-screen Click to view
namespace Click to view
navigation Click to view
object Click to view
object design menu Click to view
official Click to view
official blog Click to view
offset Click to view
option Click to view
ordinal Click to view
page Click to view
page indicator Click to view
paste Click to view
performance Click to view
permission Click to view
pin Click to view
png Click to view
quoting Click to view
radius Click to view
registration Click to view
reminder Click to view
remove Click to view
resource Click to view
rotate Click to view
rss Click to view
save Click to view
scroll Click to view
search Click to view
select Click to view
shadow Click to view
shape Click to view
share Click to view
sidebar Click to view
slider Click to view
sliding drawer Click to view
spacing Click to view
stretch Click to view
syntax Click to view
system setting Click to view
system ui Click to view
table Click to view
table of content Click to view
tasker Click to view
taxonomy Click to view
temperature Click to view
termination Click to view
terms of use Click to view
text Click to view
theme Click to view
toby Click to view
trademark Click to view
transform Click to view
transparency Click to view
transparent Click to view
troubleshooting Click to view
typeface Click to view
ui Click to view
user conduct Click to view
user interface demo Click to view
variable Click to view
wallpaper Click to view
warranties Click to view
weather Click to view
webp Click to view
website Click to view
welcome Click to view
widget Click to view
wiki Click to view
wiki editing Click to view
window Click to view

Layout - List

Dialog selections are discussed below the image. To navigate to an item, select it in the List Layout image.

List Layout Object Design

Selection Options Pin Copy Cut Save Delete Empty area Empty area Selection: Back- Forward Z-order: front - back Group Rotate - Transform Align Not clickable since it is selected. Tap an empty area to navigate.

List Layout Object Design screen. Make selection above.

List Layout

This screen shows the List Layout object design screen, which provides spatial positioning, canvas boundaries, and action toolbars for linear vertical container arrangements.

Steps to Complete the List Layout

The user will customarily follow these steps to complete the list layout setup:

  1. The container with the 5 default object placeholders can be moved to another location by tap/hold/dragging the center of the selected container itself. Individual object placeholders cannot be moved independently, only in tandem.
  2. The 5 default placeholders can be increased or decreased by using the Object Design menu Options icon which will open the Option Edit dialog shown here . While this interactive demo can not apply a list layout to the interactive demo, users wanting to explore its Options for further interaction and explanation can tap the Option icon in the List Layout dialog at the top of this page.
  3. To assign an action to a + placeholder:
    1. Deselect the List Layout container by tapping an empty space outside of the layout placeholder.

List Layout Objects Description

List objects

  • List objects : Placeholders, shown in Edit On mode, for the layout objects. The default “List Layout” contains 5 vertically aligned objects, with the layout container shown as selected. Tapping outside the boundary deselects the layout. At that time, a tap on a + will activate an Action dialog for selection of which action is desired (application, window, sequence, etc.)
    • Coordinate Markers (725, 65, 951): Real-time pixel distance markers from canvas edges. (not adjustable in this demo)
    • Anchor Nodes (Blue Handles): Boundary adjustment handles located at midpoints and corners to scale width and height. (not adjustable in this demo)

Other objects on this page are described below. Those that are not actionable in this demo offer a video of the action or user involvement in the selection.

Object Design Menu (Top)

Notice the Object Design Menu at both the top and bottom of the screen. The icons contained in these menus describe what will happen or what options are available for the selected object. Read below and even view a demo of what happens when specific icons are selected.

TOP Object Design Menu - Top

Selection

- Once the selection icon is tapped, the user can drag left to partially intersect any object selected or right to fully select any object.

Action

- This would normally enable the object's action when tapped or swiped, such as application, folder, or calendar. However, since the “layout” is selected, the Action icon is grayed out. A user will want to assign “actions” to the objects within the list layout. To accomplish that, tap an empty area to deselect the layout. This changes the Launcher focus from Object Design mode to Page Design mode, enabling a user to tap the layout's + icons to assign actions.

Option
  • - Tap to open the Options Edit dialog for setting the number of rows, launch sounds, icon, labels, and background features.
Pin
  • - With an object selected and then the pin icon tapped, the object will now be visible in it's current location on all pages of the setup.
Copy
  • - Creates a copy of the object which can then be pasted, using the Object Add (+) - Paste option. The new copy will be placed on top of the existing object but can be selected and moved to the desired location.
Cut
  • - Removes the object from the screen location and allows the user to then paste the item to another location (such as another page) using the Object Add (+) - Paste option.
Save
  • - places a copy of the object in the Resource's “Saved” folder for future access
Delete


Object Design Menu (Bottom)

BOTTOM Object Design Menu - Bottom

Selection: Back - Forward
  • Back - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects existed, the user can cycle through all objects by tapping the icon, then proceed with the object's modification.
    • For both the back and forward icons, see a demo here .
  • Forward - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects existed, the user can cycle through all objects by tapping the icon, then proceed with the object's modification.
Z-order: Front - Back
  • Front - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would bring the selected object to the front “layer” to appear before other objects.
    • For both the Z-order Front and Z-order Back icons, see a demo here .
  • Back - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would move the selected object to a “layer” behind other objects.
Group
  • Group - While the 3 objects in this image are selected, they are currently separate objects. Tapping this icon groups the 3 objects into a single object. This is useful when needing to move the group items at the same time.
Rotate - Transform
  • Rotate - Transform - Grayed out in this image (inactive) since more than 1 object is selected. If only a single object is selected, tapping the icon opens the rotate-transform dialog to rotate the object around its x or y axis and adjust its rotation, scaling, and translation… It's complicated, so experiment to learn.
Align
  • Align - Grayed out in this image (inactive) since all objects in the image were selected. If multiple objects exist, the user taps the align icon, which reveals a horizontal or vertical alignment bar when it intersects another object. This is useful for centering or matching top/bottom areas of objects.
    • See a demo here.

===== Hidden Index Anchors ===== ui-layout-list-options ui-layout-list-toolbar-top ui-layout-list-toolbar-bottom ui-layout-list-deselected

Discussion

Enter your comment. Wiki syntax is allowed:
Please solve the following equation to prove you're human. 89 +15 =