Modulus operation for array index

Question

I got a tutorial about using a button for switching some images, and here is the code

public class MainActivity extends AppCompatActivity {
private static ImageView andro;
private static Button buttonswitch;

int current_image_index = 0;
int[] images = {R.mipmap.andro_img,R.mipmap.apple_image,R.mipmap.ic_launcher,R.mipmap.ic_launcher_round};
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    buttonClick();
}
public void buttonClick() {
    andro = (ImageView) findViewById(R.id.imageView);
    buttonswitch = (Button) findViewById(R.id.button);
    buttonswitch.setOnClickListener(
            new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    current_image_index++;
                    current_image_index = current_image_index % images.length;
                    andro.setImageResource(images[current_image_index]);
                }
            }
    );
}
}

I got really confused in this part :

 @Override
            public void onClick(View view) {
                current_image_index++;
                current_image_index = current_image_index % images.length;
                andro.setImageResource(images[current_image_index]);

What I understand is that once I click the button, then the int current_image_index will increase by 1. Then modulus current_image_index with the images.length which will have the remainder of current_image_index divide by the image.length. For example, for the first time I will have current_image_index = 0, then once clicked, it will be 1, then current_image_index % image.length = 0. Then andro.setImageResource(images[0]);

this will repeated again and again since the current_image_index stays to be 0. Then how can the picture changes constantly once it is clicked since the current_image_index%image.length will always give a result of 0.

Solution

...since the current_image_index%image.length will always give a result of 0.

Not quite correct.

The modulus operator (%) calculates the remainder of two operands. It is a sort of repeated subtraction. In fact, with a % b you'll ask yourself:

What number remains if I repeat subtracting b from a until that operation is no longer possible?

Let us test it with 8 % 3 (so a = 8 and b = 3).

• Can I subtract 3 from 8? Yes, result is 5.
• Can I subtract 3 from 5? Yes, result is 2.
• Can I subtract 3 from 2? No, so our final result is 2.

Logically, the operation a % b with result r always results in 0 <= r < b.

Examples:
5 % 2 = 1 (because 4 ÷ 2 = 2 and the remainder is 1)
17 % 6 = 5 (because 12 ÷ 6 = 2 and the remainder is 5)
20 % 4 = 0 (because 20 ÷ 4 = 5 and nothing remains)

So in your case, the array index is always at least 0 and at most images.length - 1. And that's exactly the valid range of your array.

Suppose you have 3 images, thus images.length is 3. Also current_image_index is initialized to 0. So you'll see image[0] at the beginning.

1. You click once, so current_image_index is incremented to 1. Then, the modulus operation is applied: 1 % 3 = 1.
2. You click again, so current_image_index is incremented to 2. Then, the modulus operation is applied: 2 % 3 = 2.
3. You click again, so current_image_index is incremented to 3. Then, the modulus operation is applied: 3 % 3 = 0. That means the index reached 3, but then was immediately reset to 0 by the modulus operator.

So after image[2], image[0] is shown. You see that indices starting at 0 instead of 1 is working in our benefit now.