Android: How to cycle through different images with button click?

Question

In my android program I am wanting to cycle through different images of traffic lights on the click of a button. Whenever the app loads it starts off with an image of a red light, and when I click it I want it to change the green light, and the another click to a yellow light. This is what I have in my Java file

package com.example.trafficsimulator;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }


    public void stopButton(View view){
        final Button button = findViewById(R.id.button);
        ImageView image = findViewById(R.id.redLightImage);
        button.setBackgroundColor(getResources().getColor(R.color.yellowlight));

        button.setText("Go");
        image.setImageResource(R.drawable.yellowlight);


    }

and XML file

   <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/redLightImage"
        android:layout_width="217dp"
        android:layout_height="372dp"
        android:layout_marginStart="97dp"
        android:layout_marginTop="61dp"
        android:layout_marginEnd="97dp"
        android:layout_marginBottom="298dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/redlight" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="156dp"
        android:layout_marginTop="76dp"
        android:layout_marginEnd="167dp"
        android:layout_marginBottom="173dp"
        android:background="#BA1C1C"
        android:onClick="stopButton"
        android:text="@string/stop"
        android:textColor="@android:color/white"
        android:textColorHint="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redLightImage"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

You can achieve your goal like this

Main Activity

    Button buttonChangeLight;
    ImageView imageLight;
    int counter = 0;
    
    public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        buttonChangeLight = findViewById(R.id.button);
        imageLight = findViewById(R.id.redLightImage);


        //to change lights
        changeLight();
    }

    //change you light
    public void changeLight(){
        buttonChangeLight.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(counter == 2){
           counter = 0;
           image.setImageResource(R.drawable.redLight);
        }else if(counter == 1){
           counter++;
           image.setImageResource(R.drawable.yellowLight);
        }else if(counter == 2){
           counter++;
           image.setImageResource(R.drawable.greenLight);
        }
      }
    });
  }

Answer 2

Hello (I was unable understand your problem but I uploaded the solution if this doesnt work let me know I'll try give better answer) You can do one thing here,

Initially add all the images(red,yellow,green) into the applications xml file all of them at the same place and then set the alpha of two of the images and as '0' from the attributes except the red image section then on every click of the button you set the alpha of the current image as zero and alpha of the second image as zero... so on and so forth so the code will be something like this

boolean isred =true; //for red image
boolean isyellow = false; //for yellow image
boolean isgreen = false; // for green image
//button onclick listener
public void ChangeImage(View view){

  if(isred == true){
        RedImageView.animate().alpha(0).setduration(500); //500 milli-seconds it will 
        //give an animation effect
       YellowImageView.animate().alpha(1).setduration(500);
       isyellow = true;
       isred = false;
   }
if(isyellow == true){

    YellowImageView.animate().alpha(0).setduration(500);
    GreenImageView.animate().alpha(1).setduration(500);
    isyellow = false;
    isgreen = true;
 }
if(isgreen == true){
     GreenImageView.animate().alpha(0).setduration(500);
     isgreen = false;
     // now if you want to continue the same thing then you must add the below code
     RedImageView.animate().alpha(1).setduration(500);
     isred = true;
}
   
}