Android Question Position views on a panel by percentages

[Roger Daley]

Newbie question,

I need to position views on a panel by % of the panel. I have read somewhere that the panel needs to be saved as a layout and loaded as a layout for the percentage to relate to the panel, not the activity. I have just about exhausted all my search options and can only find obtuse references, not enough for newbies.

Can someone please point me to a simple example of saving/loading a panel as a layout.

Thanks in advance
Roger

 

[Erel]

That's correct. You can create a new layout for the panel layout (without the panel) and in the designer script set the views location using %x / %y.
You should then load the layout to the panel with Panel1.LoadLayout.
At runtime %x / %y will be relative to the panel dimensions.

 

[Roger Daley]

Thanks for the quick reply Erel, but I need a bit more detail.

I have no doubt that your answer makes sense to anyone who knows what they are doing but my question was more "how do I do this" as in step by step for the really dumb. IE "create a new layout for the panel layout (without the panel)" to me is a paradox and I have no idea of how I would achieve this.

Can you please point me to an example that guides the ignorant.
i make layout with/without panel?
ii save layout when/where/syntax?
iii panel1.loadlayout???

Roger

 

[Erel]

I recommend you to start with the Beginner's guide: http://www.b4x.com/android/documentation.html

1. Create a layout in the designer and save it.
2. The layout will be saved in the correct place automatically (the assets folder / files tab).
3. Panel.LoadLayout is similar to Activity.LoadLayout. It loads the layout file to the panel instead of the activity.

 

[Roger Daley]

Regretfully Erel the Beginners Guide was the source of the "obtuse references" I cited in my original post. I have done what you suggest several times, failure in this approach is what brought me to seek help on the forum.

I will resign myself to ignorance on panel layouts.

Roger

 

[klaus]

Attached a small test project showing the difference.
The project has two layouts main with the Panel and panellayout for the Panel.
The panellayout is loaded twice, onto the Activity and onto the Panel, to show the difference.

 

[Roger Daley]

Attached a small test project showing the difference.
The project has two layouts main with the Panel and panallayout for the Panel.
The panallayout is loaded twice, onto the Activity and onto the Panel, to show the difference.

Klaus,

Great example, the super simplicity gave me the focus I needed to see where I was confusing myself.
One small issue has arisen. To test out the process, I created and loaded a second panel with a single edittext in it's layout.
The panel is BitMapDrawable, which should show as a background to the edittext [transparent]. I can either see the graphic and not access the edittext or access the edittext and not see the graphic depending on how I juggle the order of the loads etc. As usual I have tried anything that looked like it might help and searched the web/forum, unfortunately without success.

I have uploaded the modified TestPanelLayout. I know this is branching from my original post but it would be good to cross off this last item, any help would be much appreciated.

Regards
Roger

 

[klaus]

If I understand correctly, you want to have a bitmap as the EditText background.
If this is the case, you dont need to use a panel as background and a transparent EditText on top, you can directly set the background of the EditText.

Dim bmp As Bitmap
bmp.Initialize(File.DirAssets, "lcd.png")
Dim bdw As BitmapDrawable
bdw.Initialize(bmp)
edtTest1.Background = bdw

Attached the modifyed version.

 

[Roger Daley]

If I understand correctly, you want to have a bitmap as the EditText background.
If this is the case, you dont need to use a panel as background and a transparent EditText on top, you can directly set the background of the EditText.

Dim bmp As Bitmap
bmp.Initialize(File.DirAssets, "lcd.png")
Dim bdw As BitmapDrawable
bdw.Initialize(bmp)
edtTest1.Background = bdw

Attached the modifyed version.

Thanks again Klaus but that is not quite the aim.
I need the EditText positioned on part of the background/graphic.
IE the lcd.png is a liquid crystal display incuding part of a surround, the edittext needs to be within the actual LCD portion of the graphic. My aim is for the graphic to be 280pixels wide, EditText1 to be 255pixels wide, centred horizontally and vertically on the graphic/panel.
Originally lcd.png was part of the full 320*480 screen background but as I tested it on different devices the EditText became misaligned with the LCD part of the graphic. I thought it would be easier to make that part of the background a separate panel and "tie" the EditText to the panel.
I should have explained this earlier.

Regards
Roger

 

[Beja]

Something new to me too.. thanks to Erel and Klaus,
I thought if the views are members of the panel then the percentage will automatically be relative to the panel and not the activity.

 

[klaus]

Instead of using a Panel as the background you might consider padding the EditText view with the routine below:

'Sets the padding of a view
'v = view
'Left, Top, Right, Bottom padding values in pixels
Sub setPadding(v As View, Left As Int, Top As Int, Right As Int, Bottom As Int)
  Dim jo = v As JavaObject
  jo.RunMethod("setPadding", Array As Object(Left, Top, Right, Bottom))
End Sub

You could set the 4 properties either in dip values or in % of the EditText dimensions.

You could also transform your image to a nine patch image, in that case the border thickness would remain the same independent of the size and you can also set padding.

In the picture you see:
- On top, the EditText with padding.
- The second and thired with no padding, you see that the upper and lower border are thicker in the third image than in the second one due to the vertical stretching.
- The forth EditText view has your lcd image transformed to a 9 patch image. You see that the borders keep their original width and you see also the padding.

 

[Roger Daley]

Klaus that's brilliant,

I was about ready to go back to square one, but you've given me a couple of very interesting options to explore. Unfortunately I am going to be busy for the next couple of days so I will have to wait till I have time to experiment.
Thanks again for your help and education. Another brick in the wall of knowledge as they say.

Regards Roger

PS I still wonder why I lose views on a panel when I make the panel BitMapDrawable. But that is another problem for another day.

 

[klaus]

PS I still wonder why I lose views on a panel when I make the panel BitMapDrawable. But that is another problem for another day.

I got the same result. Sorry, I didn't explain my findings.

The EditText background is set to Transparent in the code, this works.
The problem is the background of the 'Activity' of the layout with the EditText, this one should also be Transparent to show the image of the underlying Panel.
Setting the 'Activity' background to Transparent and Alpha to 0 in the Designer has no effect !
So it seems that we cannot set an 'Activity' background to Transparent in the Designer even when it's loaded into a Panel.

But, anyway the solution for your problem is either padding or the nine patch image.

 

[Roger Daley]

I got the same result. Sorry, I didn't explain my findings.

The EditText background is set to Transparent in the code, this works.
The problem is the background of the 'Activity' of the layout with the EditText, this one should also be Transparent to show the image of the underlying Panel.
Setting the 'Activity' background to Transparent and Alpha to 0 in the Designer has no effect !
So it seems that we cannot set an 'Activity' background to Transparent in the Designer even when it's loaded into a Panel.

But, anyway the solution for your problem is either padding or the nine patch image.

Thanks Klaus.