FloatingArrangement - Make an `HVArrangement` float above other elements within another HVArrangement.

FloatingArrangement
Make an `HVArrangement` float above other elements within another HVArrangement.

Like this:
Buttons on buttons thanks to the floating arrangement.

I made this functionality for another function I'm making where you can generate piano sound or other tones with hertz and waves.


MakeFloating

Creates a Floating Arrangement inside another Arrangement.

  • parentArrangement: Parent arrangement on which the floating arrangement will be placed.
  • floatingArrangement: Arrangement to be floated above the parentArrangement.

Horizontal and vertical alignment is set according to the AlignHorizontal and AlignVertical properties of the parentArrangement.


Note:
In case there are any doubts about the difference between putting an Arrangement inside another Arrangement...

  • This will not push components inside the parent arrangement, because it will be floating above them.

aiaProject:
FloatingArrangement.aia (26.9 KB)

Extension: v1.0.
joejsanz.joedevfloatingarrangement.aix (6.3 KB)


minSdk: 21
maxSdk: 34
JDK: 11

Created with Fast. v2.3.0
fast-cli


Thanks.

5 Likes

how is this working? how much offset?
is there only one block in this extension?
what about upload an sample aia?

Alignment works the same as when you put any component inside an Arrangement.

Only one.

I have uploaded the aia:

Hey, could you fix the isue were it glitches when the


runned with the phone on vertical screen orientation, and when u change screen orientation to horitzontal, it doesn't update and places it in a position were it shouldn't be?

And can you also fix the bug were it glitches when the stuff is hidden on the web editor even tho it isn't on app cuz of arrangement.visible= ?

Thanks!

  1. This is probably not a fault of the extension, but more the need to create responsive sizing for the arrangements and components you are using so that they resize when you change orientation.

  2. Sorry, do not understand this one...

  1. It is the extension because if i run the block when screen orietation is horitzontal, its fine horizantally, but when I turn it vertical it places it in a position were it shouldn't be, but if you run the block while vertical it is were it should, and when horitxontal it is were it shouldn't
  2. Like, if the arrangements are hidden in appinventor web editor it doesn't arrange the arrangements correwcly in companion even if they r shown in companion
1 Like

I will therefore leave this to @Joejsanz, see if he can make any sense of what you are saying.

1 Like

I have an idea of what's going on.
Right now I can't check, but I'll fix that tomorrow night.

Ok thanks!

1 Like

You may need to set the height and width for it to update correctly.


About this, do you mean when the arrangement is not visible and when starting the floating function you make it visible and it does not appear in its place?


Download this aia project to try it and tell me if you still have the same problem.

FloatingArrangementTest.aia (28.1 KB)

Ok so the first issue is fixed somehow, idk why its messed up on my app, and the second one also fixed? Did you just fix it or did you so smething different?

I just set the height of the Arrangement and some space above the image so that it would be centered with the background image line.

  • How do you have it in your application?

I have It like this:




On screen Initialize:
image
When clicking enter profile button:
image
Profile is parent of both pfp_arrangement and external_banner

Wait I think I know how to fix the 1st issue, but not the 2nd one

You need to put the banner in an imageView or in an Arrangement, but where the banner will go you will not put it in the function, that banner you put it in a vertical Arrangement (That will go in parentArrangement). And the profile photo in another Arrangement and put that Arrangement in floatingArrangement.

  • I don't know if I explained myself well or if everything is mixed up.

The other detail has to go like this:

I'm still having problems...

It still only works correcly if shown in the web editor urghh

Can I see the project aia? Or could you show me the blocks as they are placed, a broader view of the blocks and the configuration in the design?