How to make a stopwatch application in Kodular?

So, guys we are back with a new tutorial. In today's tutorial we will learn making an app rather than learning to use any component in  Kodular creator. It has been time, since we  have provided a tutorial for making a android app in Kodular Creator Series. Hence, today we will  be learning How to make a simple seconds based stopwatch in Kodular. Here firstly we talk about some of FAQ's about Stopwatch in Kodular creator.......

FAQ's about stopwatch App

1. Functions of this Stopwatch

If you want to know the main functions of this Stopwatch application then we have how this app will work:

1. Firstly User has to start the stopwatch

2. Then he can pause or start the stopwatch.

3. User will be able to reset this stopwatch.

4. User can check timing upto 10 mini seconds.

5. User can easily use this app.

2. How will this app work?

In this app we will use a timer component to record time and we will use button for start stop and reset the stopwatch. We will design UI very simple and easy understanding with user friendly. In this app we will record the time of a clock component using a label every time it complete the time interval. So, let's directly get through it without waiting any more....

Designing

For designing of this application you need to follow these steps after configuring and opening your project:

Step 1: Add a clock component from sensors option and  set it's time interval 100 microseconds. Then set the time always fires true and set the timer enabled unchecked. Hence, the stopwatch won't start until we click on the Start button.

Step 2: Add a image and label denoting your stopwatch to make it look attractive. You can get the stopwatch image from here.

Step 2: Add a horizontal arrangement layout from layout and set it's height 70 pixels. Then set align horizontal and align vertical to center. So that, we will get anything we place in it at center of it.

Step 3: Add two labels to it one should show the seconds and the other mini seconds and add a ' : ' between them to recognize between them easy for user.

Step 4: Add three buttons, one for Start other for pause and third for reset the stopwatch. Place them vertically and make them of big size (depends upon your opinion) and give them some good attractive  color.

Step 5: Now set all the visible components positions properly using live companion. Kodular viewer doesn't show the actual look of our application. So,take a look of application using companion.

 Here I have a example how you can design UI for your application. You can easily design this UI in Kodular Creator.....

Blocks For stopwatch:

Block 1: Firstly, you have to set the variable block which will have the values of seconds and mini seconds. Illustration:

Block 2: This block will control the event when start button is clicked and set the timer enabled. 

Block 3: When clock timer completes then we have to set the value of seconds and mini seconds as the variables which will be shown as Time using labels.

Block 4: To handle the situation when Stopwatch stop button is clicked by user. We have to set the block such as follows.

Block 5: To reset the stopwatch timer, we can set the following blocks.

So, now you have done everything that would make your app to working. You can add extra thing in UI or any other codes for you. This will show your creativity. So, you can now easily learn how to use codes of clock component for various function. I hope you got it. This was all for today's tutorial, we will be back again with a new tutorial. Keep connected and....

 

Happy Koding.....