Android Question Align lables over an imageview so it looks good on all devices

Sub7

Active Member
Licensed User
Longtime User
Hello,
how is possible to aling correctly label_1, label_2 and imageview_2 shown in the example so it will looks in the same position in all devices?

-Views are added from the designer

I use the designer script to dock, align, and set the width accordling the activitysize (i use a panel docked left and right to 0%x,100%x) Then i dock the views to this panel and other elements so the layout is adapted accordling to the device screen size, the layout looks good on tablets, phones, small phones, no problems

But with one exception
, these labels and imageview_1 change postion (up/down) depending on device.

What's wrong?

Here a piece of script from designer:

B4X:
'The height of the panel is set later
'Panel
pnl_1.Top = 0%y
pnl_1.SetLeftAndRight(0%x,100%x)

'Imageview_1
imageview1.Top = pnl_1.Top +5dip
imageview1.SetLeftAndRight(5%x,95%x)
imageview1.Height = imageview1.Width

'Label_1
label_1.Top = imageview1.Top+10%y
label_1.SetLeftAndRight(imageview2.Left+10dip,imageview2.Right-10dip)

'Imageview_2
imageview2.Top = label_1.Bottom+5dip
imageview2.SetLeftAndRight(imageview1.Left+29%x, imageview1.Right-29%x)
imageview2.Height = imageview2.Width

'Label_2
label_2.Top = imageview2.Bottom+5dip
lablel_1.SetLeftAndRight(imageview2.Left+10dip,imageview2.Right-10dip)

pnl_1.height = imgeview_1.height + ' and so on.

This script is written here it may have some errors.
 

Attachments

  • LIB.jpg
    LIB.jpg
    49.1 KB · Views: 210

walterf25

Expert
Licensed User
Longtime User
Hello,
how is possible to aling correctly label_1, label_2 and imageview_2 shown in the example so it will looks in the same position in all devices?

-Views are added from the designer

I use the designer script to dock, align, and set the width accordling the activitysize (i use a panel docked left and right to 0%x,100%x) Then i dock the views to this panel and other elements so the layout is adapted accordling to the device screen size, the layout looks good on tablets, phones, small phones, no problems

But with one exception
, these labels and imageview_1 change postion (up/down) depending on device.

What's wrong?

Here a piece of script from designer:

B4X:
'The height of the panel is set later
'Panel
pnl_1.Top = 0%y
pnl_1.SetLeftAndRight(0%x,100%x)

'Imageview_1
imageview1.Top = pnl_1.Top +5dip
imageview1.SetLeftAndRight(5%x,95%x)
imageview1.Height = imageview1.Width

'Label_1
label_1.Top = imageview1.Top+10%y
label_1.SetLeftAndRight(imageview2.Left+10dip,imageview2.Right-10dip)

'Imageview_2
imageview2.Top = label_1.Bottom+5dip
imageview2.SetLeftAndRight(imageview1.Left+29%x, imageview1.Right-29%x)
imageview2.Height = imageview2.Width

'Label_2
label_2.Top = imageview2.Bottom+5dip
lablel_1.SetLeftAndRight(imageview2.Left+10dip,imageview2.Right-10dip)

pnl_1.height = imgeview_1.height + ' and so on.

This script is written here it may have some errors.
You should use percentages everywhere instead of dip.
 
Upvote 0
Top