Are you successful with form factors?

[sjordi 39]

Hi,

Just out of curiosity, are you using formfactors with FMX?
I have added Android and iOS various screen sizes and adjusted them all to fit and place components.

It looks like once deployed to the actual devices, it's just a joke, it's not usable and doesn't correspond to what's on screen at design time.

 

What happens to screens with "in between" sizes? in the IDE you have Android 4" and 5" (that are barely taken into account on real 4" & 5" devices), but what if you have a 4.2" ou 4.8"?

Working with all controls anchors is too much of a hassle.

 

Anyway, let me know if you succeed in those form factors, and if you can share a tip or two, it would be wonderful.

Thanks

Steve

Edited March 3, 2021 by sjordi

[Rollo62 536]

Never even thought about that"Pixel-Perfect" layout design, maybe only phone / tablet.

That cannot work in the real world with zillion formats.

 I use Layouts with TAlignLayout, with no headaches.

[sjordi 39]

Thanks for your input.
It definitely helps using layouts to at leas resize and position things the way I want.
What  I don't want is a responsive-like app, behaving like a webpage

But I think that using layouts with the right corner anchors actually does the trick...

I'll tinker a bit more with my current app to familiarize.

[Dalija Prasnikar 1396]

12 hours ago, sjordi said:

What  I don't want is a responsive-like app, behaving like a webpage

I am afraid that your wishes are not aligned with reality.

 

Unless you write your application for specific customer, targeting specific devices (screen sizes), your layouts will need to be dynamically adjustable. Like @Rollo62 said, this is mission impossible with zillion devices on the market. 

 

I think that using different form size layouts will only make things more complicated, than adjusting layout at runtime, even if you need to tweak it through code.

[Rollo62 536]

12 hours ago, sjordi said:

What  I don't want is a responsive-like app, behaving like a webpage

... and why ?

 

That sort of thing is what most people out there would consider a cool design, I guess.

[sjordi 39]

Quote

That sort of thing is what most people out there would consider a cool design, I guess.

Not my customers. They absolutely all hate so-called "web apps". They want an app that offers a consistent interface.

I talk about "responsive" the way webpages are... say your screen is not as wide, then controls clutter on top of each others instead of being next to each others.

That's something I want to avoid. Otherwise I would opt for web "apps" in that case with all problems related to them (controls jump to another positions when the CSS is finally loaded, things are often not aligned when responsively repositioned, doesn't work without an internet connection).

I want a consistent UX.

 

But I'll try to think more as a vertical scrollable layout on which I would have more control on them.

Thanks anyway.

Layouts seem to do a good job keeping things correctly together (if designed correctly).

Of course cluttered GUI would be a nightmare, so I'm going to avoid that. 
As Sarina Dupont said, don't think "desktop" for mobile apps. But still, some control on the overall appearance is important to the original look and feel the developer intended to give his/her app.

 

 

[Dalija Prasnikar 1396]

1 hour ago, sjordi said:

I talk about "responsive" the way webpages are... say your screen is not as wide, then controls clutter on top of each others instead of being next to each others.

You are describing bad web page (I know there are plenty of those in the wild). This is not how web pages should behave 🙂 Nor any other GUI...

 

In general, most mobile designs have some kind of scrollable container as root and then you adapt your content to fit the screen width, and what does not fit, you wrap it around. Additionally, you can have some fixed top or bottom bar for navigation. Only the simplest screens with just few controls, can avoid scroll bar.

[Rollo62 536]

But "responsive" in webpages means that it might look different and "optimized", depending on the different platform.

Desktop maybe 3 columns, tablet maybe 2 columns, phones maybe 1 column,

and also differing portrait and landscape.

 

"Responsive" doesn't necessarily mean cluttering something, but the contrary.

 

Nowadays I see a kind of "perversion" of the responsive design very often, maybe from mobile first approach:

Only 1 column mobile design for a phone, no matter if on desktop HD or 8K.

I would call it "mobile only - mobile anywhere".

You always have to scroll 1 colum stretched, with gigantly large images infinitely, where you dont see the end of the tunnel (bottom).

 

That is IMHO similar bad design to cluttering, only to the extreme at the other side.

It makes much sense to change the mode of display, depending on where your running at.

(without cluttering and over-simplification)

 

 

 

Edited March 5, 2021 by Rollo62

[Attila Kovacs 629]

Don't forget that this is not just about screen sizes. On portable devices the screen is also the input device.

It's not just about wrapping some controls but usability.

[sjordi 39]

@Rollo62 and all you're right.

I think the main difficulty is where to place the cursor between too much info and not enough, rendering the app worthless 

I'll tinker a bit over the week-end 🙂 

[Guest]

10 hours ago, sjordi said:

I'll tinker a bit over the week-end

many forget that, in fact, it doesn't take much code to effectively have a responsible layout in Delphi.

 

Many forget the native properties of the components, and, which are found in most of them, for example:

• AlignWithMargins,
• Margins,
• Align,
• Constrains,
• Anchors,
• Padding
• Scale (at FireMonkey)

For example, if you use: AlignWithMargins + Margins + Align = you solve the problem with "Components over Components", for example. I like use it with follow:

• this sample can works with any other components with same properties. Of course, this is a not "magic", but, a beggin for dont worry about dont overriding itself.
  • the IDE do some like this when you drop a component in your forms!
    • Of course, my tatic it's more simple and works for me!
• TPanel as my container for my buttons (same task to TLayout in new IDE or any other container that you desire)
• TButtons with:
  • Margin Left =  10, Top = 5, Bottom =5, Rigth =0 (my Left = 10, then, Right can be "0" for dont have 2x10 for second button); - my arbitrary values...
  • AlignWithMargins = True;
  • Align = Left
• Later, in my code, I just calculate the (Width of my Container = TPanel) - n(TButtons.Width) for my first button), divided by 2, if you want center it!
• With this value in hand, I just define my "PanelOfButtons.Padding.Left" and others buttons will aligned
  • the others, its properties do the rest.
• it's ready!
• now, you can use this way in your "Resize" event, for example, for dynamically use!

 

In the newer IDE, we still have the property to indicate the scaling value of the visual component in relation to its container.

• in Firemonkey, you have more alternatives!

 

I myself have one or the other example of using positioning and relative size in relation to the location where the visual component is located, in relation to the screen as a result.

 

Screenshots

 

 

    

 

 

hug

Edited March 5, 2021 by Guest