Android Mobile application using Firemonkey

[Antony Augustus 4]

I developed an application using Delphi Firemonkey for managing my own commercial complex. I have named it EasyTenant. Overall development experience is good, though not excellent. Development was really faster because of the RAD nature. Third party components are limited for Android Firemonkey. GUI is average, not rich like other languages like Swift, Java, etc. Delphi lovers please give your feedback by looking at the screenshots. UX for me is okay not excellent.

Edited February 1, 2020 by Antony Augustus
Spelling mistake

[baeckerg 6]

sorry to say - but not appealing to me.

 

Components limited to Android Firemonkey? - This is odd as Firemonkey is supporting iOS, Windows, MacOS

 

Did you look at TMS FNC framework - one of my favourites for GUI development

[Antony Augustus 4]

I agree that the GUI is not appealing. By components limited, I meant there are limited set of 3rd party components for Firemonkey(Android, iOS, Windows, etc) as compared to .net technologies, java, etc

[Guest]

@Antony Augustus First i want to sound my Congratulation on your application !

Looks nice and good application, few things i want to suggest :

1) Drop the old icons, they just looks out of place , for the small ones you can remove them completely and still have nice look, for the big buttons , try to find bigger with less contrasted colors, or even one color, they will look much nicer, yes definitely those small icons should be removed or replaced with bigger ones, too small to be considered visual aid anyway.

2) Text font and size if really nice and need no to change, the positions are nice too, about the color: black is nice too, except that screen shot of "Rent Collection(s)", it just remind me of Delphi 5 application running on Windows 98.

3) Search the internet and find more modern color, something more eye friendly and appealing, here an example https://www.w3schools.com/colors/colors_trends.asp 

4) With FireMonkey you really don't need much of third party components to make things look modern, take an example your last screenshot, that combobox popup window can be replaced with your own rectangle with curved corners will be more appealing .

5) If you app is fully functioning with current components set, then you don't need new or different components.

 

always look after the small and fine details, away from that your app looks nice one , so why not go in download spree and look at different application, i think you will have many ideas to add or implement.

[Antony Augustus 4]

Thanks @Kas Ob. They were all great suggestions! I will implement those in my application.

[Guest]

4 hours ago, Antony Augustus said:

Thanks

You are welcome !

 

If it not a burden then please share with us your app with the new look, speaking for myself i love to see the changes you will make.

[baeckerg 6]

Sorry - I should have congratulated on the app - I consider it a good idea and it looks well planned

 

@Kas Ob.definitely good suggestions

[Antony Augustus 4]

@Kas Ob. I made the following changes to the application.

1) Changed the color theme to DarkGreen. Delphi does not allow hex values for the colors in https://www.w3schools.com/colors/colors_2019.asp

2) Removed smaller icons

3) Removed the old icons and put new ones with green theming to make it consistent with application color

4) Rent collection screen modified to include bigger fonts.

[Guest]

51 minutes ago, Antony Augustus said:

Delphi does not allow hex values for the colors in https://www.w3schools.com/colors/colors_2019.asp

Delphi does, and its time to learn something new, to use Hex Color Values use such format $FF6F61 instead of #FF6F61 from that page, but here you should notice that HTML colors are RGB while Delphi TColor is BGR, so get the exact same color you see in HTML codes value you only need to switch between the B and R, and that color should be $616FFF, away from that you can always switch them and use calculator to get the color value in decimal number, eg.  R+G*256+B*256*256

 

As i see the font size is way better, and the whole pages looks more cleaner now, one thing though that green does have bad effect with its contrast with white or grey you are using as background color, so why not try to change that color of those header and footer you are using, to something very light like $C6D6F5 or $847257 or even light grey ( very light grey), and change the page title to bigger font size with high contrast shadow, like black and white shadow or the other way, try the same with black ( or any dark color from different range like dark blue ) and yellow ( some degree of yellow)

 

And i think remove the footer when there is no question to ask, it might be cleaner, it will drag ( bring attention of ) the eyes of the user only when there is questions or action needed.

As for the big icons IMHO, mono color icons on mobile still looks more elegant like icons from https://www.flaticon.com/packs and you can pick some mono color icons ( black and while ) and make them easily into something different with white.

 

I believe you can now see the difference and google or download fee apps to compare with, take a look here https://www.google.com/search?q=android+ui+app&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjyt-ay2bPnAhVFzMQBHTGsAc8Q_AUoAXoECGkQAw&biw=1920&bih=969#imgrc=rJDobTKmJutRsM:

 

Do you see the green in that app ?, click and browse some of those UI's and you will find your solution i think.

 

Away from that congratulations again and good luck.

[Guest]

One last thing :

 

Out of the color provided in Object Inspector , stick only to white and black and grey shadow the others are ugly and belongs to past era when 8 bit and 16 bit colors was only available, thinking about that i guess you know you can double click on the color then click define custom color, there you have the full 24 bit color range and you can there put your red and green and blue separately if you wish. 

[Antony Augustus 4]

@Kas Ob. I gave a try with your mono-color suggestions and application looked clean and consistent. However, looks are a subjective thing. Some people liked the old colored one. I have attached the new look screenshots.

[Guest]

2 hours ago, Antony Augustus said:

However, looks are a subjective thing.

Very true.

 

I am not a professional designer, and finding the best design is something need talents and practice, but, there is some rules you can use to direct you, in this forum i think may be others can give advises to both of us.

 

1) I like the new look very much and value it more than the colored one, you still can use a easy on eyes color on the header without stealing the focus from the data.

2) the images in the first screen shot are big, they takes the eye focus and the brain go processing them to understand they are one or more, or what are you offering the user, here i want to give a rule i like in designing UI, but first i want to give an example and while hoping it will explain the idea better: when you trying to hear a foreign language you will come over a problem, the problem is in separating a sentence into words, some times two words sound hard to understand as they sounds as one, so your brain waste fraction of second to think about the sounds instead of the words them selves, this what happen when you put visual aid ( images ) on UI where they only distract the eyes and the brain from understanding what they are for, so your disk icon is great and the user will take fraction of second to understand what it is about, may be just see the disk in a glance and will understand the purpose of it, first screen shot have big images and they serve none, as the user still need to read the text under them, so i suggest to make them little smaller in a way they don't look hijack the eye focus.

3) About font size and text position, sometime the size of text play some rules on how user fast interpret what does he see, see the attached image, the small change in the address position, does make difference, right ?

 

Anyway, i think the judge of the design is you and your clients.

 

Good luck !

 

 

Edited February 8, 2020 by Guest

[Remy Lebeau 1394]

On 2/2/2020 at 12:28 PM, Kas Ob. said:

Delphi does, and its time to learn something new, to use Hex Color Values use such format $FF6F61 instead of #FF6F61 from that page, but here you should notice that HTML colors are RGB while Delphi TColor is BGR, so get the exact same color you see in HTML codes value you only need to switch between the B and R, and that color should be $616FFF, away from that you can always switch them and use calculator to get the color value in decimal number, eg.  R+G*256+B*256*256

In VCL, colors are expressed using TColor.  You can use the RGB() function or the TColorRec record to specify decimal/hex values for the individual R, G, and B channels.

 

In FMX, colors are expressed using TAlphaColor.  You can use the TAlphaColorRec record to specify decimal/hex values for the individual R, G, B, and A channels.

[Guest]

@Remy Lebeau Thank you for clearing that, i was just explaining to Antony that IDE accept hex values in color fields, and how to use them from HTML in Delphi.

[Fr0sT.Brutal 900]

i wonder what's the meaning of that screen containing only the picture of a house with $ sign inside? It has 0.0 useful info IMHO

[Antony Augustus 4]

Sorry for the late response. Thanks for all your wonderful suggestions! The application looks more refined and professional than before.

[aehimself 396]

Thank you for sharing the looks of before-after! I love to see the dramatic change from using colors to monochrome is causing... it indeed looks cleaner and more professional. I do have troubles with a good UI design and it's hard to come by with useful tips and tricks.

 

Good luck with your application 🙂

Edited February 25, 2020 by aehimself

[Tntman 14]

Now look of the app looks way better if u ask me. I think that problem related to app look was because you have not designed it first in Adobe XD , Illustrator or Photoshop.

 

Can you please tell me what and how did u used layout for components ? ScaledLayout or just simple layout ? Thank you for your time

[Antony Augustus 4]

I did not use any of the design tools like Adobe, Photoshop, etc. And it is just a simple layout.