How to display a larger image in a smaller ImageView with a sliding effect in Android?

Question

i am having a image of size 1000X400px. Assuming the screen width of the target android device to be 320px. i want to slide that image from right to left. actually i want to do this for a sliding 2d scrolling platformer that i was trying to make. so please help as i am just a beginner(only 2 weeks into android dev.)

i was thinking if i could somehow make the program sleep for some time and i did this:

int START_X = 0;
int START_Y = 0;
final int WIDTH_PX = 320;
final int HEIGHT_PX = 400;

Bitmap SOURCE_BITMAP = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.drawable.background);
Bitmap img = Bitmap.createBitmap(SOURCE_BITMAP, START_X, START_Y, WIDTH_PX, HEIGHT_PX, null, false);

bg=(ImageView)findViewById(R.id.imageView1);
bg.setImageBitmap(img);

try {
    Thread.currentThread().sleep(2000);
} catch (InterruptedException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}

img = Bitmap.createBitmap(SOURCE_BITMAP, START_X+100, START_Y, WIDTH_PX, HEIGHT_PX, null, false);
bg.setImageBitmap(img);

try {
    Thread.currentThread().sleep(2000);
} catch (InterruptedException e) {
    e.printStackTrace();
}

img = Bitmap.createBitmap(SOURCE_BITMAP, START_X+200, START_Y, WIDTH_PX, HEIGHT_PX, null, false);
bg.setImageBitmap(img);

but it directly executes the last statements after waiting for 4000ms i.e.

img = Bitmap.createBitmap(SOURCE_BITMAP, START_X+200, START_Y, WIDTH_PX, HEIGHT_PX, null, false);
bg.setImageBitmap(img);

Answer 1

First of all: the reason why you only see the effect of the last setImageBitmap(img) is because the method doesn't actually stop everything and draw the bitmap. It just sets the "drawing process" in a queue and it takes care of it a little bit later. The reason why it didn't render the bitmap even with the Thread.sleep call, is because you we're freezing the thread which renders the screen. :) The code you write (unless you write it in a separate thread) runs on the same thread as the code that handles the screen drawing. If you freeze that ... you basically block the entire app.

Second: As mentioned, Thread.currentThread().sleep(2000) is not a good approach to stop the thread. The main thread of an Android app is called the UI thread. If you freeze that, your ENTIRE app will freeze. So don't do it, whatever the case. :) Use AsyncTasks instead ... or the postDelayed method of the Handler or some other way. There are a couple more.

Now, to get back to the matter at hand:

• If you want to create an Android game, I suggest looking over the libGDX game development framework.

• But if you don't want to go right into that, the easiest way of doing what you've described above would be to use an Animation. See this guy's answer.

• Another approach could be to use a ValueAnimator, see this . What it does is ... you set a start and end value, i.e. screenWidth and 0 and you set a duration in miliseconds. Some "magic" happens in the back and a method onAnimationUpdate is called periodically with values between the start and end values you entered . You can take that value and set it as the left position of the ImageView. This might move the View from right to left and obtain the effect you want.

A more "advanced" method of doing it Now ... a good way of doing it, which comes to mind, could be to:

• create a class that overrides the ImageView class.
• Set that in the .xml file of your layout and make it match_parent.
• In its constructor you could load the Bitmap value into memory and keep it in a Bitmap local attribute.
• Now .. the next thing you could do is override the onDraw method of the ImageView.
• In it, you could use the drawBitmap method of the Canvas object. It accepts a srcRect and destRect which basically describesc what chunk from the original image goes where on the ImageView's canvas.
• You could have a separate thread to keep the duration by which the image moves along the screen and that thread could call the invalidate method of your ImageView thus forcing the onDraw method to be called and thus redrawing the bitmap a little bit more to the left.