Horizontal scroll image gallery

Question

I am trying to make a simple example of an image gallery using horizontalscrollview and dynamically adding images. I searched for examples, but most of them are too complicated. Is there a simple example of how to do this?

Answer 1

Here are some simple examples that implement a horizontal scroll view to look like a gallery of images

it 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> 

Java main 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 the HorizontalScrollView will not be deleted even not on the screen. So, if too many bitmaps are loaded, the java.lang.OutOfMemoryError error will be thrown!

Answer 2

You can create a div and set the overflow to hide, and then insert another inside it that has the height or width of all the images, it depends on your animation, which you want horizontally, go with the width time over the number of images and don't forget to include fields. Then you code the jQuery animation to run on a larger div that will move it left or right 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 him from there. your handler may click on another button or on the image ... preference again. It is very flexible, without much coding, this is not the best option to use. If this does not suit you, create an array of images and swipe through them, rather than using these specific sizes for scrolling. Good luck with that. I hope I helped you.