How to Implement ClockAnimationView Library in Android?

Android is an open-source operating system, based on the Linux kernel and used in mobile devices like smartphones, tablets, etc. Further, it was developed for smartwatches and Android TV. Each of them has a specialized interface. Android has been one of the best-selling OS for smartphones. Android OS was developed by Android Inc. which Google bought in 2005. In this article, we are going to implement a clock animation view. This is a very simple feature as we have seen this in any app. While giving quiz text we get a timer. Here we are implementing the same. But the thing is instead of showing time on TextView.Here we are showing the time on the clock.  

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add this into the build.gradle file

Add it to your root build.gradle at the end of repositories:

allprojects {

 repositories {

  …

  maven { url “https://jitpack.io” }

 }

}

Add the dependency

dependencies {

        compile () {

         compile ‘com.github.shts:ClockAnimationView:1.2.2’

        }

}

Step 3: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".CLockAnimation">

      <!--Initializing the layout-->
    <jp.shts.android.library.clockanimationview.ClockAnimationView
        android:id="@+id/clockanimate"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        app:animDurations="5000"
        app:faceColor="#000"
        app:rimColor="@color/colorPrimary"
        app:rimStrokeWidth="5dp"
        tools:background="#eee" />

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:text="Clock Animation"/>

</LinearLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file 

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import jp.shts.android.library.clockanimationview.ClockAnimationView;

public class CLockAnimation extends AppCompatActivity {

    Button button;
    ClockAnimationView clockAnimationView;

      @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_clock_animation);

          // initialise the layout
        button=findViewById(R.id.button);
        clockAnimationView=findViewById(R.id.clockanimate);

          // setting the initial position of clock
        clockAnimationView.setTime(0,0);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // at the end clock will animate upto 6 :30
                clockAnimationView.animateToTime(6,30);
            }
        });
    }
}

Output: