Androids Relative Position/Dimension lazarus / 43-Android ---------------------------------------------------------------------- kupferstecher · 2017-10-26 19:05 I just started my first trials on programming Android with Lazarus. I chose LazToApk with the CustomDrawn interface. The installation made some difficulties, but I got it running, the example compiled well. Some of the components have strange behaviour, probably those are not really supported. For small apps the relative position and dimensions of the controls are helpful. But I wonder if there is any possibility to suppress this behaviour and do a static approach. The background is a desktop software that I want to port to Android. The relative design destroys the whole arrangements so I see no chance for me for porting. What I tried is to constrain the dimensions of a panel to a fixed value. This works for the panel itself, but the child controls are scaled independently of it and will be even outside of my container panel when running the application. So this failed... Another idea was to set the apps dimension after startup to those of the window while designing, in the hope that all controls are in correct size and position. But this also failed. i guess that the scaling is done during compilation. So is there any chance to achive a 1 to 1 layout from design to running independent of the devices screen dimensions? E.g. creating all controls (manualy) dynamically in the code. Thanks for any help or hints! Regards~ ---------------------------------------------------------------------- kupferstecher · 2017-11-01 20:58 Now one with a hint or anything? ---------------------------------------------------------------------- DonAlfredo · 2017-11-01 21:20 I would advice against CustomDrawn on Android. Its not that easy to use, very limited and hardly maintained. You should use LAMW. Search the forum for it ! ---------------------------------------------------------------------- kupferstecher · 2017-11-01 21:44 Yes, LAMW seems very popular. Do you know if its possible to achive a non-relative layout with LAMW? I want to press a desktop-style programm into android, thats why I need the absolute coordinates. Just like if someone would try to port the Lazarus IDE onto Android. ---------------------------------------------------------------------- jmpessoa · 2017-11-01 21:59 Hello  kupferstecher! Can you show  what GUI you need to "press"  from desktop? I will try with LAMW... ---------------------------------------------------------------------- kupferstecher · 2017-11-01 22:42 Hello jmpessoa. see attached a screenshot. Its a visualisation for mikrocontroller data through serial port and ethernet. The user can arrange instruments randomly. All the instruments consist of several standard components like buttons, labels, panels, chart etc and custom controls, user drawn. The inner and outer alignment is all done with pixel coordinates. The menue I could change and simplify, but for the instruments I don't see a possibility. On the other hand all instruments are dynamically created and not from the form designer, perhaps this gives further options? Regards ---------------------------------------------------------------------- jmpessoa · 2017-11-02 00:06 Hello kupferstecher. What about a minimalistic App.... test only? ---------------------------------------------------------------------- kupferstecher · 2017-11-02 11:04 Hello jmpessoa, attached a minimum Projekt. I'm beginnning to understand the scaling behaviour now: If the control is created in the forms OnCreate, then the form dimensions of designtime are assumed and the control is alligned to that size. While Create the Form is scaled to the actual screen size and with it all controls. However, if the controls are created after the forms create, then they will get the actual dimensions defined in SetSize (which is nice). Does this work in the same way with LAMW? The attached project works with LazToAPK, because of the filesize I couln't attach the apk. ---------------------------------------------------------------------- jmpessoa · 2017-11-02 18:16 QuoteDoes this work in the same way with LAMW? LAMW has total control of dimension and position of every visual component: [note: LAMW visual component are just Android visual component ...] You need only config and handle this properties: Quote  LParamWidth: TLayoutParams;        LParamHeight: TLayoutParams;   PositionRelativeToParent: TPositionRelativeToParentSet;   PositionRelativeToAnchor: TPositionRelativeToAnchorIDSet; Quote  TLayoutParams = (lpMatchParent, lpWrapContent, lpHalfOfParent, lpOneQuarterOfParent, lpTwoThirdOfParent,                    lpOneThirdOfParent, lpOneEighthOfParent,lpThreeEighthOfParent, lpFiveEighthOfParent,                    lpSevenEighthOfParent, lpOneSixthOfParent, lpFiveSixthOfParent, lpOneFifthOfParent,                    lpTwoFifthOfParent, lpThreeFifthOfParent, lpThreeQuarterOfParent,                    lpFourFifthOfParent, lpNineTenthsOfParent, lp95PercentOfParent, lp99PercentOfParent,                    lp16px, lp24px, lp32px, lp40px, lp48px, lp72px, lp96px, lpExact, lpUseWeight); Quote TPositionRelativeToParent = (rpBottom,                                rpTop,                                rpLeft,                                rpRight,                                rpStart,                                rpEnd,                                rpCenterHorizontal,                                rpCenterInParent,                                rpCenterVertical); Quote  TPositionRelativeToAnchorID = ( raAbove,                                   raBelow,                                   raToStartOf,                                   raToEndOf,                                   raToLeftOf,                                   raToRightOf,                                   raAlignBaseline,                                   raAlignTop,                                   raAlignBottom,                                   raAlignStart,                                   raAlignEnd,                                   raAlignLeft,                                   raAlignRight); And more, you can handle device rotate orientation..... ---------------------------------------------------------------------- kupferstecher · 2017-11-02 18:57 These are quite some parameters... Do I see it correct that they all define a relative relationship to the parent, so no absolut positions and dimensions are possible? In my use case would you recommend me using LAMW or CustomDrawn? Thanks a lot! ---------------------------------------------------------------------- jmpessoa · 2017-11-02 19:14 QuoteThese are quite some parameters... Yes, but all this stuff are handled in design time [LAMW form designer] QuoteIn my use case would you recommend me using LAMW or CustomDrawn? Well, you can install LAMW and try layouting some GUI.... then you will have the information to make your decision ... You can start with  Laz4Android + LAMW reference: https://github.com/jmpessoa/lazandroidmodulewizard/blob/master/readme_ get_start.txt ---------------------------------------------------------------------- kupferstecher · 2017-11-02 19:21 OK, thanks for the explanations! I guess I'll have some further trials with the CustomDrawn first, as it seems to be closer to the LCL way of GUI-programming. Regards~ ---------------------------------------------------------------------- Handoko · 2017-11-03 04:15 Sorry, I want to ask an off topic question. Can your CustomDrawn Android app run correctly on devices using Android 5 and above? I never succeed on my Android 5 phone, the apk installations were smooth but they always failed to start. I search the forum, some said CustomDrawn has issue with Android 5 and above. That's why I choose LAMW instead of CustomDrawn. Have the CustomDrawn Android 5/+ issue been solved? I maybe do not fully understand about the absolute coordinate you said. But I think you can solve it by write your own visual components. I am doing it currently. The concept is the programmer define its coordinate size of the screen on the beginning then all the screen outputs will be calculated based on the size. It works good on any screen resolutions and aspects because the drawing engine will scale it down/up properly. The bad thing is the text output, unproportional scaling will make the texts look ugly, but I already solved this issue using my own invent logic. The basic concept already proven to run correctly on my tests on Windows and Linux. Now I'm making the module to support Android platform. Unfortunately the progress is slow because programming is just my hobby, I'm doing in only when I have time. I got this idea of screen drawing from QB64. It is an interesting tool, it can produce Android app too. But I prefer Pascal syntax instead of BASIC. ---------------------------------------------------------------------- CC · 2017-11-03 09:15 An interesting approach would be to use LAMW's jView+jcanvas instance as the form surface and implement a rendering engine  to draw the controls on this canvas. Plus creating event handling for the controls drawn there. This would bring all the benefits of custom drawn controls a LAMW's android ecosystem together. The android way of layouting makes sense, but currently it is not implemented properly and could be improved.  There are control elements which are not scaled like fonts, margins ...  Maybe even the LCL or a little more likely FPGUI can be enhanced to use jCanvas to draw its controls.  If this concept was implementable adding a HTML5 canvas would be the next step to create a UI which draws itself on on any surface. All this would require an  other level of abstraction which can be tricky. ---------------------------------------------------------------------- kupferstecher · 2017-11-03 09:40 Quote from: Handoko on November 03, 2017, 05:15:10 amCan your CustomDrawn Android app run correctly on devices using Android 5 and above?Hello Handoko, thats a good question! I didn't know about that issue. And searching through the forum for that topic doesn't bring up an hint that it is solved or even worked on. I couldn't test as I don't have any Android 5 device by hands. Quote from: HandokoHave the CustomDrawn Android 5/+ issue been solved?@all: Does someone know about it? Quote from: HandokoI maybe do not fully understand about the absolute coordinate you saidLets say the user of my program designs a screen with width 800 on his computer. Then the apk-surface also should be exactly 800 with padding the rest area of the display if the display is larger, or providing a scrolling behaviour to reach the outside content if the display is smaller than the 800. I.e. I want to use the desktop-approach but on Android. Quote from: HandokoBut I think you can solve it by write your own visual components [...] The concept is the programmer define its coordinate size of the screen on the beginning then all the screen outputs will be calculated based on the size.That does sound promising. Can you post a little snippet of how the dimensions are set? The properties jmpessoa posted, didn't look like its possible to work with pixels. Does writing own visual contents work in the same way as with TCustomControl in LCL? Quote from: HandokoUnfortunately the progress is slow because programming is just my hobbySame here, same here ;-) ---------------------------------------------------------------------- Handoko · 2017-11-03 10:18 Quote from: kupferstecher on November 03, 2017, 10:40:17 amQuote from: Handoko on November 03, 2017, 05:15:10 amCan your CustomDrawn Android app run correctly on devices using Android 5 and above?Hello Handoko, thats a good question! I didn't know about that issue. And searching through the forum for that topic doesn't bring up an hint that it is solved or even worked on. I couldn't test as I don't have any Android 5 device by hands. Quote from: HandokoHave the CustomDrawn Android 5/+ issue been solved?@all: Does someone know about it? You can try to make a hello world demo and send the apk file file to this forum. Or you can email the apk file to me, I have an Android 5 phone. About the screen issue, my module does not use scroll bars but it will scale it down. I will consider scrolling as an option, I started to write the module to solve screen output issue on different computer screen resolutions and aspect ratios. So far the module now already has these working components: - TgsRectangle - TgsLabel - TgsButton - TgsEdit All the visual components are inherited from TgsItem. On the object creation, it will automatically calculate its actual x, y positions: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i constructor TgsItem.Create(const Screen: TGraphicsScreen; const X, Y, W, H: integer);begin  with Screen do  begin    FXint := X;    FXreal := X * FRatioX;    FYint := Y;    FYreal := Y * FRatioY;    FWint := W;    FWreal := W * FRatioX;    FHint := H;    FHreal := H * FRatioY;  end;  FFocusAllowed := False;  FFocusSupported := False;  FGraphicsScreen := Screen;end; And to start using the module programmer has to call TGraphicsScreen.Create to initialize the position, size and resolution: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i constructor TGraphicsScreen.Create(const Form: TForm;  const X, Y, W, H, ResolutionX, ResolutionY: integer);begin   // Strict private data  //  FBackgroundR, FBackgroundG, FBackgroundB initialized by -> SetBackgroundColor  FCurrentFocus := nil;  FForm := Form;  with FForm do  begin    KeyPreview := True;    FSavedFormKeyDown := OnKeyDown;  FSavedFormKeyPress := OnKeyPress;    OnKeyDown := @EventFormKeyDown;  OnKeyPress := @EventFormKeyPress;  end;  FItems := TFPObjectList.Create(False);  FPainting := False;  FSavedApplicationUserInput := Application.OnUserInput;  FScreenHeight := ResolutionX;  FScreenWidth := ResolutionY;  FTargetTime := Now;   // For items uniformity  FgsBorderThickness := 3;  FgsColorBackground := GetAllowedColor(clForm);  FgsColorBorder := GetAllowedColor(clWindowText);  FgsColorBorderFocus := GetAllowedColor(clHighlight);  FgsColorText := GetAllowedColor(clWindowText);   // Main data  FOutput := TOpenGLControl.Create(Form);  with FOutput do  begin    ;    Left := X;    Top := Y;    Width := W;    Height := H;    Anchors := [akBottom] + [akLeft] + [akRight] + [akTop];    AutoResizeViewport := True;    MultiSampling := 4;    Parent := Form;    OnPaint := @EvenOpenGLControlPaint;    OnResize := @EvenOpenGLControl1Resize;  end;  FOutputAspect := W / H;  FRatioX := 2 / ResolutionX;  FRatioY := 2 / ResolutionY;   // Additionals  SetBackgroundColor(FgsColorBackground); end; The code was actually originally written to run on Windows and Linux. But because it uses OpenGL for drawing and I already tried and know some basic of OpenGL ES2 drawing using LAMW, I'm sure with some modifications it can support Android too. ---------------------------------------------------------------------- kupferstecher · 2017-11-03 13:26 Quote from: CC on November 03, 2017, 10:15:51 amAn interesting approach would be to use LAMW's jView+jcanvas instance as the form surface and implement a rendering engine  to draw the controls on this canvas. Plus creating event handling for the controls drawn there.I guess thats not an easy task... Quote from: CCThe android way of layouting makes sense, In my opinion it should be distinguished between two app-types, one is the standard android app with relative layout, where the app is designed especially for smartphones. The other one is the LCL-approach for easy porting of Lazarus projects. Also for many hobbyist in my opinion it would be enough to use an absolut layout for an easier start, especially if the app only addresses the own hardware where screen dimensions are known. Tablets e.g. can be used as hardware for special applications and an absolute layout is quite well then. Thats also the reason why I chose the CustomDrawn approach first. Quote from: Handoko on November 03, 2017, 11:18:08 amYou can try to make a hello world demo and send the apk file file to this forum. Or you can email the apk file to me, I have an Android 5 phone.I'll send you a demo. More later, I'm busy now. Part2: Quote from: Handoko on November 03, 2017, 11:18:08 amuses OpenGL for drawingThanks for the code. I thought you use LAMW directly. How I understand your project is that you somehow realize the smartphone layout on the desktop. I think it'd be great to compile the same GUI programm for desktop and smartphone. So keep us updated~ ---------------------------------------------------------------------- Handoko · 2017-11-03 20:38 I tested the code you sent me. It can't run on my Android 5 Intel- based phone. Almost ARM apps can run correctly on my phone (but suffer some performance penalty). Here is the screenshot running the app after installed the apk you sent me: ---------------------------------------------------------------------- kupferstecher · 2017-11-04 09:36 Thanks for testing! So seems that issue isn't solved. Good to know.