Home Android How to make a CountDownTimer – android timer example

How to make a CountDownTimer – android timer example

0
count down timer android Library
count down timer android Library

Hi Guys, Welcome to Proto Coders Point, In the Android Tutorial, we are implementing the GitHub android circular countdown timer library, TICKER by using which we can build an android studio countdown timer app.

Ticker Library countdowntimer android

Ticker a android library which can be used for different count down timer activities, and Progress Loaders.

DEMO

Let’s begin implementing count down timer in android.

Adding CountDown Timer android in your android Project

I assume that you already have created a new project in android studio(IDE).

Android Studio > Files > New  > New Project > give a name to project

SetUp the ticker library

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

allprojects {
    repositories {
      maven { url 'https://jitpack.io' } // add this line
    }
  }

You should add the Maven url in build.gradle( project level).

Add the dependency:

Then, add the ticker count down dependencies in build.gradle( module : app ).

dependencies {
    implementation 'com.github.rehmanmuradali:ticker:1.0.0' // add this line 
  }

and then its done with adding library into the android project.

UI of Ticker Circular countdown timer view – XML android timer

<ticker.views.com.ticker.widgets.circular.timer.view.CircularView
       android:id="@+id/circular_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:m_circle_radius="25"
       app:m_cicle_stroke_width="14"
       app:m_arc_stroke_color="@android:color/white"
       app:m_circle_stroke_color="@color/colorPrimary"
       />

Basic Explaination of above ticker xml UI code

Available Attributes Properties

  • m_circle_radius: circle radius of Circular View
  • m_cicle_stroke_width: stroke width of Circular View in dp
  • m_circle_stroke_color: stroke color of outer Circular View
  • m_arc_stroke_color: color of inner rotating arc
  • m_arc_margin: Inner arc margin from cicle in dp

circle radius is for defining the size of the ticker circle.

eg : app:m_circle_radius=”70″.

circle stroke width : is for giving stroke width size of the ticker circle.

eg : app:m_cicle_stroke_width=”16″

arc stroke color is for giving circle inside arc stroke color

eg: app:m_arc_stroke_color=”@android:color/white”

circle stroke color to set back ground color

eg : app:m_circle_stroke_color=”@color/colorPrimary”.

Functionality of circular View Ticker count down Timer

CirculerView CircularView  = (CircularView) rootView.findViewById(R.id.circular_view);

Create a circularView object that point the UI of the View.

