Android Question Regarding Aligning controls

Nitin Joshi

Active Member
Licensed User
Hi All,
B4A is very powerful and nice software to develop Android APPs. However, I am still not clear about placing controls correctly.
What I can see on mobile looks different that what i can see on designer.
I still do some trial and errors which eats lot of time for placing controls correctly.
I am still confuse/not clear about how to use AutoScalRate/AutoScale/%x/%y.
I am still not clear where shall I write my code, in Scale - General or Scale - General

Can someone help me and guide some powerful document or video for better understanding?

I may not be a good student :)
 

Erel

Administrator
Staff member
Licensed User
I am still confuse/not clear about how to use AutoScalRate/AutoScale/%x/%y.
I am still not clear where shall I write my code, in Scale - General or Scale - General
You haven't mentioned the most important feature - anchors.

Use a single variant and don't write anything in the variant specific script.

Watch the visual designer video tutorial: https://www.b4x.com/etp.html
 
Upvote 0

kisoft

Well-Known Member
Licensed User
Hi
Unfortunately, I also have a problem understanding the anchor system. That's why I use the designer script.
 
Upvote 0

Nitin Joshi

Active Member
Licensed User
@Erel: What do you mean by..."Use a single variant and don't write anything in the variant specific script."

Meanwhile, I am sharing my recent experience. I have added a panel on which there are 2 buttons in my project. Panel is visible when any one of button from B001 to B008 is double clicked.

Please see below the visual appearance on designer vs. on my mobile. Panel is highlighted in border. Panel background is Orange.

upload_2019-1-20_20-25-50.png
 

Attachments

  • upload_2019-1-20_20-20-38.png
    upload_2019-1-20_20-20-38.png
    18.8 KB · Views: 79
Upvote 0

Erel

Administrator
Staff member
Licensed User
Unfortunately, I also have a problem understanding the anchor system. That's why I use the designer script.
This post doesn't add anything useful to this thread. Start a new thread if you have any question. I must say that anchors are very simple to use. Watch the video tutorial and you will understand.

Please see below the visual appearance on designer vs. on my mobile. Panel is highlighted in border. Panel background is Orange.
You should create a small project with the layout and upload it. I don't know if it is related or not however buttons have an elevation of 2dip. If you put a panel over buttons then you should set its elevation to 3dip or more.
 
Upvote 0

Nitin Joshi

Active Member
Licensed User
Hi Erel, I have attached sample project. Please explain what could be the correct method for keeping controls placement same as designer.

I am still struggling on control placement. Appearance on designer window is never same on Mobile/Tab.
 

Attachments

  • Sample1.zip
    9.2 KB · Views: 72
Upvote 0

Erel

Administrator
Staff member
Licensed User
I've removed the call to AutoScaleAll from the variant specific script. Don't use variant specific scripts at all.

Why have you added these two lines:
B4X:
Activity.Height=GetDeviceLayoutValues.Height
   Activity.Width=GetDeviceLayoutValues.Width

Where do they come from? Have you seen any tutorial with these lines?

I ran your program and the layout looks as I expect it. You should post a screenshot and explain the problem.
 
Upvote 0

Nitin Joshi

Active Member
Licensed User
Hi Erel, As you have mentioned above, I have removed AutoScaleAll from variants however appearance on my mobile is not proper. Please see the screen shots.

Please recommend me how to make appearance on mobile which should look same as we see on designer.

Actually, I have stuck due to this, rest all fine.
 

Attachments

  • Screenshot_20190212_210817_Sample.Test1.png
    Screenshot_20190212_210817_Sample.Test1.png
    87.8 KB · Views: 85
  • Screenshot_20190212_210910_Sample.Test1.png
    Screenshot_20190212_210910_Sample.Test1.png
    64.7 KB · Views: 78
  • Screenshot_20190212_211016_Sample.Test1.png
    Screenshot_20190212_211016_Sample.Test1.png
    61.8 KB · Views: 87
  • Screenshot_20190212_211041_Sample.Test1.png
    Screenshot_20190212_211041_Sample.Test1.png
    60.1 KB · Views: 82
Upvote 0

klaus

Expert
Licensed User
I would do it like in the attached modified project.

EDIT: updated the file acroding to post #15.
 

Attachments

  • Sample2.zip
    9.4 KB · Views: 67
Last edited:
Upvote 0

aeric

Expert
Licensed User
You need to put the view at bottom of the list if you want it appear on top of the others. Check the left side (Views Tree).
I think it is better to use Dialog view for pop up dialog.

Designer.png
 
Upvote 0

emexes

Expert
Licensed User
I would do it like in the attached modified project.

+1 this works. Intriguingly, buttons T001 and T002 are anchored differently to T003 and T004, but victory is grasped from the jaws of defeat by the fact that the panel is scaled by the same factor. I'm not sure whether to be impressed or freaked out by the way this latent bug is inadvertently masked over.

;-)
 
Upvote 0

klaus

Expert
Licensed User
buttons T001 and T002 are anchored differently to T003 and T004,
Of course, this is a mistake :).
Updated the file in post #13.
 
Upvote 0

emexes

Expert
Licensed User
Ah... I thought you were demonstrating the resilience of the b4a layout system (and it was a doozy of a demo - took me a few minutes to work out why it wasn't falling over like it should!)
 
Upvote 0

klaus

Expert
Licensed User
It doesn't fail because with AutoScaleAll, all the dimensions, including the Edge Distances, are multiplied by the same factor, therefore they are all proportional.
 
Upvote 0
Top