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)
}

Output: