Screen size for mobiles phones and Tablets - Android & iOS

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
archer2009BUSknbj
Posts: 72
Joined: Sat Apr 06, 2013 8:09 am
Location: London

Screen size for mobiles phones and Tablets - Android & iOS

Post by archer2009BUSknbj » Sat Apr 13, 2013 11:03 am

Could someone explain to me how we're supposed to go about using LiveCode 6.0 to design a mobile phone app that will work on any screen size?

When I first heard about LiveCode I was really excited that finally there might be a language that I would be able to understand that allows me to create apps for Android, iPhone and iPads but after 3 days playing with LiveCode 6.0 I'm feeling pretty disappointed with LiveCode's mobile phone abilities. My disappoint is all centered around LiveCode's ability to deal with different screen sizes.

How are people supposed to go about designing an App using LiveCode 6.0 that works on all the many screen resolutions of phones out there?

Do we have to create Cards/Stacks for all the various screen sizes out there and then detect what resolution the device supports or is there another way?

In the past I've created an App that was written in MIT Inventor and for that it used percentages - so if you had 4 buttons in a row it simply something like each button is 50 pixels high and takes up 25% of the screen width.

Is there a built in way to get your app to fit any screen size or to detect what screen size you have available and show a different card based on the size?

I came across the following App on the App store, which looks totally amazing visually. It was written in LiveCode and I'd love to create future apps which look this well polished.
But when I tried running it on my 2G iPod Touch everything was 4 times too large as it was written to fit an iPhone5. So now I'm thinking if this developer below who is obviously very talented hasn't been able to create an app that will run on a smaller screen size then what hope do I have?

Cut it Out Diet App
By steven THOMAS
(I'm not allowed to post links so you'll have to search for it)

Most of the Apps I want to create right now aren't that complex - they'll be things that act like a company brochure, have links to their YouTube, Facebook, Twitter feeds and RSS Feeds.
They're all apps that will display information rather then take in information so for me all I really need is the ability to display that information on any type of screen resolution and have it look consistent on all devices.

I saw Resolution Independence mentioned in the KickStarter project page - is this a long way off?
If this is a very long way off then I think I might be better off using some other product for the time being until LiveCode matures.

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Screen size for mobiles phones and Tablets - Android & i

Post by Simon » Sat Apr 13, 2013 9:11 pm

Here are two lessons for setting up for multiple resolutions:
http://lessons.runrev.com/s/lessons/m/4 ... esolutions
and here:
http://runrev.com/developers/documentat ... rs-course/
(think its lesson 4) simple to implement.
Not sure when the resolution independence is coming, but these lessons show you how to use "on resizeStack" until it is here.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

archer2009BUSknbj
Posts: 72
Joined: Sat Apr 06, 2013 8:09 am
Location: London

Re: Screen size for mobiles phones and Tablets - Android & i

Post by archer2009BUSknbj » Tue Apr 16, 2013 7:31 pm

Thanks those links were helpful.

The first one is far too complicated for me - but the 2nd at least gave me hope that LiveCode has some ability to resize right now.
It just looks like it's a very time consuming effort right now to resize screens on Live Code.

It looks like LiveCode is well behind the competition for actual layout stuff.

Can LiveCode handle Screens that Scroll?

All I've seen are examples of a fixed sized Screen but almost every single Mobile Phone App I use has a vertically scrolling screen.

I cannot see how LiveCode is able to produce an App that scrolls from Top to Bottom, all the Apps I use like the Google Play Store, Facebook, etc work this way.

Is it possible to create Apps that display like this?

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Screen size for mobiles phones and Tablets - Android & i

Post by Simon » Tue Apr 16, 2013 8:11 pm

Sure they can, it's shown in the beginners course.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

archer2009BUSknbj
Posts: 72
Joined: Sat Apr 06, 2013 8:09 am
Location: London

Re: Screen size for mobiles phones and Tablets - Android & i

Post by archer2009BUSknbj » Tue Apr 16, 2013 10:56 pm

One problem I've encountered is I'm trying to design an App and use my Samsung Galaxy Note as the test phone (800 x 1280 pixels)

As I want everything to look nice on this phone at least for demo purposes I need to use up the entire screen, but the trouble is in Portrait Mode by Phone's resolution is too tall for my monitor (1080p) vs 1280 pixels

Is there a way to zoom in and out on the desktop layout?

I've tried to find a Windows 7 Desktop Manager that will allow me to scroll up and down the screen but so far no luck, I've found several that left me create a virtual desktop and scroll left and right but no free ones for up and down.

I have an ATi Graphics card but can't see any way to set my screen resolution to anything greater then 1080p to create a bigger virtual desktop.

Nakia
Posts: 425
Joined: Tue Feb 21, 2012 8:57 am

Re: Screen size for mobiles phones and Tablets - Android & i

Post by Nakia » Wed Apr 17, 2013 6:25 am

Check this link out..

http://runtime-revolution.278305.n4.nab ... 52555.html
Note: I have not used this so can't comment on its pro's and con's.

AndyP
Posts: 614
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)
Contact:

Re: Screen size for mobiles phones and Tablets - Android & i

Post by AndyP » Wed Apr 17, 2013 9:42 am

Hi, have a look at altMobileRezer by Chip Walter.

Download here:

http://www.gadgetplugins.com/altplugins ... esizer.rev

Usage video here:

http://www.youtube.com/watch?v=TLWD5KsstFc

It's takes a little getting used to but will save you a lot headaches!

RunRev were late getting into the mobile platforms and have a fair amount of catching up to do...but I'm sure you will see this aspect getting better very soon.
Andy Piddock
https://livecode1001.blogspot.com Built with LiveCode
https://github.com/AndyPiddock/TinyIDE Mini IDE alternative
https://github.com/AndyPiddock/Seth Editor color theming
http://livecodeshare.runrev.com/stack/897/ LiveCode-Multi-Search

archer2009BUSknbj
Posts: 72
Joined: Sat Apr 06, 2013 8:09 am
Location: London

Re: Screen size for mobiles phones and Tablets - Android & i

Post by archer2009BUSknbj » Thu Apr 18, 2013 12:59 pm

altMobileResizer looks awesome :D

I'm not 100% sure how to install a plugin but hopefully I'll be able to figure it out and get it working - altMobileResizer looks like it might solve half my problems.

However I'm still unsure about how to create a vertical scrolling design that you can scroll using your fingers that most mobile phone apps use these days.

Facebook App for example has a set menu at the top which never moves, but everything else scrolls vertically.
Something like is shown on the left of this image

Image

I can't see how this is possible with LiveCode. As far as I can tell in LiveCode you have a set width and height and you can't create a scrolling design like that?

AndyP
Posts: 614
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)
Contact:

Re: Screen size for mobiles phones and Tablets - Android & i

Post by AndyP » Thu Apr 18, 2013 3:52 pm

Andy Piddock
https://livecode1001.blogspot.com Built with LiveCode
https://github.com/AndyPiddock/TinyIDE Mini IDE alternative
https://github.com/AndyPiddock/Seth Editor color theming
http://livecodeshare.runrev.com/stack/897/ LiveCode-Multi-Search

archer2009BUSknbj
Posts: 72
Joined: Sat Apr 06, 2013 8:09 am
Location: London

Re: Screen size for mobiles phones and Tablets - Android & i

Post by archer2009BUSknbj » Thu Apr 18, 2013 7:57 pm

Thanks for that link, it's nice to know there some ways to achieve a scrolling effect, although I found it quite difficult to understand the actual lesson - the wording was quite technical, but I was able to save it as an APK File and run it on my Samsung Galaxy Note. Unfortunately the actual user experience on the mobile phone isn't too pleasing, but that could be because it's an App that scrolls in every possible direction and not simply top to bottom.

I can see on the back end of things LiveCode is very powerful and able to do so many things but on the front-end of things it looks like it's going to be a bit of a struggle designing certain style of Apps for mobile phones using the current version of LiveCode. I hope RunRev put serious thought into how to make it easier to design beautiful and responsive front ends on LiveCode for mobile phones.

For now I might have to leave out scrolling effects from my App plans and try and design Apps which just fit on multiple Cards rather then a single card that scrolls top to bottom - altMobileResizer looks like it will be of great help at least until RunRev create a version of LiveCode that can support resizing.

paul_gr
Posts: 319
Joined: Fri Dec 08, 2006 7:38 pm
Location: Blenheim, New Zealand

Re: Screen size for mobiles phones and Tablets - Android & i

Post by paul_gr » Thu Apr 18, 2013 10:54 pm

Unfortunately handset makers have been looking for the sweetspot screen sizes, so they are throwing a lot of screen size/aspect ratio/screen density combos out there to see what sticks.
I don't know of any app making software that can rearrange an app made for a 7" 16:10 320dpi screen and automagically rearrange the interface so it fits it perfectly to a 4" 4:3 120dpi screen.
A perfect layout for one person will be a bad layout for someone else.
Might work for an app with only a couple of buttons but anything complex will have to have GUI objects resized and reshuffled, maybe hidden or moved and repositioned to a second screen.

I've used other app making tools and they don't do a better job than LC.

see Supporting Multiple Screens
http://developer.android.com/guide/prac ... pport.html
as a general guide to see what we are up against when trying to find an easy way to build interfaces for different devices.

Paul

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”