How to Create a Workout Android App with Kotlin?
In this tutorial, we will explore how to build a workout app in Kotlin that allows users to track their exercises, includes a countdown timer for each exercise, and displays animated GIFs for a visually engaging workout experience. We’ll leverage the power of the Glide library to seamlessly load and display GIF images. By the end of this tutorial, you’ll have a basic workout app that you can enhance and customize according to your needs. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Project Setup
Create a new Android project in Android Studio. Add the Glide library as a dependency in your app’s build.gradle file. Set up the necessary layout files and resources for the workout activity.
implementation 'com.github.bumptech.glide:glide:4.12.0'
Step 2: Exercise Data Model
Create an Exercise data class with properties such as name, description, duration, and gifUrl.Update the Exercise data class to include a gifUrl parameter
Kotlin
data class Exercise(val name: String, val description: String, val durationInSeconds: Int , val gifImageUrl : String) |
Step 3: Workout Activity
Create a WorkoutActivity class that extends AppCompatActivity.Set up the necessary UI components in the workout activity layout file. Initialize the UI components and Glide in the WorkoutActivity class. Load and display the GIF images using Glide in the startNextExercise() method.
Kotlin
class WorkoutActivity : AppCompatActivity() { private lateinit var titleTextView: TextView private lateinit var exerciseTextView: TextView private lateinit var descriptionTextView: TextView private lateinit var timerTextView: TextView private lateinit var startButton: Button private lateinit var completeButton: Button private lateinit var imageView: ImageView private var exerciseIndex = 0 private lateinit var currentExercise: Exercise private lateinit var timer: CountDownTimer private val exercises = mutableListOf( Exercise( "Push-ups" , "Place your hands shoulder-width apart on the floor. Lower your body until your chest nearly touches the floor. Push your body back up until your arms are fully extended." , 30 , "https://media.tenor.com/gI-8qCUEko8AAAAC/pushup.gif" ), Exercise( "Squats" , "Stand with your feet shoulder-width apart. Lower your body as far as you can by pushing your hips back and bending your knees. Return to the starting position." , 45 , "https://thumbs.gfycat.com/HeftyPartialGroundbeetle-size_restricted.gif" ), Exercise( "Plank" , "Start in a push-up position, then bend your elbows and rest your weight on your forearms. Hold this position for as long as you can." , 60 , "https://media.tenor.com/6SOetkNbfakAAAAM/plank-abs.gif" ) ) override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) titleTextView = findViewById(R.id.titleTextView) exerciseTextView = findViewById(R.id.exerciseTextView) descriptionTextView = findViewById(R.id.descriptionTextView) timerTextView = findViewById(R.id.timerTextView) startButton = findViewById(R.id.startButton) completeButton = findViewById(R.id.completeButton) imageView = findViewById(R.id.imageView) startButton.setOnClickListener { startWorkout() } completeButton.setOnClickListener { completeExercise() } } |
Kotlin
private fun startWorkout() { exerciseIndex = 0 titleTextView.text = "Workout Started" startButton.isEnabled = false startButton.text = "Workout In Progress" startNextExercise() } |
Kotlin
private fun completeExercise() { timer.cancel() completeButton.isEnabled = false startNextExercise() } |
Step 4: Design the UI
activity_workout.xml
XML
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout 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" android:orientation = "vertical" android:padding = "16dp" > < TextView android:id = "@+id/titleTextView" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:textSize = "24sp" android:textStyle = "bold" android:gravity = "center" android:layout_marginBottom = "16dp" android:text = "Workout" /> < Button android:id = "@+id/startButton" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:text = "Start Workout" /> < TextView android:id = "@+id/exerciseTextView" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "16dp" android:textSize = "20sp" android:textStyle = "bold" android:text = "Exercise" /> < TextView android:id = "@+id/descriptionTextView" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "8dp" android:textSize = "16sp" /> < TextView android:id = "@+id/timerTextView" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "16dp" android:textSize = "20sp" android:textStyle = "bold" android:text = "Remaining Time" /> < Button android:id = "@+id/completeButton" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "16dp" android:text = "Complete Exercise" android:enabled = "false" /> < ImageView android:id = "@+id/imageView" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "16dp" > </ ImageView > </ LinearLayout > |
Step 5: Exercise Tracking and Timer
Implement exercise tracking using a list of Exercise objects inside startNextExercise() function. Display the exercise details and timer in the UI.Set up a countdown timer for each exercise. Update the UI and load the next exercise when the timer finishes.
Kotlin
private fun startNextExercise() { if (exerciseIndex < exercises.size) { currentExercise = exercises[exerciseIndex] exerciseTextView.text = currentExercise.name descriptionTextView.text = currentExercise.description Glide.with( this @MainActivity ) .asGif() .load(currentExercise.gifImageUrl) .into(imageView) timerTextView.text = formatTime(currentExercise.durationInSeconds) timer = object : CountDownTimer(currentExercise.durationInSeconds * 1000L, 1000 ) { override fun onTick(millisUntilFinished: Long) { timerTextView.text = formatTime((millisUntilFinished / 1000 ).toInt()) } override fun onFinish() { timerTextView.text = "Exercise Complete" imageView.visibility = View.VISIBLE completeButton.isEnabled = true } }.start() exerciseIndex++ } else { exerciseTextView.text = "Workout Complete" descriptionTextView.text = "" timerTextView.text = "" completeButton.isEnabled = false startButton.isEnabled = true startButton.text = "Start Again" } } |
Step 6: Implement formatTime function
The formatTime
function is a utility function that takes a duration in seconds and formats it into a string representation of minutes and seconds.
Kotlin
private fun formatTime(seconds: Int): String { val minutes = seconds / 60 val remainingSeconds = seconds % 60 return String.format( "%02d:%02d" , minutes, remainingSeconds) } |
Contact Us