Tuesday 8 December 2015

Countdown Timer displaying remaining day, hours, minutes and seconds


In this blog, i am trying to display count down timer.
1. Xml code to display count down timer (main.xml)
    Take 4 textviews to display days, hours, minutes and seconds.
    And a button to start the timer.


 <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start Countdown"
    android:onClick="startCountDown"/>
 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="100dp">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25">
        <TextView
            android:id="@+id/days"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Days"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25">
        <TextView
            android:id="@+id/hours"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hours"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25">
        <TextView
            android:id="@+id/minutes"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Minutes"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25">
        <TextView
            android:id="@+id/seconds"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Seconds"
            android:gravity="center"/>
    </LinearLayout>
</LinearLayout>


2. Code in activity to start countdown timer

public void startCountDown(View view){
    /*    creating object for all text views    */
    final TextView days = (TextView)findViewById(R.id.days);
    final TextView hours = (TextView)findViewById(R.id.hours);
    final TextView mins = (TextView)findViewById(R.id.minutes);
    final TextView seconds = (TextView)findViewById(R.id.seconds);
    /*    172800000 milliseconds = 5days
    1000(1sec) is time interval to call onTick method
    millisUntilFinished is amount of until finished
    */
    new CountDownTimer(172800000, 1000){
        @Override
        public void onTick(long millisUntilFinished) {
            /*            converting the milliseconds into days, hours, minutes and seconds and displaying it in textviews             */
            days.setText(TimeUnit.HOURS.toDays(TimeUnit.MILLISECONDS.toHours(millisUntilFinished))+"");
            hours.setText((TimeUnit.MILLISECONDS.toHours(millisUntilFinished) - TimeUnit.DAYS.toHours(TimeUnit.MILLISECONDS.toDays(millisUntilFinished)))+"");
            mins.setText((TimeUnit.MILLISECONDS.toMinutes(millisUntilFinished) - TimeUnit.HOURS.toMinutes(TimeUnit.MILLISECONDS.toHours(millisUntilFinished)))+"");
            seconds.setText((TimeUnit.MILLISECONDS.toSeconds(millisUntilFinished) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes(millisUntilFinished)))+"");
        }

        @Override
        public void onFinish() {
            /*            clearing all fields and displaying countdown finished message             */
            days.setText("Count down completed");
            hours.setText("");
            mins.setText("");
            seconds.setText("");
        }
    }.start();
}


3. When we click start countdown button, the timer starts and we can see the countdown second by second. When the countdown completed we can see the count down completed message.


1 comment: