Question

I am trying to develop an app of wallpapers. There are two buttons for changing images (next and back). Everything is going well with that.
Now I want to display a progress bar for a while (image changes in less than a second) when the "next" is clicked to change the image. Please give me a hint on how to do it, I have absolutely no idea.
Here is my Main Activity.

public class Main extends Activity { 
    private ImageView hImageViewPic;
    private Button iButton, gButton;
    private int currentImage = 0;
    int[] images = { R.drawable.r1, R.drawable.r2, R.drawable.r3, R.drawable.r4, 
        R.drawable.r5, R.drawable.r6, R.drawable.r7, R.drawable.r8, R.drawable.r9, R.drawable.r10 }; 

    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        hImageViewPic = (ImageView)findViewById(R.id.idImageViewPic); 
        iButton = (Button) findViewById(R.id.bnext);
        gButton = (Button) findViewById(R.id.bprev);
        //Just set one Click listener for the image 
        IButton.setOnClickListener(iButtonChangeImageListener); 
        gButton.setOnClickListener(gButtonChangeImageListener);
    } 

    View.OnClickListener iButtonChangeImageListener = new OnClickListener() {
        public void onClick(View v) {
            //Increase Counter to move to next Image 
            currentImage++; 
            currentImage = currentImage % images.length; 
            hImageViewPic.setImageResource(images[currentImage]);
    }
    };
    View.OnClickListener gButtonChangeImageListener = new OnClickListener() { 
        public void onClick(View v) {
        //Increase Counter to move to next Image 
        currentImage--;
        currentImage = currentImage % images.length; 
        hImageViewPic.setImageResource(images[currentImage]); 
    }
    }; 
}
Was it helpful?

Solution

Change your code as follows:

public class Main extends Activity {
    private ImageView hImageViewPic;
    private Button iButton, gButton;
    private int currentImage = 0;
    private Handler handler = null;
    private ProgressDialog progressDialog = null;
    int[] images = { R.drawable.r1, R.drawable.r2, R.drawable.r3, R.drawable.r4, 
            R.drawable.r5, R.drawable.r6, R.drawable.r7, R.drawable.r8, R.drawable.r9, R.drawable.r10 }; 


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

        handler = new Handler();
        hImageViewPic = (ImageView)findViewById(R.id.idImageViewPic); 
        hImageViewPic.setImageResource(images[currentImage]);
        iButton = (Button) findViewById(R.id.bnext);
        gButton = (Button) findViewById(R.id.bprev);
        //Just set one Click listener for the image 
        iButton.setOnClickListener(iButtonChangeImageListener); 
        gButton.setOnClickListener(gButtonChangeImageListener);
    }

    private void changeImage(View v){
        progressDialog = new ProgressDialog(MainActivity.this); 
        progressDialog.setMessage("Please Wait...");
        progressDialog.show();
        new Thread(new Runnable() {
            public void run() {
                long starttime = SystemClock.currentThreadTimeMillis();
                long stopwatch = 0;
                //Use Handler to change your Image here
                handler.post(new Runnable() {
                        @Override
                        public void run() {
                            if (currentImage < 0)
                                currentImage = images.length - 1;
                            currentImage = currentImage % images.length; 
                            hImageViewPic.setImageResource(images[currentImage]);
                        }
                    });
                    do{
                    stopwatch =(SystemClock.currentThreadTimeMillis()-starttime);
                    if(stopwatch > 500)
                        break;
                }while(true);
                //The loop will always execute for 5000 milliseconds
                progressDialog.dismiss();
            }
        }).start();
    }
    View.OnClickListener iButtonChangeImageListener = new OnClickListener() {
        public void onClick(View v) {
            //Increase Counter to move to next Image
            currentImage++;
            changeImage(v);
        }
    };
    View.OnClickListener gButtonChangeImageListener = new OnClickListener() { 
        public void onClick(View v) {
        //Decrease Counter to move to next Image
        currentImage--;
        changeImage(v);
    }
    }; 
}

OTHER TIPS

Well, you need to play with visibility of you views and add a ProgressBar.

See my xml for the layout you should use (+ add you buttons) :

     <ImageView 
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="visible"/>

</RelativeLayout>

When the Image is loaded, you change the visibility of your ProgressBar & ImageView. You can acheive that with AsyncTask for example :

private class LoadImage extends AsyncTask<Void, Void, Drawable> {


    @Override
    protected Drawable doInBackground(Void... params) {
        return getResources().getDrawable(images[currentImage]);
    }


    @Override
    protected void onPostExecute(Drawable result) {
        if (result != null) {
            hImageViewPic.setImageDrawable(result);
        }

        // you can add animation transition (fadein) if you want to
        hImageViewPic.setVisibility(View.VISIBLE);
        mProgressBar.setVisibility(View.GONE);
        super.onPostExecute(result);
    }

}

What about something like this?

    View.OnClickListener iButtonChangeImageListener = new OnClickListener() {
        public void onClick(View v) {
//Show dialog which will show
        ProgressDialog dialog = ProgressDialog.show(Main.this, "Loading", "Please wait...",    true);
        currentImage++; 
        currentImage = currentImage % images.length; 
        hImageViewPic.setImageResource(images[currentImage]);
//everything is complete so we can hide the progress dialog
dialog.dismiss();
     } };
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top