CircularView.OptionsBuilder builderWithTimer = 
          new CircularView.OptionsBuilder()
                .shouldDisplayText(true)
                .setCounterInSeconds(30)
                .setCircularViewCallback(new CircularViewCallback() {
                    @Override
                    public void onTimerFinish() {
                    
                        // Will be called if times up of countdown timer
                        Toast.makeText(MainActivity.this, "CircularCallback: Timer Finished ", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onTimerCancelled() {
                    
                        // Will be called if stopTimer is called
                        Toast.makeText(MainActivity.this, "CircularCallback: Timer Cancelled ", Toast.LENGTH_SHORT).show();
                    }
                });

circularView.setOptions(builderWithTimer);

Create a builder for the circularView Timer

.shouldDisplayText(true) is used to Display a text inside the Ticker Circular View timer

.setCounterInSeconds(30) set the timer for 30 sec or more as per your requirement but it should be in seconds.

onTimerFinish() : This will get called when timer will get finished.

onTimerCancelled() :  When user stops the timer.

How to start, stop, pause, resume the count down timer?

 //start circular view to rotate
  circularView.startTimer();
  
 // pause circular view and timer
  circularView.pauseTimer()
  
 // resume circular view and timer
  circularView.resumeTimer();
  
// stop circular view and timer
  circularView.stopTimer();

Complete Code of Count Down Timer android Library

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView 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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_gravity="center_horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Count Down Timer"
            android:textSize="25sp"
            android:textStyle="bold|italic"
            android:layout_margin="15dp"
            android:textColor="#000EFF"/>

        <ticker.views.com.ticker.widgets.circular.timer.view.CircularView
            android:id="@+id/circular_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            app:m_circle_radius="100"
            app:m_cicle_stroke_width="15"
            app:m_arc_stroke_color="@android:color/white"
            app:m_circle_stroke_color="@color/colorPrimary"
            />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:id="@+id/start_timer"
                android:layout_width="160dp"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:background="#FF6F00"
                android:textSize="25sp"
                android:textColor="#FFF"
                android:text="Start"
                android:onClick="time_start"/>
            <Button
                android:id="@+id/stop_timer"
                android:layout_width="160dp"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:background="#FA2929"
                android:textSize="25sp"
                android:textColor="#FFF"
                android:text="Stop"
                android:onClick="time_stop"/>
            <Button
                android:id="@+id/pause_timer"
                android:layout_width="160dp"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:background="#364057"
                android:textSize="25sp"
                android:textColor="#FFF"
                android:text="Pause"
                android:onClick="time_pause"/>

            <Button
                android:id="@+id/resume_timer"
                android:layout_width="160dp"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:background="#FFAA00"
                android:textSize="25sp"
                android:textColor="#FFF"
                android:text="Resume"
                android:onClick="time_resume"/>

            <Button
                android:id="@+id/reset_timer"
                android:layout_width="160dp"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:background="#FF6F00"
                android:textSize="25sp"
                android:textColor="#FFF"
                android:text="Reset"
                android:onClick="time_reset"/>



        </LinearLayout>
    </LinearLayout>



</ScrollView>

This code is for layout Designing

Layout design of ticker library

MainActivity.java

package protocoderspoint.com.countdowntimertickerlibrary;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.Intent;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;


import ticker.views.com.ticker.widgets.circular.timer.callbacks.CircularViewCallback;
import ticker.views.com.ticker.widgets.circular.timer.view.CircularView;

import static android.view.View.GONE;

public class MainActivity extends AppCompatActivity {

    CircularView circularViewWithTimer;
    Context context;
    int countBeep = 0;
    int tempBeep = 0;
    Button start,stop,pause,resume,reset;

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

        start=(Button)findViewById(R.id.start_timer);
        stop=(Button)findViewById(R.id.stop_timer);
        pause=(Button)findViewById(R.id.pause_timer);
        resume=(Button)findViewById(R.id.resume_timer);
        reset=(Button)findViewById(R.id.reset_timer);

        stop.setVisibility(GONE);
        pause.setVisibility(GONE);
        resume.setVisibility(GONE);



        circularViewWithTimer = findViewById(R.id.circular_view);
        CircularView.OptionsBuilder builderWithTimer =
                new CircularView.OptionsBuilder()
                        .shouldDisplayText(true)
                        .setCounterInSeconds(30)
                        .setCircularViewCallback(new CircularViewCallback() {
                            @Override
                            public void onTimerFinish() {

                                // Will be called if times up of countdown timer
                                Toast.makeText(MainActivity.this, "Timer Finished ", Toast.LENGTH_SHORT).show();
                                if(countBeep==30)
                                {
                                    stop.setVisibility(GONE);
                                    pause.setVisibility(GONE);
                                    resume.setVisibility(GONE);
                                }

                            }

                            @Override
                            public void onTimerCancelled() {

                                // Will be called if stopTimer is called
                                Toast.makeText(MainActivity.this, " Timer Stopped ", Toast.LENGTH_SHORT).show();

                            }

                        });

        circularViewWithTimer.setOptions(builderWithTimer);


    }

    public void time_start(View view) {
        circularViewWithTimer.startTimer();
        playAlertTone(getApplicationContext());
        start.setVisibility(GONE);
        stop.setVisibility(View.VISIBLE);
        pause.setVisibility(View.VISIBLE);

    }

    public void time_stop(View view) {
        circularViewWithTimer.stopTimer();
        countBeep=30;
        stop.setVisibility(GONE);
        pause.setVisibility(GONE);
        resume.setVisibility(GONE);

    }

    public void time_pause(View view) {
        circularViewWithTimer.pauseTimer();
        tempBeep=countBeep;
        countBeep=30;
        pause.setVisibility(GONE);
        resume.setVisibility(View.VISIBLE);
    }

    public void time_reset(View view) {
        Intent i = new Intent(MainActivity.this,MainActivity.class);
        startActivity(i);
        countBeep=30;
        finish();
    }
    public void time_resume(View view) {
        circularViewWithTimer.resumeTimer();
        countBeep=tempBeep;
        pause.setVisibility(View.VISIBLE);
        resume.setVisibility(GONE);
        playAlertTone(getApplicationContext());

    }

    public void playAlertTone(final  Context context){
        Thread t = new Thread(){
            public void run(){
                MediaPlayer player = null;

                while(countBeep<30){
                    player = MediaPlayer.create(context,R.raw.beep);
                    player.start();
                    countBeep+=1;
                    try {


                        Thread.sleep(player.getDuration()+500);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        };
        t.start();

    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        countBeep=30;
    }


}

MainActivity.java is used to give functionality to the project.

Recommended Article

model progress hud flutter – Flutter Circular progress indicator

Flutter Count Down Timer

No Comments