java - Simple image gallery with HorizontalScrollView

Question

I'm writing an image gallery with horizontal scrolling. Images must be added programatically. I use a custom horizontal scroll view to process and add images as in the following code:

    public void setViewList(Integer linearLayoutId, Integer[] imageIdList,
                            Activity activity) {

    displayMetrics = ImageUtils.getDisplayMetric(activity);

    LinearLayout ll = (LinearLayout) findViewById(linearLayoutId);
    for (Integer imgId : imageIdList) {
        ImageView imageView = new ImageView(getContext());

        imageView.setImageResource(imgId);
        imageView.setScaleType(ImageView.ScaleType.MATRIX);

        Integer[] displayMetrics = ImageUtils.getDisplayMetric(activity);
        ImageUtils.scaleImage(imageView, displayMetrics[0], displayMetrics[1]);

        Integer[] dstDimension = ImageUtils.createDimension();
        ImageUtils.getImageSize(imageView, dstDimension);
        getImageSizeList().add(dstDimension);

        ll.addView(imageView);
    }

}

As you can see I scale an image with use the following method (call ImageUtils.scaleImage(imageView, displayMetrics[0], displayMetrics[1])):

    public static void scaleImage(ImageView imView, int screenWidth, int screenHeight) {
    Drawable temp = imView.getDrawable();

    Bitmap imBitmap = ((BitmapDrawable)temp).getBitmap();

    int imWidth = imBitmap.getWidth();
    int imHeight = imBitmap.getHeight();

    float xScale = ((float) screenWidth) / imWidth;
    float yScale = ((float) screenHeight) / imHeight;

    float scale = xScale <= yScale ? xScale : yScale;
    Matrix scaleMatrix = new Matrix();
    scaleMatrix.postScale(scale, scale);

    Bitmap scBitmap = Bitmap.createBitmap(imBitmap, 0, 0, imWidth, imHeight, scaleMatrix, true);

    BitmapDrawable scDrBitmap = new BitmapDrawable(imView.getResources(), scBitmap);
    imView.setImageDrawable(scDrBitmap);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
    );

    layoutParams.gravity = Gravity.CENTER;

    imView.setLayoutParams(layoutParams);
}

My main.xml layout is pretty simple:

<?xml version="1.0" encoding="utf-8"?>
<android.lessons.custom_horizontal_scroll.CustomHorizontalScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/horizontalScrollView"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    <LinearLayout android:orientation="horizontal"
                  android:id="@+id/mainLayout"
                  android:layout_gravity="center"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"/>
</android.lessons.custom_horizontal_scroll.CustomHorizontalScrollView>

Where the android.lessons.custom_horizontal_scroll.CustomHorizontalScrollView is implementation of a simple custom HorizontalScrollView.

For testing I use Samsung Galaxy S3 and images with the following resolution: (1) 1290*990 (2) 1221*900. What it looks like:

In many cases everything is displayed fine but from time to time I get the wrong result: the first image divides a screen with the following one at app start time and I don't have any idea why it happens.

Thanks for help.

Answer 1

I think you should use ViewPager from the support library v4 rather than this custom horizontal scroll view in this case. It's designed for that purpose.

Here is how to use it https://developer.android.com/training/animation/screen-slide.html.