Skip to content
Related Articles

Related Articles

How to Implement ClockAnimationView Library in Android?

Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
Improve Article
Save Article

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: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:

 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!