Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Implementing UI based on iOS 7+ / Google Material (?)
Started by paul.cardwell Mar 14 2016 06:53 AM

104 replies to this topic
ios android material flat
[TOPIC CONTROLS]
Page 1 of 5 1 2 3 »
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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)

 

 

 

 



[TOPIC: post.html]
#2

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.

 



[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,476 posts
  • Enterprise

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



[TOPIC: post.html]
#4

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#5

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,476 posts
  • Enterprise

[TOPIC: post.html]
#6

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Well, I didn't even know that was there.  I voted!! :)



[TOPIC: post.html]
#7

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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



[TOPIC: post.html]
#8

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.



[TOPIC: post.html]
#9

xdookie

[GLOBAL: userInfoPane.html]
xdookie
  • Observer

  • 14 posts
  • Corona SDK

Very good Paul! 

This version free?



[TOPIC: post.html]
#10

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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! 



[TOPIC: post.html]
#11

sargntpi

[GLOBAL: userInfoPane.html]
sargntpi
  • Observer

  • 14 posts
  • Corona SDK

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

[TOPIC: post.html]
#12

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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?



[TOPIC: post.html]
#13

sargntpi

[GLOBAL: userInfoPane.html]
sargntpi
  • Observer

  • 14 posts
  • Corona SDK

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

[TOPIC: post.html]
#14

sargntpi

[GLOBAL: userInfoPane.html]
sargntpi
  • Observer

  • 14 posts
  • Corona SDK

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.

[TOPIC: post.html]
#15

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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

 

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



[TOPIC: post.html]
#16

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.



[TOPIC: post.html]
#17

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#18

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#19

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#20

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

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.


[TOPIC: post.html]
#21

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in latest release:

  • Added createDialog() and it will create a modal with up to two buttons (Cancel, Okay types).  Callbacks can be set for both. Colors can be set for buttons, dialog background, fonts and easing animation when dialog shows/hides.  If no buttons use method dialogClose() to terminate the dialog.
  • Improvements and bug fixes.


[TOPIC: post.html]
#22

redninjacat

[GLOBAL: userInfoPane.html]
redninjacat
  • Contributor

  • 196 posts
  • Corona SDK

Paul,

 

This is fabulous work you are doing! Thank you so much for pouring so much time and effort into this and making it free and available for everyone. This is quite the gift to the Corona community!

 

Like most Corona developers, I find Corona to be much more useful for games than for traditional apps. However, this library is going a long way to make business apps using Corona a lot more feasible. Thank you!

 

(I now follow you on both Twitter and Youtube.)



[TOPIC: post.html]
#23

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

@jerejigga - Thanks for the nice comment! :)

 

Changes in latest release:

  • createSlider() - Create a slider for doing percentages 0..100. Calculate amount in call backs: callBackMove (called during movement) and callBack = at the end phase.  Values are in percent (0.20, 0.90 and 1 for 100%). Limitations: horizontal only and no labels (both to be addressed).  See fun.lua or 2nd scene for an example.   See mui.lua and method sliderCallBackMove() to get current value of slider.
  • renamed method dialogClose() to closeDialog()
  • improvements and bug fixes.


[TOPIC: post.html]
#24

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in latest release:

  • Added "labelFont" option to createToolbar
  • Added "labelText" option to createToolbar "list" attribute. Allows the mix of Material icon font and text/word font. Label a button as "View" the button contains the text "View"
  • Mixing icon font and text/word font on same toolbar is allowed.
  • Added "labelFont" option to createToolbar
  • Added "labelText" option to createToolbar "list" of buttons. Allows a button to contain: Icon only, Text only or Icon with Text beneath.
  • "x" option to createToolbar now works as expected. Set to 0 if wanting to use a toolbar that is 100% width of display.
  • "width" option to createToolbar now works as expected. If width is omitted the toolbar width defaults to 100% or display.contentWidth
  • "touchpoint" option to createToolbar now works as expected.
  • "callBack" for createToolbar works as expected. It will do the animation and then call the user-defined callBack.


[TOPIC: post.html]
#25

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes:

  •  `getEventParameter` - returns the event MUI widget parameters for the current widget.  Get the event target, widget name, widget value ( ex: getEventParameter(event, "muiTargetValue") ).  The value can be set when creating a widget.  See menu.lua for setting the values and mui.lua callBacks for getting values (example would be actionForSwitch() method).
  • All widgets support a "value" and can be accessed in the callBacks by getEventParameter() method. See mui.lua for examples.
  • Event handling refactored.  The old way will be deprecated in future releases.  See callBacks in the mui.lua for changes.



[topic_controls]
Page 1 of 5 1 2 3 »
 
[/topic_controls]