Greetings to my favorite Science community online, StemSocial.
It's @skyehi and perhaps for some people, the new year has already arrived but for me and some others, it's still hours before the new year so I wanted to do a quick bonus tutorial continuing my series into the next year.
For today's tutorial, we're going to be building an App for the occasion.
Original Image Source by RDNE Stock project from Pexels
It's the last day and most people would probably have a countdown clock for 2024. I wanted to share a quick tutorial on how to build an actual countdown clock for 2024.
Don't worry guys, this same project we're doing can be used as your countdown to any other event day or even countdown from 2024 to 2025.
I hope you're excited about this project, let's get started with our work shall we
Creating a New Android Project
As always guys, if you're a newcomer to this series, you would need to ensure that you have Android Studio IDE and Java Development Kit, JDK installed to be able to go through with the project.
If you're having troubles with the installations, please let me know in the comments.
I'll assume we're all set with the prerequisites guys.
First thing we want to do is to create a new Android Studio project by opening Android Studio and simply clicking on "Start a new Android Studio project".
Please select Empty Activity as the template of the App and click on the Next button. Choose a nice or appropriate App name and package name for your 2024 countdown App.
Also guys we're still going to use Java as the programming language and not Kotlin so please ensure that Java is the selected language.
When you're satisfied with your project configuration please click on the "Finish" button and wait for Android Studio to create your new project.
Design The Simple User Interface
Alright guys, when your project is created, the first thing we would work on is the user interface. This will be done inside our res/layout/activity_main.xml file so guys go ahead and open that file.
This is going to be a rather simple countdown App and we'll need just one important UI element, a textView element.
The textView element will display the countdown clock but will show the text Countdown to 2024 if the countdown has not started yet and will show a Happy New Year when the countdown is over.
This is most definitely going to be the simplest App we've worked on since the beginning of the series so everyone should be able to get this done.
If we were to build a much more advanced App, it would probably include animations and an entire welcome to 2024 screen but since it's still beginner's tutorial, we'll hold on to such complexities for now guys
Here's how your design layout code should look like
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/countdownText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Countdown to 2024: "
android:textSize="18sp"
android:layout_centerInParent="true"/>
</RelativeLayout>
Implement the Countdown Logic
It's now time to work on the Logic of our App. Just like we did with previous alarm and timer Apps, we'll implement the default CountDownTimer class which is already inbuilt in Android Studio to set our countdown logic.
When the countdown is over the clock will be replaced with the text; Happy New Year!
All of this code will be written in our MainActivity.java file.
Here's how the backend code should look like
import android.os.Bundle;
import android.os.CountDownTimer;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private TextView countdownText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
countdownText = findViewById(R.id.countdownText);
// Set the target date and time for the countdown
long targetMillis = calculateTargetMillis();
new CountDownTimer(targetMillis, 1000) {
public void onTick(long millisUntilFinished) {
updateCountdownText(millisUntilFinished);
}
public void onFinish() {
countdownText.setText("Happy New Year!");
}
}.start();
}
// ... (Include the calculateTargetMillis and updateCountdownText methods as provided above)
}
Running the Countdown App
Congratulations guys, we just completed a really simple 2024 countdown App. You can easily run this App either via a physical Android Device or via an emulator.
So guys just click the "Run" button in Android Studio and wait for your App to be installed on the device and launched.
When our App launches, the TextView will displaying "Countdown to 2024" and after which the countdown will start counting down the clock to 2024 based on your time zone.
The countdown conveniently updates every second, showing the remaining days, hours, minutes, and seconds until the year 2024.
So finally when the countdown reaches zero, the TextView changes to "Happy New Year!"
Congratulations guys, you made it to a new year. It's been a wild ride and an amazing year.
Thanks for all the love and support from @stemsocial and every that supported my series since the time it began.
There's definitely a lot more to come in the next year.
Have a Great day and catch you next time on StemSocial. Goodbye 👨💻
You Can Follow Me @skyehi For More Like This And Others
