Android Kotlin Firebase How to retrieve two image at the same time and add them into a bitmap array?

Question

I am currently working on a card matching game where I need to retrieve two images from a database and add them into a bitmap array. The code I currently have is giving me errors on retrieving the image. The code is:

val aDatabase = FirebaseStorage.getInstance().getReference("all/$imageID1.jpg")
val sDatabase = FirebaseStorage.getInstance().getReference("all/$imageID2.jpg")

try {
    val localfile = File.createTempFile("tempfile", ".jpg")
    aDatabase.getFile(localfile).addOnSuccessListener {
        val bitmap = BitmapFactory.decodeFile(localfile.absolutePath)
        bitmapArray.add(bitmap)
    }.addOnFailureListener {
        Log.w("myapplication", "ERROR RETRIEVING IMAGE")
        Toast.makeText(this, "ERROR RETRIEVING IMAGE", Toast.LENGTH_SHORT).show()
    }
} catch (e: Exception) {
    e.printStackTrace()
}

try {
    val localfile = File.createTempFile("tempfile1", ".jpg")
    sDatabase.getFile(localfile).addOnSuccessListener {
        val bitmap = BitmapFactory.decodeFile(localfile.absolutePath)
        bitmapArray.add(bitmap)
    }.addOnFailureListener {
        Log.w("myapplication", "ERROR RETRIEVING IMAGE")
        Toast.makeText(this, "ERROR RETRIEVING IMAGE", Toast.LENGTH_SHORT).show()
    }
} catch (e: java.lang.Exception) {
    e.printStackTrace()
}


        ///    DUPLICATE
bitmapArray.addAll(bitmapArray);
        ///SHUFFLE
bitmapArray.shuffle()

button1 = findViewById<ImageButton>(R.id.imageButton1)
button2 = findViewById<ImageButton>(R.id.imageButton2)
button3 = findViewById<ImageButton>(R.id.imageButton3)
button4 = findViewById<ImageButton>(R.id.imageButton4)
buttons = listOf<ImageButton>(button1, button2, button3, button4)

buttons.forEachIndexed { index, button ->
   button.setOnClickListener(View.OnClickListener {
      button.setImageBitmap(bitmapArray[index])
            })

When I try to add images to an ImageButton with onClick it just gives me an error saying java.lang.IndexOutOfBoundsException: Index: 0, Size: 0. What I am trying to create is a card matching game which is 2x2 hence why I am getting 2 images from FireBase Storage.

I've tried everything I could find on stackoverflow so far and nothing solved my problem. Thanks in advance.

Answer 1

You're populating the bitmapArray from addOnSuccessListener . This happens asynchronously . By the time you press the button, the array might not contain an entry at the given index, either because the download is not finished or ended with an error in addOnFailureListener .

You must handle the state correctly and at least check the bitmapArray before accessing it. Also, it seems you have only two images in the array but four buttons trying to access based on indices -- this will always result in errors for two of the four buttons.

Check out the Firebase docs and Firebase UI: https://firebase.google.com/docs/storage/android/download-files#downloading_images_with_firebaseui