Android Autoscroll imageview

Question

In my activity I have just an ImageView. In it, the src is a picture that is a lot bigger than the screen. I want the picture to scroll slooooowly from left to right until it reaches the right margin of the photo, then start scrolling back towards left until left margin reached. Then start all over again. I need it to happen in a separate thread so the phone would not freeze while this happens. This Is What I need

How can I achieve this? Is there a widget that does this by default?

UPDATED CODE // layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mylinear"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:src="@drawable/rainforest" />

</RelativeLayout>

// and Activity

public class MainActivity extends Activity {

    Animation           _translateAnimation;
    RelativeLayout        _relativeLoading = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        _translateAnimation = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, -100f, TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, 0f);
        _translateAnimation.setDuration(5000);
        _translateAnimation.setRepeatCount(-1);
        _translateAnimation.setRepeatMode(Animation.REVERSE); // REVERSE
        _translateAnimation.setInterpolator(new LinearInterpolator());
        _relativeLoading = (RelativeLayout) findViewById(R.id.mylinear);
        _relativeLoading.startAnimation(_translateAnimation);
    }

But it goes off the picture. I mean, the scroll goes from left to right, "pushing" the picture to the left and showing the white background bellow the ImageView.

Also, should this be inside a thread or something? I need to be able to exit this "scrolling" activity somehow, without using the Back button. I want a button on top of the ImageView (the button should stay still) and onClick it should start another Intent
It seems like the picture inside the ImageView is cropped to fit inside the screen. How can I overcome this?

You should use TranslateAnimation with some Repeat attribute — An-droid, Aug 21 '13 at 08:20

score 6 · Answer 1 · answered Aug 21 '13 at 12:24

So, the solution to my problem is here (for all of the new android developers, like me, who might need this for their apps):

public class MainActivity extends Activity {

    Animation           _translateAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        _translateAnimation = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, -300f, TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, 0f);
        _translateAnimation.setDuration(8000);
        _translateAnimation.setRepeatCount(-1);
        _translateAnimation.setRepeatMode(Animation.REVERSE); // REVERSE
        _translateAnimation.setInterpolator(new LinearInterpolator());
        ImageView img = (ImageView) findViewById(R.id.img);
        img.startAnimation(_translateAnimation);
    }
}

and the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/global_relative"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    >

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="600dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@drawable/rainforest"
        android:scaleType="center"
        android:src="@drawable/rainforest613x490" >

    </ImageView>
</ScrollView>  
</RelativeLayout>

just make sure your image is big/high enough to fit the screen, and is (+300dp) wider than the screen width (or adjust the code above).

Happy coding ;)

Hey I am facing the same issue can you help me in this... i am struggling with this for past 3 hrs.... Thank you — Gowtham Raj, Aug 23 '14 at 12:53
Scroll view is not necessary, what made the trick was setting custom width to ImageView (600dp) and then setting scale type center and then adding translate animation to ImageView. — Amit Tumkur, May 14 '16 at 06:23

An-droid · Accepted Answer · 2013-08-21T08:45:10.343

2

Exemple :

private Animation           _translateAnimation;
private ImageView       _image;

_image = (ImageView)findViewById(R.id.yourimage);

_translateAnimation = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, 100f, TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.ABSOLUTE, 0f);
_translateAnimation.setDuration(10000);
_translateAnimation.setRepeatCount(-1);
_translateAnimation.setRepeatMode(Animation.REVERSE);
_translateAnimation.setInterpolator(new LinearInterpolator());
_image.setAnimation(_translateAnimation);

This will make _linearLoading translate slowly right and left and right and left...

More duration = more slowly

TranslateAnimation.ABSOLUTE = Work with the position of the image TranslateAnimation.RELATIVE_TO_PARENT = Work with the parent layout ...

The method TranslateAnimation(start x, end x, start y, end y)

play with that

edited Aug 21 '13 at 08:45

answered Aug 21 '13 at 08:25

An-droid

6,433
9
48
93

Please check my question for updated code using TranslateAnimation that does not work... – user1137313 Aug 21 '13 at 08:37
_linearLoading should be what you want to translate, here it's your image. So you must get it with findviewbyid().. – An-droid Aug 21 '13 at 08:43
I think my mistake is that I animate the imageview... and it seems that the imageview crops the actual image to the visible size, because no matter where I do my translation, the white background appears instead of showing more of the source picture. What should I do in order to see the rest of the picture instead of background? – user1137313 Aug 21 '13 at 09:00
I use this code to translate a linearLayout with a background image in a loading screen and it works perfectly. Play with the "scaleType" if the image – An-droid Aug 21 '13 at 09:03
If I do it with linearLayout instead of ImageView, the app crashes. Can you put here the whole animation code that you use and that works for you? It does not work for me. It crashes. – user1137313 Aug 21 '13 at 09:16
Come on.. The whole code is here, and works perfectly. If you want to move an image you set the animation to the imageview corresponding, if you want to move a layout you set the animation on the layout.. There is nothing more to do. Of course you must get the view you want to move with findViewById before ! – An-droid Aug 21 '13 at 09:24
Al right... :) the issue was that I did not "find" the linearView before wanting to move it. Now it does not crash. But still I do not see the whole picture, I see the background instead. Please take a look at my layout (edited in my question, above)... prety please.... – user1137313 Aug 21 '13 at 09:32
For the image view use wrap_content for both height and width. For scaleType use CENTER (CENTER_CROP can works too), don't use layout_weight, and the marginTop="0dp" is useless. Then test it out – An-droid Aug 21 '13 at 09:38
I did that, as you can see in my updated question above... still the picture slides of the screen (as it should) but it's cropped, I see the white background filling the space where the picture used to be. And my goal is to see the rest of the image, not white background. Can you help me with this? – user1137313 Aug 21 '13 at 09:48
(using this i can make an image going out and in of the screen no problem) Did you tried the ScaleType CENTER_CROP ? – An-droid Aug 21 '13 at 09:50
Maybe I did not make myself understood. The image is 2000 px wide. In the screen it is only visible 480 px I think (unimportant right now). However, I want the picture to slide from left to right showing the rest of the picture... – user1137313 Aug 21 '13 at 11:25
understood, and with this method it should work ! it works np for me ^^ – An-droid Aug 21 '13 at 12:09
I will add an answer with what I have done eventually, but I will credit the points to Yume117 since his/her help got me there. Thanks @Yume117 – user1137313 Aug 21 '13 at 12:20

score 0 · Answer 3 · answered Aug 21 '13 at 08:24

What you could do is add the ImageView inside a ScrollView. Like this

<ScrollView
    android:id="@+id/img_scroll"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/IMAGENAME" />
</ScrollView>

As you want to scroll the Image automatically, you could create a AsyncTask and inside doInBackground() method, create a new Runnable or runOnUiThread() and send commands to the ScrollView using it's ID to scroll as you need it to.

Can you give me some hint code on how to send commands to the scrollview? — user1137313, Aug 21 '13 at 08:39

Android Autoscroll imageview

3 Answers3

Linked