Change images in ImageView with timer when button is clicked

Question

I want to change 20 images inside an ImageView with timer (1sec delay). Can someone help me? I tried postdelayed runnable method but my Activity is not functioning well (getting crushed 2 out of 10 clicks) when I put 17 images in my xml file (17 ImageViews). Each images has a max size of 230kb. Can someone help me using another method? My code is too long for I use switch case. Can someone post any sample of your code it will really helps. Thanks.

E/AndroidRuntime: FATAL EXCEPTION: main
E/AndroidRuntime: Process: com.example.computer.mathkiddofinal, PID: 32031
E/AndroidRuntime: java.lang.RuntimeException:
    Unable to start activity
        ComponentInfo{com.example.computer.mathkiddofinal/com.example.computer.mathkiddofinal.grade_level.topics.gradeFour_PlaceValue}:
            android.view.InflateException: Binary XML file line #25:
                Error inflating class <unknown>
E/AndroidRuntime:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2338)

Here a sample of my code it's about 20 ImageViews. I only posted 2 ImageView for example.

public class gradeFour_PlaceValue extends Activity {

int count = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_grade_four__place_value);

    final Button btn = (Button) findViewById(R.id.button2);

    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(final View v) {
            final ImageView[] images = {(ImageView) findViewById(R.id.im1),
                    (ImageView) findViewById(R.id.im2)};
            v.postDelayed(new Runnable() {
                @Override
                public void run() {
                    images[count].setVisibility(View.VISIBLE);
                    switch (count){
                        case 0:
                            images[1].setVisibility(View.GONE);
                            break;
                        case 1:
                            images[0].setVisibility(View.GONE);
                            break;
                        ...

my xml layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/place1">

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start"

    android:id="@+id/button2"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="179dp" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im1"
    android:visibility="gone"
   android:background="@drawable/place1"
    android:layout_alignParentBottom="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im2"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place2" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im3"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place3" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im4"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place4" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im5"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place5" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im6"
    android:layout_alignBottom="@+id/im1"
    android:visibility="gone"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place6" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im7"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place7" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im8"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place8" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im9"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place9" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im10"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place10" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im11"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place11" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im12"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place12" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im13"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place13" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:id="@+id/im14"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place14" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/im15"
    android:visibility="gone"
    android:layout_alignBottom="@+id/im1"
    android:layout_centerHorizontal="true"
    android:background="@drawable/place15" />

Answer 1

You are using Visibility.GONE to hide ImageViews in your layout.xml (R.layout.activity_grade_four__place_value) and Java code (gradeFour_PlaceValue).

I think you should use visibility="invisible" in the xml and images[n].setVisibility(View.INVISIBLE); in the Java code.

Because Visibility.GONE means the View is absent from the layout. So you are using RelativeLayout as the parent ViewGroup and the ImageViews from number two to the last are rely on their position to the first ImageView (im1),

android:layout_alignBottom="@+id/im1"

that they are unable to determine their positions when the first ImageView is absent (Visibility.GONE).

When you use Visibility.INVISIBLE, their existence in the layout haven't gone and just their visibility become invisible.

I hope it helps.

Answer 2

Create a file called images_slideshow or whatever you want in your drawable folder:

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/image1" android:duration="1000" />
    <item android:drawable="@drawable/image2" android:duration="1000" />
    <item android:drawable="@drawable/image3" android:duration="1000" />
    <item android:drawable="@drawable/image4" android:duration="1000" />
    <item android:drawable="@drawable/image5" android:duration="1000" />
    <item android:drawable="@drawable/image6" android:duration="1000" />
    <item android:drawable="@drawable/image7" android:duration="1000" />
    <item android:drawable="@drawable/image8" android:duration="1000" />
    <item android:drawable="@drawable/image9" android:duration="1000" />
    <item android:drawable="@drawable/image10" android:duration="1000" />
    <item android:drawable="@drawable/image11" android:duration="1000" />
    <item android:drawable="@drawable/image12" android:duration="1000" />
    <item android:drawable="@drawable/image13" android:duration="1000" />
    <item android:drawable="@drawable/image14" android:duration="1000" />
    <item android:drawable="@drawable/image15" android:duration="1000" />
    <item android:drawable="@drawable/image16" android:duration="1000" />
    <item android:drawable="@drawable/image17" android:duration="1000" />
    <item android:drawable="@drawable/image18" android:duration="1000" />
    <item android:drawable="@drawable/image19" android:duration="1000" />
    <item android:drawable="@drawable/image20" android:duration="1000" />
</animation-list>

This will shuffle your ImageView every 1 second, you can change the duration if you want from the android:duration attribute of each one of them. By setting the android:oneshot attribute of the list to true, it will cycle just once then stop and hold on the last frame. If it is set false then the animation will loop.

Declare your views before onCreate():

ImageView imageViews;
AnimationDrawable imagesAnimation;

Add this in your onCreate():

imageViews = (ImageView) findViewById(R.id.im1);
imageViews.setBackgroundResource(R.drawable.images_slideshow);
imagesAnimation = (AnimationDrawable) imageViews.getBackground();

imageViews.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (imagesAnimation.isRunning()) {
                imagesAnimation.stop();
            } else {
                imagesAnimation.start();
            }
        }
        return true;
    }
});

You can now start and pause your images animation onTouch of the ImageView. You can change its logic like starting and pausing it through the onClick of a button.

Documentation: AnimationDrawable | Android Developers

Give it a try. Hope that helps.

Answer 3

Use following code

Handler handler = new Handler();
Runnable runnable = new Runnable() 
{
    int i = 0;

    public void run() 
    {
            image1.setImageResource(imageArray[i]);

            i++;
            if (i > imageArray.length - 1) 
            {
                i = 0;

            }
            Animation animationFadeIn = AnimationUtils.loadAnimation(DashBordActivity.this, R.anim.anim1);
            image1.startAnimation(animationFadeIn);
            handler.postDelayed(this, 3000); // for interval...
        }

    };
    handler.postDelayed(runnable, 1000); // for initial delay..