PulseCountDownView in Android App

We have seen different types of app with various types of countdown timer like amazon or Flipkart app ( when a specific product is available for a limited time ) or in many games ( when the game is over, but we have the chance to watch the ad and continue the game in few seconds, eg subway surfers or temple run game ).

It will make the UI of your Android app more beautiful and interactive and also help the user to remember it for a long time.

What is PulseCountDownView?

Android by default provides the feature of the countdown and we can implement it using the java code, but all these things take lots of time effort and we can't customize all of them according to our needs.

we can use this count-down timer in any app such as a quiz app where the user has only a few seconds to answer the question. So to do this we need an external library and PulseCountDownView library that is used to do this type of customizations in our android studio app. So it will make the app more attractive and UI-friendly with minimal code. You can learn more about PulseCountDownView from GitHub here.

We are using PulseCountDownView library as this library animated the count down text in a beautiful way and also it is very easy to implement and requires minimal code for functioning, the only drawback of this library is that it does not work below the android 5.1 version.

Limitations of the PulseCountDownView :

• We can't change the animation of the pulseCountDown text
• Require API 22 or more for functioning
• We can't change the color of the individual animated text ( we can do this with the java code, but by default, this feature is not available )
• We can't change the animation time
• We can't have different text size of count down numbers ( means decreasing or increasing the text size when we move toward the end )

So let's implement a simple PulseCountDownView in our android app.

Step 1: Create a New Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next.

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 22: Android 5.1 (Lollipop))

4. Next click on the Finish button after filling in the above details

5. Now, wait for the project to finish building.

Note: The PulseCountDownView will not work below android 5.1, so select the minimum SDK 22.

Step 2: Adding the PulseCountDownView dependency

To show the CountDown in our app, we have to implement the SweetAlert in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies {
 // Adding the pulse countdown
      implementation 'com.gusakov:pulse-countdown:1.1.0-rc1'
}

Step 3: Modify activity_main.xml

Now go to app -> res -> layout -> activity_main.xml, remove the default TextView and change the Layout to RelativeLayout and then add a PulseCountDown ( to show the count down the animated text ) and Button ( we click the button to start the count down ) as shown below:

<?xml version  =  "1.0" encoding  =  "utf-8"?>
<RelativeLayout 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"
    tools:context  =  ".MainActivity">

    <!-- adding the pulse count down view -->
    <com.gusakov.library.PulseCountDown
        android:elegantTextHeight = "true"
        android:textDirection = "firstStrong"
        android:textAlignment = "center"
        android:textAllCaps = "true"
        android:textStyle = "normal"
        android:paddingRight = "14dp"
        android:paddingTop = "10dp"
        android:paddingBottom = "8dp"
        android:paddingLeft = "16dp"
        android:layout_centerVertical = "true"
        android:layout_centerHorizontal = "true"
        android:layout_centerInParent = "true"
        android:id = "@+id/pulseCountDown"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:textColor = "#FF5722"
        android:text = "10"
        android:textSize = "160sp"
        app:pc_endValue = "0"
        app:pc_startValue = "10" />

    <!-- adding the button ,so that we can click it to start the count down -->
    <Button
        android:id = "@+id/buttonStart"
        android:textStyle = "bold"
        android:includeFontPadding = "true"
        android:paddingTop = "19dp"
        android:paddingBottom = "17dp"
        android:paddingLeft = "12dp"
        android:paddingRight = "9dp"
        android:backgroundTint = "#FF5722"
        android:text = "Start The CountDown"
        android:textSize = "16sp"
        android:textColor = "#ffff"
        android:textAllCaps = "true"
        android:textAlignment = "center"
        android:layout_marginBottom = "40dp"
        android:layout_marginLeft = "15dp"
        android:layout_marginTop = "9dp"
        android:layout_marginRight = "16dp"
        android:layout_alignParentBottom = "true"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

</RelativeLayout>

Attributes of PulseCountDown

Step 4: MainActivity.java file

Now open the MainActivity.java file and import some basic classes as shown below:

import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.gusakov.library.PulseCountDown;
import com.gusakov.library.java.interfaces.OnCountdownCompleted;

Next, we create the objects of Button and PulseCountDown inside MainActivity class as shown below

 //creating object of Button and PulseCountDown
    private Button buttonStart;
    private PulseCountDown pulseCountDown;

Now, inside the onCreate method, we initialize the Button and PulseCountDown as shown below

  //initialising objects
        buttonStart=( Button )findViewById( R.id.buttonStart );
        pulseCountDown=( PulseCountDown )findViewById( R.id.pulseCountDown );

Now, we create OnClickListener for buttonStart and inside @Override public void onClick(View v) start the pulseCountDown and OnCountdownCompleted and show a simple Toast message when the count down is completed add as shown below

 //button OnClickListener
        buttonStart.setOnClickListener( new View.OnClickListener(  ) {
            @Override
            public void onClick( View v ) {

                // start countdown and add OnCountdownCompleted
                pulseCountDown.start( new OnCountdownCompleted(  ) {
                    @Override
                    public void completed(  ) {
                        //show simple toast when countdown completed
                        Toast.makeText( MainActivity.this, "Pulse Count Completed : )", Toast.LENGTH_SHORT ).show(  );
                    }
                } );
            }
        } );

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.gusakov.library.PulseCountDown;
import com.gusakov.library.java.interfaces.OnCountdownCompleted;
public class MainActivity extends AppCompatActivity {

    //creating object of Button and PulseCountDown
    private Button buttonStart;
    private PulseCountDown pulseCountDown;
    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );
        //initialising objects
        buttonStart=( Button )findViewById( R.id.buttonStart );
        pulseCountDown=( PulseCountDown )findViewById( R.id.pulseCountDown );

        //button OnClickListener
        buttonStart.setOnClickListener( new View.OnClickListener(  ) {
            @Override
            public void onClick( View v ) {
                // start countdown and add OnCountdownCompleted
                pulseCountDown.start( new OnCountdownCompleted(  ) {
                    @Override
                    public void completed(  ) {
                        //show simple toast when countdown completed
                        Toast.makeText( MainActivity.this, "Pulse Count Completed : )", Toast.LENGTH_SHORT ).show(  );
                    }
                } );
            }
        } );
    }
}

Now our app is ready, below is the output of the app

Output:

In the below snapshots, you can see how PulseCountDownView will look in the android application.

When App is opened for the first time:

When we click on the Start the Countdown Button.

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a count-down timer animation using PulseCountDownView in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• Adapter and Adapter View

• Intents in Android

• How to Add Staggered Grid View in Android?

• How to Create Circle Image View using CardView in Android App