CODEWITHSUNDEEP
androidimagegalleryhorizontalscrollview
Fernandez6
Fernandez6

Reputation: 109

Image Gallery with a Horizontal Scrollview

I´m trying to do an easy example of an image gallery using horizontalscrollview and adding the images dynamically. I have searched examples but most are too complex. Is there a simple example of how to do it?

Upvotes: 7

Views: 33332

Answers (2)

farrukh
farrukh

Reputation: 627

Here is some simple example which has implemented horizontal scroll view to look like image gallery

this will help you

Add HorizontalScrollView in layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

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

</LinearLayout>

Main Java code:

package com.example.androidhorizontalscrollviewgallery;

import java.io.File;

import android.os.Bundle;
import android.os.Environment;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

 LinearLayout myGallery;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myGallery = (LinearLayout)findViewById(R.id.mygallery);

        String ExternalStorageDirectoryPath = Environment
          .getExternalStorageDirectory()
          .getAbsolutePath();

        String targetPath = ExternalStorageDirectoryPath + "/test/";

        Toast.makeText(getApplicationContext(), targetPath, Toast.LENGTH_LONG).show();
        File targetDirector = new File(targetPath);

        File[] files = targetDirector.listFiles();
        for (File file : files){
         myGallery.addView(insertPhoto(file.getAbsolutePath()));
        }    
    }

    View insertPhoto(String path){
     Bitmap bm = decodeSampledBitmapFromUri(path, 220, 220);

     LinearLayout layout = new LinearLayout(getApplicationContext());
     layout.setLayoutParams(new LayoutParams(250, 250));
     layout.setGravity(Gravity.CENTER);

     ImageView imageView = new ImageView(getApplicationContext());
     imageView.setLayoutParams(new LayoutParams(220, 220));
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
     imageView.setImageBitmap(bm);

     layout.addView(imageView);
     return layout;
    }

    public Bitmap decodeSampledBitmapFromUri(String path, int reqWidth, int reqHeight) {
     Bitmap bm = null;

     // First decode with inJustDecodeBounds=true to check dimensions
     final BitmapFactory.Options options = new BitmapFactory.Options();
     options.inJustDecodeBounds = true;
     BitmapFactory.decodeFile(path, options);

     // Calculate inSampleSize
     options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

     // Decode bitmap with inSampleSize set
     options.inJustDecodeBounds = false;
     bm = BitmapFactory.decodeFile(path, options); 

     return bm;  
    }

    public int calculateInSampleSize(

     BitmapFactory.Options options, int reqWidth, int reqHeight) {
     // Raw height and width of image
     final int height = options.outHeight;
     final int width = options.outWidth;
     int inSampleSize = 1;

     if (height > reqHeight || width > reqWidth) {
      if (width > height) {
       inSampleSize = Math.round((float)height / (float)reqHeight);   
      } else {
       inSampleSize = Math.round((float)width / (float)reqWidth);   
      }   
     }

     return inSampleSize;   
    }

}

Note: in this example, the bitmaps in HorizontalScrollView will not be removed even not in screen. So if too much bitmaps loaded, error of java.lang.OutOfMemoryError will be thrown!

Upvotes: 12

Delrog
Delrog

Reputation: 765

You could create a div and set the overflow to hidden then nest another inside it which has the heights or widths of all the images depends on your animation you want horizontal so go with the width times by the amount of images and remember to include the margins in this. You then code a jQuery animate to run on the larger div which will move it to the left or right again depending on your preference

eg $('pic').animate({left:'_____ <- enter width of single image together with margin here ' +'px','slow' <-- whatever speed you prefer);

and then play with it from there. your handler can be able to click on another button or on the image... preference again. It's very flexible without much coding , it's not the best option for use. If that doesn't suit you then create an array of images and loop through them rather than use those specific dimensions to scroll. Best of luck with this. Hope I have helped you out.

Upvotes: -7

Related Questions