How to set timers to repeat three functions (showing pic in imageview) every certain amount of time?

Question

So currently I am making a Pokédex for my internship. I've got it working for the biggest part but there's a couple of things I need to get fixed including the question asked above. I have a function called Eeveelutions which has to run three other functions called showVaporeon, showJolteon & showFlareon. They have to run for like 3 seconds each and then just loop around until the person using the pokedex goes to the next or previous pokémon. The thing I need help with is how would I set a timer, (if that's the best way to do it) to run those functions. So, showVaporeon for 3 seconds, then showJolteon for 3 seconds, then Flareon for 3 seconds and repeat. I have searched loads of questions to find my solution but I can't find it yet and most of it is not in kotlin.

So, is there anyone who has got an easy example for me or a better solution (and example) then using a timer.

Searched forum for solutions, messed around with timers, messed around with threads but no solutions yet

fun showVaporeon(){
        evoChart2.visibility = View.VISIBLE
        Glide.with(this).load(imageBaseURL + "134" + ".png").into(evoChart2)
        evolveOption2.text = "Vaporeon"
        evolveOption2.text = ""
        evoChart2.visibility = View.GONE
    }

    fun showJolteon(){
        evoChart2.visibility = View.VISIBLE
        Glide.with(this).load(imageBaseURL + "135" + ".png").into(evoChart2)
        evolveOption2.text = "Jolteon"
        evolveOption2.text = ""
        evoChart2.visibility = View.GONE
    }

    fun showFlareon(){
        evoChart2.visibility = View.VISIBLE
        Glide.with(this).load(imageBaseURL + "136" + ".png").into(evoChart2)
        evolveOption2.text = "Flareon"
        evolveOption2.text = ""
        evoChart2.visibility = View.GONE
    }

So I would want evoChart2 (which is one of the three imageviews I have) to show Vaporeon for 3 seconds, then Jolteon for 3 seconds, then Flareon for 3 seconds, and then Vaporeon again for 3 seconds, Jolteon, Flareon etc.

Answer 1

Since you're wanting a loop, I'd suggest using a list to make it easier to iterate and add more pokemon in future.

Create a Pokemon data class if you don't have one already.

data class Pokemon(val name: String, val imageUrl: String)

Create however many instances of this class as you need and add them to a list.

val pokemonList: List<Pokemon> = listOf(vaporeon, jolteon, flareon)

We'll also need to store the index of the current pokemon we're displaying

var currentIndex = 0

Next we'll create a Runnable and schedule it to execute every three seconds, you may want to do this in onResume.

val service = Executors.newSingleThreadScheduledExecutor()
service.scheduleAtFixedRate({ displayPokemon() }, 0, 3, TimeUnit.SECONDS)

Now create the displayPokemon function that is going to be called every 3 seconds.

fun displayPokemon() {
}

Inside this function we need to know what the next pokemon we're displaying is, based on the current pokemon.

val next = currentIndex + 1
if (next >= pokemonList.size) {
     // we're at the end, go back to 0
     currentIndex = 0
} else {
     currentIndex = next
}

val pokemon = pokemonList[currentIndex]

Now that we have the next pokemon to display we can use it to populate the view

evoChart2.visibility = View.VISIBLE
Glide.with(this).load(pokemon.imageUrl).into(evoChart2)
evolveOption2.text = pokemon.name
evolveOption2.text = ""
evoChart2.visibility = View.GONE

Finally, we don't want this to happen when the Activity/Fragment is in the background so we add the following code to onPause

service.shutdown()