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

Business Apps
#1

Has anyone created an auto-layout and skinned theme in Corona SDK to look similar to either iOS 7+ or Google’s Material design UIs?  (free/paid)

#2

Here is a first example of a Google Material like button (video).  I am working on more than just a button as I need it for a project.  I could release it all free.  Basically the controls will ‘auto-size’ themselves for whatever screen size and button dimensions. See video https://youtu.be/h4aWDBtYSwY

Of course I am refining it, but it’s my first Corona experiment since a while back.

#3

The current widget library has an iOS 7 theme. We offer two Android themes holo light and holo dark. These should mimic Android UI features. But they definitely don’t do the animations of the lighter circle expanding from the touch point. You would have to download the open source code for the widget library from our github repo and tinker with the code yourself

https://github.com/coronalabs/framework-widget

Rob

#4

Thanks Rob, I will check it out.  It’s fun putting this UI together.

#5

You could always vote up this Feature Request too:

http://feedback.coronalabs.com/forums/188732-corona-sdk-feature-requests-feedback/suggestions/9898833-theme

Rob

#6

Well, I didn’t even know that was there.  I voted!! :slight_smile:

#7

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

#8

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.

#9

Very good Paul! 

This version free?

#10

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! 

#11

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

#12

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?

#13

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

#14

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.

#15

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

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

#16

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.

#17

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.
#18

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.
#19

Changes in latest release:

  • Added method createProgressBar() and it will create a “determinate” progress bar.
  • Added scrollView support for widgets.  Also addressed the bug where widgets on a scrollView do not get called with the event handler.
  • Bug fixes.
#20

Changes in latest release:

  • Added method createToggleSwitch() and it will create a toggle switch.  Colors can be specified for on/off states.
  • Improved scrollView support.
  • Bug fixes.