Day 8 : Image flipping Problem in Android

1 min read

Dear Friends

Today we have a challenge to solve where we need to show an Image in Android UX and this image will be switched to different image after few seconds.  Something similar to changing wallpaper functionality.

Solution

Friends I have created another blog post that will help beginners to setup a new android project in android studio. Please visit [link] and after reading the page kindly come back to this blog post to continue solving problem. visit

Coming back to our original problem

Lets have an Activity A which can show Image in UX (view).

A simple code snippet that assumes Imageview in layout.xml file. Although we can generate a imageview dynamically via java code but we keep this for some other blog post. For simplicity we are inflating image view via xml using findviewById

package in.relsellglobal.simpleimageswitcher;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView)findViewById(R.id.imageview);
        imageView.setImageDrawable(this.getDrawable(R.mipmap.ic_launcher));
    }
}

So in the above code snippet imageview is inflated from xml and then an image is set inside image view.

imageView.setImageDrawable(this.getDrawable(R.mipmap.ic_launcher));

lets add two buttons below imageview


My Beginner friends please visit link to understand xml attributes used above. [Link would be updated]

I am keeping this blog simple so users can skip links.

Now please add references to your buttons means binding your java code with xml.

So now your java code for Mainactivity would becomes like below

package in.relsellglobal.simpleimageswitcher;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.ButtonBarLayout;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    Button prevButton;
    Button nextButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView)findViewById(R.id.imageview);
        prevButton = (Button)findViewById(R.id.prevButton);
        nextButton = (Button)findViewById(R.id.nextButton);
        imageView.setImageDrawable(this.getDrawable(R.mipmap.ic_launcher));
    }
}

Now please run your application in device.

you will get output as snapshotoutput

Now add onclickhandler for our two buttons add in oncreate method

nextButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // set image here

            }
        });

        prevButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // set image here

            }
        });

What if we want different images to be shown on click of buttons. ?

Lets create one image array .

 int []imageArray  = {R.mipmap.img1,R.mipmap.img2,R.mipmap.img3,R.mipmap.img4,R.mipmap.img5,R.mipmap.img6,R.mipmap.img7,R.mipmap.img8};

create one instance variable count for image array index.

int count = 0;

so in onclick handlers for buttons will be edited as below

nextButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                count ++;
                imageView.setImageDrawable(MainActivity.this.getDrawable(imageArray[count]));
                // set image here

            }
        });

        prevButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // set image here

                count --;
                imageView.setImageDrawable(MainActivity.this.getDrawable(imageArray[count]));

            }
        });

So you now know how to make a very simple image switching. For Image Flipper advance dev please visit my another blog post. [ Link]

Thanks for reading.