In that tutorial, you are going to learn how to create a Hexadecimal Color Clock Application for Android. But first, what is a Hexadecimal Color Clock Application ?

A Hexadecimal Color Clock represents the time as a hexadecimal color and applies this color to the background. Note also that a hexadecimal color is a six digit representation of a color. It is well known of web developers which use this representation each day in HTML pages with CSS.

Note that you can also discover this tutorial directly in video on YouTube :

 

Creating the User Interface

The first step is to create the User Interface of our Hexa Color Clock Application. We define an id to the root view of our layout. Then, we set an id for a text view, a specific text size and a bold text style. This text view will be used to display the hexadecimal color representation of the current time.

 

Writing the Java Code

Now, we can write the Java code of the main activity. First, we define properties in our main activity. One for the Timer object used to refresh continually the current time. Then, both properties for the root view and text view.

In the onCreate method, we get references for the root view and the text view. In the onResume method, we call the startClock method to start the clock. In the onPause method, it is very important to cancel the current timer.

We define the startClock method. We create a Timer object and then we schedule a TimerTask to be executed from now each second. In the run method of the TimerTask instance, we get the hexadecimal color representation of the current time by calling the getHexaTime method. Then, we update the user interface inside a runOnUiThread block in which we call the applyColor method with the hexadecimal color representation in parameter.

 

Now, we need to write the getHexaTime method used previously. We get the current time. For hours, minutes and seconds we set the value in the [0;255] range to cover the complete range of the hexadecimal colors representation. Finally we can return the value by concatenating the values of hours, minutes and seconds. Just before that, we convert this values in hexadecimal with two digits by using the format method of the String class with the special parameter %02X.

 

And the last method to write is the applyColor letting us to update the user interface. The Hexadecimal color representing the current time is passed in parameter. We convert it in integer color with the static parse color method of the Color class. We apply this color as background of the root view of our application. Then, we need to display the hexadecimal color representation in the TextView.

But to be sure the value will be visible, we need to display it in white or black accordingly the color of the background. To determine if the current color is close to black or white we convert the RGB color value to compute luminance with a specific formula. If the value computed if lower than one hundred twenty eight, the color is nearer to black so we are going to display the text in white. In the otherwise condition, we display it in black.

 

Finally, it gives us the following code for the MainActivity :

 

Trying our Hexa Color Clock App

Now, we can try our Hexa Color Clock Application for Android. The final result is very cool and the application could be published on the Google Play Store after some refinements :


That’s all for that tutorial. Now, it’s your time to code to improve this application. Don’t hesitate to show me your improved version of the this Hexa Color Clock Application.

To discover more tutorials on Android development, don’t hesitate to subscribe to the SSaurel’s Channel :