How to overlap components?

(Shreyash) #1

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 is13-11-40-58 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.3 MB)
Overlay.aia (3.0 KB)

10 Likes
[Overlay] It is possible to add a overlay layer above a image/label?
Loading Screen like android studio
How can i make ui like this
(Alrmily) #2

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

(Shreyash) #3

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.

2 Likes
(Carlos Uchôa) #4

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

3 Likes