Build an animated TitleBar that disappears when scrolling down 😁

Extensions to download:

Taifun Tools
ScrollArrangementHandlers
Advanced - Decoration Components Extension (optional for bonus style points)

Step 1

Build the UI

we need to make two vertical arrangements one for the main screen and the other for the Title Bar
and have them both be placed inside a Horizontal arrangement

Properties:

  • horizontal arrangement: Align left, top, fill parent width and height
  • both vertical arrangements: Width to auto in Design but100% in Blocks (to be able to see)

Add a vertical scroll arrangement to the first vertical arrangement and design whatever TitleBar you want in the second one

add an animation utility to move the second vertical on top of the first

Step 2

making the bloks

first we make the arrangements fit the screen
blocks(3)

then we animate the second vertical arrangement to the left to the same Width of the screen using Taifun Tools . Density block
and we can decorate it and give it some elevation for style :sunglasses:

and don’t forget to register the scroll arrangement to the handler
blocks(5)

it should look something like this:

Step 3

scroll down to hide animation

set up the blocks like this which will give us an indication if we are scrolling down or up
image

then we animate the Title bar up and down

*globa UPorDown is used so we don’t repeat the animation more than once and only happens when the orientation changes

lastly

we need a space in the vertical scroll arrangement so the TitleBar doesn’t overlap its content
blocks(6)
on screen initialize of course

Congrats :partying_face:

we end op here

Downloads:

Moving_TitleBar.apk (5.2 MB)
Moving_TitleBar.aia (62.6 KB)

If you have any questions feel free to ask :slight_smile:

7 Likes

Great wow :+1::+1:

2 Likes