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