Hello everyone!! Today we will see how to create an animated no internet splash screen in Kodular. Creating this is pretty easy and takes only 5 minutes. What we are going to build is not exactly an app but a kind of design or a feature you can use in your other apps to make them look even more appealing. We will be using lottie files for adding animations. You get lots of lottie files templates which you can use for your app. Read the whole article to learn how to create this type of splash screen. A video tutorial is also provided at the end of the page.
Resources:
Visible Components used:
Lottie (Drawing and Animation)
Labels (User Interface)
Space (Layouts)
Non Visible component used:
Network
Notifier
Steps for getting the lottie animation json link:
1) Open your browser and visit www.lottiefiles.com. This type of page will appear. Then search for the desired animation in the search menu of the site.
2) Once you search, a list of animations will appear as shown below. Choose your desired lottie animation.
3) Once you choose the animation, you will find a download button on the top right corner of the pop up window. Once you click on the download button select the first option called Lottie json. The .json file will be downloaded.
4) Once you have successfully downloaded the .json file, open Kodular and upload the file in the assets folder of Kodular.
These were the 4 steps for downloading and uploading the lottie animation.
Once you have uploaded the lottie file in the assets folder of Kodular and you have designed the whole app, Go to lottie and select the json file from the source option in the component.
Source Code:
When label3 or try-again label is clicked then check if the device is connected to a WiFi Network. If connected then take the user to the home screen or else show an alert that there is No Internet Connection.
Now instruct the network component to continuously monitor whether the device is connected to a network or not. Once it is connected then open the home screen.
This is the final code:
YouTube Video Tutorial:
Link to download files:
Comments