Created using Proto.io library of fully interactive, native watchOS components.

This simple prototype demonstrates how have a container expand and collapse while moving adjacent content in sync.

Here's a demo showing a basic color picker using a container with 4 states for both the colored star and the color swatches.

Basic shapes like rectangles, lines, circles, text and more are available and they can be dropped on the canvas to create the very first draft of a mobile app in order to demonstrate the flow and functionality of the app.

Proto.io comes with UI libraries for iOS, Android Material Design, Windows and Apple WatchOS so that people can easily drag and drop those elements to bring their ideas to life. Simple interactions can also be applied, primarily screen-linking and basic navigation.

This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

My own version of the Pandora Taylor Swift example provided by Proto.io's video tutorial.

If you need to get the Y position of a vertically scrolling container, create a text box. Then on the container scroll trigger, set a variable that evaluates the numerical callback value from the event (Y position). Then add a callback that changes the text property of the text box by reading from the variable.

3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Prototype of the Material Design menu animation of Google Calendar for iOS. See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library" http://docs.proto.io/videos/adaptive-prototypes-material-design-ui-library/ Skip to minute 35:14 of the webinar to specifically see this prototype being made. TAGS: material design google iOS calendar Enjoy.