How to overlap components?

In this tutorial you will learn how to overlap components over one another. So, let’s keep it short here and get straight to the point :slight_smile:

Components

For this tutorial, I’m using the components listed below, but you can change them as per your needs.

  • \ 24x24Horizontal_Arrangement1(Color: Default)
    • Button1
    • Button2
  • Horizontal_Arrangement2(Color: Translucent pink)
  • Space1
  • Checkbox1
  • Snackbar1
  • Animation_Util1

Blocks

  • So, first of all, we will trigger the when Checkbox1.Changed event. If it’s checked we will call the Overshoot Vertical method from the Animation Util component for overlapping HVA2 (Horizontal Arrangement2) over HVA1 (Horizontal Arrangement1) or else we will remove them from each other.
  • In the first case, the value of start Position & end Position is because here we want the HVA2 to move vertically and overlap the HVA1 completely.
    For example: If Y position of HVA1 is 406 and that of HVA2 is 596 then the result will be -190. And so HA2 will move 190 units vertically above (above because it is negative) from its original position, overlapping the HVA1.
    Note: You can play with the blocks to define how much one arrangement will overlap with other.
  • The blocks in the else socket are just for testing purpose and hence, are redundant, so, I’m not going to explain it (but if you understood the above blocks you would understand this too).

Testing :crossed_fingers:


So, it worked. :grin:

APK & AIA

Overlay.apk (4.8 MB)
Overlay.aia (3.0 KB)

19 Likes

I tried this before but I think every device is displayed in a different way

Yes, I know it and that’s why instead of hard-coding the values of start and end position, I have used these blocks

so that the HVA2 overlaps HVA1 everytime, irrespective of the screen size.

PS: This is just an example showing how animation utilities component can be used to overlap components. If you want to achieve different results, say instead of overlapping components fully you want to overlap a fraction of it, these blocks need to be changed.

3 Likes

Perfect. Thank you for share this. You helped me a lot.

4 Likes

working in companion…But not working on APK

You need to give more information for me to be able to help you.

3 Likes

can i send you the aia fie of my project?

An image of the relevant blocks along with a brief description of what you are trying to do would be better.

2 Likes

Great, thanks for sharing this, but download (apk / aia) not working:

1 Like

Thanks for pointing that out. I’ll reupload them when I get some free time. Quite busy with studies these days. :unamused:

1 Like

Great idea, thank you for share with us.
I made a example based on yours that people can’t download anymore, I will send my example.


Aia example: animationFrame.aia (7.0 KB)
One more time, thank you very much. :smile:

1 Like

@Shreyash, kindly update the files. Thank you!

Done :+1: :+1:

1 Like

hi can we overlay barcode scanner? or anyone know how to add a button to barcode scanner view… thanks

it wont work on mine, does it affect because da componets im trying to overlap, is visible to false and everytime i just set it to visible true… or it must be visible on da first place?

will it still work even visible to true or call from false to true.Done

Components must be set to visible for Animation Utils to be able to overlap them.

PS: Toggling the visibility of non visible components just before calling the overlap procedure should also work.

I tried to use the mother container, but overlap show behind… it didnt go front as expected

Components placed towards the top go behind; components placed lower down show up up front.

no worries, problem fixed, i agree, it goes top