Implementing UI based on iOS 7+ / Google Material (?)

Business Apps
#61

Changes in release and a screen shot of “Open Dialog” which uses sprite sheet for on/off states.

  • Image buttons. These can be specified using a single image or two images (sprite sheet) for on/off states.  See menu.lua and look for “Open Dialog” for an example. See project wiki too https://github.com/arcadefx/material-ui/wiki/Buttons for more information.  The sprite sheets are those from Corona SDK and uses display.newImage() with the sheet and index of image to use.

open-dialog-graphic-button.png

Also working on newer button animation and starting on themes.  The below uses newNavBar(), newRoundedRectButton() and attachToNavBar().  “attachToNavBar()” can attach buttons and other mui widgets to the navigation bars.

button-rounded-and-rounded-outline.png

Download the above example: http://www.anedix.com/fileshare/buttons-example.zip

View example video here: https://youtu.be/ZgdS6kIFnss

#62

Material design video 4 for Corona SDK.  This addresses resolution sizing, fixes toolbar alignment and adds a tableView scrollview.  A regular scrollView will be added next.

Play the video: https://youtu.be/lIHK3H9QFv8

#63

Changes in release:

  • Added support for display.newImage() and display.newImageRect() via wrappers. See mui-image.lua for options. For an example usage see http://www.anedix.com/fileshare/login-form.zip and below is a screen shot of it.
  • Added “value” to both newTextField and newTextBox properties. This allows pulling the information later in another method.  Example: local email = mui.getWidgetProperty(“textfield_email”, “value”)
  • Added “value” to all user input fields, buttons, toolbars, slide panels, tile panels, etc.  Use getWidgetProperty() to get the value for the widget name.
  • Fixed a bug in newRoundedRect() where it left a white outline on buttons that did not use a shadow gradient.
  • Other fixes.

login-image-example.png

#64

Added

  • Shadow support to newRectButton(), newRoundedRectButton() and newCircleButton. Can specify to use shadow, set size of shadow and opacity of shadow.
  • “shadow” property to the above widget types and use mui.getWidgetProperty(“widget_name”, “shadow”) to get the shadow.

shadow-floaty-button.gif

#65

If I get time I will create another video, but for now I did implement rounded rectangle buttons with a nice shadow.  It gives the buttons a nice slight shadow gradually fading up.  I am working on switches, circle wipes (like a scene switch) and animated controls.

#66

Changes in release:

  • Added new Documentation website for the library documentation. I borrowed ideas from the Corona SDK documentation flow. It’s mobile compatible.
  • Bug fixes.
#67

Changes in release:

  • Added new method newProgressCircle().  Creates an animated progress circle.  Updated API docs for it.

progress-circle-anim-v1.gif

#68

Coming soon progress arc method based on time and percentage.  Special thanks to horacebury for mathlib.

Example video:

https://youtu.be/ISoU91exIpM

#69

Changes in release:

  • Added newProgressArc() method to draw a time based progress arc.  It uses a background and foreground color combination. The progress indicator text in percent can be hidden.
  • Bug fixes.
  • Special thanks and credit to horacebury for mathlib.
  • Will update this thread with example source.

newProgressArc-Example-1.png

#70

Very good Paul! 

This version free?

#71

For those following, this is based on Corona SDK free edition.  I am working on getting a GitHub repository for the project.  This way others can help out and provide feedback.

-Stay tuned! 

#72

Awesome! Please let us know when it’s up on GitHub, looking forward to seeing it.

#73

This is about ready for the ‘first’ alpha release. ;).  It works fine.  Anyone dealt with licensing?  I am thinking MIT license and would like others to contribute back, but before I upload code any thoughts on choosing a license?

#74

Don’t know much about licencing, but that sounds good.

#75

Not sure if it’s just me, but I couldn’t seem to find the materialui.lua on GitHub, only the licence and readme files.

#76

Here is the initial repo for the project.  This is alpha and will be continually developed.

https://github.com/arcadefx/material-ui

#77

Added createTextField() method and plan on making it “work” with a scrollable view.  The scrollable view could be collecting form data beyond what the screen area will hold.

Be sure to read the README about “Building for Device” so the keyboard won’t cover up the field being edited.

#78

Working on the library.  Making cards, yep those wonderful info cards.   :wink:   Going to add more objects to them.

card-bounce3.gif

#79

Changes for release:

  • Fixed issue with highlighting the active native text field.
  • Added support for widget.newScrollView() so native text fields can reside on a scrollable view.  Just supply the scroll view in the parameters like: scrollView = <scroll view>.  For an example see the fun.lua file.
#80

Changes in latest release:

  • Added createTextBox() method with scrollView support. This will create a text box using native.newTextBox() and has the option to include it on a scrollView.
  • Added automatic scrollView area adjustment. It will scroll the view area to reveal a native.newTextField() or native.newTextBox() hanging out of the scrollView area. Focus will be set on the field once adjustment is complete. Only vertical adjustment is made.
  • Fixed scaling issue in simulator and device (omitted config.lua device display spec, but can be used if desired).
  • Fixed scene switch issue, won’t crash if you hold the button a long time and release.
  • Updated demo scrollView to be taller.
  • Improved the code and various fixes.