How to do marquee of images in Android?

Question

I am new to Android programming, now I am trying to place images inside the horizontal scrollview.

Actually what I am trying to do is, I want to display array of images which needs to be scrolling automatically from right to left.

So far I have tried as below

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView 
        android:id="@+id/image2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/icon"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="5px"/>
</LinearLayout>
</HorizontalScroll>

Activity file-

package com.myhorizontalScroll;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ImageView;

public class MyHorizontalScrollActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // declare a class field:
            final Handler h = new Handler();

            // later:
            final ImageView scroll=(ImageView)findViewById(R.id.image2);
            Thread t = new Thread(){
                public void run(){
                    int y = scroll.getScrollY();
                    int x = scroll.getScrollX();

                    while(y<1600){
                        // need final values to create anonymous inner class
                        final int X = x;
                        final int Y = y;
                        h.post(new Runnable() {
                            public void run() {
                                scroll.scrollTo(X, Y);
                            }
                        });
                        x++;
                        try {
                            sleep(1000/12);
                        } catch (InterruptedException e) {
                        }
                    }
                }
            };
            t.start();
    }
}

Now the imageview goes from left to left; the imageview actually positioned in the left side.

How to place the imageview in right side and I want this scrolling needs to done continuously.

How can I proceed with that?

Answer 1

This is how I do it in one of my apps. This is essentially used to display the Profile Pictures of User's who like a post. You will naturally have to figure out a bit for yourself, but I will try and help where I can.

First, the XML:

<LinearLayout
    android:id="@+id/linlaLikesStrip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="gone" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:text="LIKES BY:"
        android:textColor="#888888"
        android:textSize="14sp"
        android:textStyle="bold" >
    </TextView>

    <HorizontalScrollView
        android:id="@+id/horscoLikes"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:overScrollMode="never"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/linlaLikes"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

In my Java code, I declare and cast them globally, so you will have to do a little figuring out.

The JAVA Code:

linlaLikes.removeAllViews();

for (int i = 0; i < arrLikes.size(); i++) {

    final getLikes newLikes = arrLikes.get(i);

    ImageView imgUsers = new ImageView(FeedDetails.this);

    // SET THE IMAGEVIEW DIMENSIONS
    int dimens = 45;
    float density = getResources().getDisplayMetrics().density;
    int finalDimens = (int)(dimens * density);

    LinearLayout.LayoutParams imgvwDimens = new LinearLayout.LayoutParams(finalDimens, finalDimens);
    imgUsers.setLayoutParams(imgvwDimens);

    // SET SCALETYPE
    imgUsers.setScaleType(ScaleType.CENTER_CROP);

    // SET THE MARGIN
    int dimensMargin = 4;
    float densityMargin = getResources().getDisplayMetrics().density;
    int finalDimensMargin = (int)(dimensMargin * densityMargin);

    LinearLayout.LayoutParams imgvwMargin = new LinearLayout.LayoutParams(finalDimens, finalDimens);
    imgvwMargin.setMargins(finalDimensMargin, finalDimensMargin, finalDimensMargin, finalDimensMargin);

    // SET PADDING
//              imgUsers.setPadding(finalDimensMargin, finalDimensMargin, finalDimensMargin, finalDimensMargin);

    // DISPLAY THE IMAGES USING THE PROFILELOADER CLASS
    proLoader.DisplayImage(newLikes.getUserProfilePicture(), imgUsers);

    // ADD THE NEW IMAGEVIEW WITH THE PROFILE PICTURE LOADED TO THE LINEARLAYOUT
    linlaLikes.addView(imgUsers, imgvwMargin);

    imgUsers.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            Intent showProfile = new Intent(getApplicationContext(), WallPost.class);
            showProfile.putExtra("USER_ID", newLikes.getUserID());
            showProfile.putExtra("USER_PROFILE", "USER_PROFILE");
            startActivity(showProfile);
        }
    });
}

A little explanation:

1. arrLikes is an ArrayList that holds the Profile Picture's. I use arrLikes.size() in the for loop to get the correct number.
2. Instead of hard-coding ImageViews (obviously, because the number needed is unknown) in the XML, I dynamically create the necessary number at run-time.
3. Then follows a lot of stuff for setting up the size of the ImageViews and then setting the Margin between them.
4. And finally, I am using @Fedor's Lazy Loading to display the Profile Pictures in the newly created ImageViews.

Hope this helps. And feel free to ask if you have any difficulties with any of the above.