Loading Bar on Splash Screen Tutorial


#1

We all use a Splash Screen in our app to make it look professional but no one uses Loading Bar and Text on it (I have not seen Anyone till now)
So I am Sharing a Way to do it.

My design uses a Vertical Arrangement on the Screen1 with Height and Width filled to Parent and Alignment of Centre and Bottom(I used it as I want the loading bar on the Bottom of the Screen) In the Vertical Arrangement there is 1 Horizontal Arrangement at the bottom for spacing and another one Above it. In the Above Horizontal Arrangement I have put another Horizontal Arrangement which will act as my Loading Bar. Above the Parent Horizontal bar I have used a Label with text 'Loading' I have used 2 Clocks One is to change the Label and Other is to Change Width of the Progress Bar. In the design section the width of loading bar is 1 Percent and height 4 Percent.! ![puffinFree|281x500](upload://nG9Klyb0L8flXRhsLmYsShUxv0U.png) Important:- How to set the Time of Clocks. The Clock for Changing Label text is given time of 250ms To calculate another Clock time first think Ho much width you want to Set for the Loading Bar(I used 80 Percentage) and the Overall to you want for the Splash Screen (I choose 5000ms) Divide the Splash Screen time by Width(5000/80=62.5 or 62) So Time of another Clock is 62ms. Now blocks time. I used a Global Variable of name- width. You can see my Blocks below! ![puffinFree|281x500](upload://3mdBfv6fxyWDLcmyMpPHbGwW3UB.png) That's it You can Download AIA and Sample Apk below loading.aia (3.6 KB) loading.apk (2.2 MB)

Final App

<iframe width="560" height="315" src="https://www.youtube.com/embed/w7CutcROTSk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I have made a lot of Applications using this Platform but it was the first I am Sharing here.
Any Suggestions are welcomed


#2

@helptechyguy Nice tutorial. Thanks