Android: Image gallery with preview left and right and landscape and portrait images

Orion

I'm currently working on showing the user an image gallery in my activity. This image gallery has to show an image with a preview left and right. Also I have to be able to put in images that have a portrait or landscape orientation.

I've done some research on this and found three ways of doing this.

Option 1: Viewpager

The viewpager seems easy to implement and with the negative margin in the: viewpager.setPageMargin(int) method I can achieve the preview of the left and right images.

Issue

I can't seem to set the individual width of my views so that I don't have giant white spaces between my images when I have two portrait images next to each other in the ViewPager.

Option 2: HorizontalScrollView

Great component. Love the scrollbar at the bottom on my phone. Shows the user how many images are in the gallery when properly implemented.

Issue

I have to write the snapping logic myself. There are some examples out there which give me the snapping logic, but none have implemented anything with a preview of the previous and next image. Now I can invest quite some time into this, but that's not what I'm looking forward to doing.

Option 3: HorizontalPager

I like the simplicity of the view and that I can just push my ImageViews to this component, however how fast will this component stay when it has to handle more than a few ImageViews?

Issue

When adding padding between the ImageViews the HorizontalPager lags. The offset is also incorrect when using padding or margins.

The last two seem to use the MeasuredWidth's of the ImageViews and I wonder if they include the padding or margins. Either way, what seems to be the best solution to you guys and what could be modified the easiest?

Do you guys have any experience with this?

Thanks for the help.

Orion

I finally figured out how I wanted it. I finally succeeded in doing this while using a ViewPager:

GalleryAdapter:

public class GalleryAdapter extends PagerAdapter {

/**
 * The collection of images contained in the view pager.
 */
public Integer[] mImages;

private InternalDatabase dbhelper;
private RuntimeExceptionDao<GalleryImage, Integer> imagesDao;

/**
 * Constructor for the adapter. Initializes the images needed.
 */
public GalleryAdapter(Context context, Integer[] galleryImages) {

    dbhelper = OpenHelperManager.getHelper(context, InternalDatabase.class);
    imagesDao = dbhelper.getRuntimeExceptionDao(GalleryImage.class);

    // TODO: create the proper collection to be able to display the images in the collection.
    mImages = galleryImages;

}

@Override
public int getCount() {
    if (mImages != null) {
        if (mImages.length > 0) {
            return mImages.length;
        }
    }
    return 0;
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == ((ImageView) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

    // Get the context from which the adapter is created.
    // Need the context to create new views.
    Context context = container.getContext();

    // Create a new image view that will contain the image.
    ImageView imageView = new ImageView(context);

    LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    imageView.setLayoutParams(params);

    // Scaling the image inside the wrapping view pager.
    //imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

    // Setting the image.
    if (mImages != null) {

        if (mImages.length > 0) {

            Integer id = mImages[position];
            GalleryImage image = imagesDao.queryForId(id);

            Bitmap decodedByte = BitmapFactory.decodeByteArray(image.getImage(), 0, image.getImage().length); 
            imageView.setImageBitmap(decodedByte);

        }

    }

    // Add the image to the view pager.
    ((ViewPager) container).addView(imageView);
    return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((ImageView) object);
}
}

LinearLayout view:

public class CardMiniatureGallery extends AbstractCompoundLinearLayout {

/**
 * The viewpager that is used as a miniature gallery.
 */
public ViewPager mGallery;

private Integer[] mIDs;

public CardMiniatureGallery(Context context) {
    super(context);
}

public CardMiniatureGallery(Context context, Integer[] images) {
    super(context);
    mIDs = images;

    createLayout(context, mIDs);
}

public CardMiniatureGallery(Context context, AttributeSet attrs) {
    super(context, attrs);
    createLayout(context, mIDs);
}

public CardMiniatureGallery(Context context, AttributeSet attrs,
        int defStyle) {
    super(context, attrs, defStyle);
    createLayout(context, mIDs);
}

protected void createLayout(Context context) {

    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.card_miniature_gallery, this, true);

}

private void createLayout(Context context, Integer[] ids) {

    mGallery = (ViewPager) getChildAt(0);

    GalleryAdapter adapter = new GalleryAdapter(context, mIDs);
    mGallery.setAdapter(adapter);
    mGallery.setOffscreenPageLimit(adapter.getCount());
    mGallery.setClipToPadding(false);

    int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 43, getResources().getDisplayMetrics());
    mGallery.setPageMargin(margin);

}

}

Layout:

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:overScrollMode="never"
    android:paddingLeft="85dp"
    android:paddingRight="85dp"
    android:layout_marginBottom="@dimen/padding_medium" />

With these classes and an array of Integers which I use to fetch the data from the database, I can display the images as I want. Now I only have to figure out how to dynamically set the ViewPager height by looking at the images it has to load.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

AngularJS Bootstrap Gallery landscape and portrait images

From Dev

Convert Portrait to Landscape with Paperclip/Rails, and left-right padding to new image

From Dev

Why does the Image Picker in my Android app rotate automatically portrait images into landscape?

From Dev

Why does the Image Picker in my Android app rotate automatically portrait images into landscape?

From Dev

Recognize if image is landscape or portrait

From Dev

Universal Image Loader portrait/ landscape issue Android Studio

From Dev

Need help to show image from gallery only in portrait mode Android

From Dev

How to do Gallery Images swap Left To right bydefault

From Dev

Android Reusing layout in landscape and portrait

From Dev

Landscape and portrait mode in tablet Android

From Dev

Android Tablet Landscape and Portrait Modes

From Dev

Android: How to handle the event of Portrait to Reverse Portrait and Landscape to Reverse Landscape

From Dev

How to Load Multiple Images into android image gallery?

From Dev

How to Load Multiple Images into android image gallery?

From Dev

Will Instagram serve square thumbnails for portrait/landscape images?

From Dev

Shell script to separate and move landscape and portrait images

From Dev

Will Instagram serve square thumbnails for portrait/landscape images?

From Dev

Position landscape and portrait images with same height

From Java

Flutter - whitespaces displaying for image in portrait and landscape

From Dev

Auto Image Rotated from Portrait to Landscape

From Dev

Django: Is there a way to detect if uploaded image is landscape or portrait?

From Dev

making a wordpress slider display portrait and landscape image

From Dev

Image is in landscape instead of portrait mode after scaling

From Dev

JQuery test for landscape or portrait image in Shopify

From Dev

Zoomable fullscreen image in portrait and landscape mode

From Dev

How to check whether an image is captured in portrait mode or landscape mode using camera in android?

From Dev

Android: How to fill the screen with an image while maintaining aspect ratio and handle both landscape and portrait orientations

From Dev

Android splash screen for both landscape and portrait orientation

From Dev

rotate action android not only landscape or portrait

Related Related

  1. 1

    AngularJS Bootstrap Gallery landscape and portrait images

  2. 2

    Convert Portrait to Landscape with Paperclip/Rails, and left-right padding to new image

  3. 3

    Why does the Image Picker in my Android app rotate automatically portrait images into landscape?

  4. 4

    Why does the Image Picker in my Android app rotate automatically portrait images into landscape?

  5. 5

    Recognize if image is landscape or portrait

  6. 6

    Universal Image Loader portrait/ landscape issue Android Studio

  7. 7

    Need help to show image from gallery only in portrait mode Android

  8. 8

    How to do Gallery Images swap Left To right bydefault

  9. 9

    Android Reusing layout in landscape and portrait

  10. 10

    Landscape and portrait mode in tablet Android

  11. 11

    Android Tablet Landscape and Portrait Modes

  12. 12

    Android: How to handle the event of Portrait to Reverse Portrait and Landscape to Reverse Landscape

  13. 13

    How to Load Multiple Images into android image gallery?

  14. 14

    How to Load Multiple Images into android image gallery?

  15. 15

    Will Instagram serve square thumbnails for portrait/landscape images?

  16. 16

    Shell script to separate and move landscape and portrait images

  17. 17

    Will Instagram serve square thumbnails for portrait/landscape images?

  18. 18

    Position landscape and portrait images with same height

  19. 19

    Flutter - whitespaces displaying for image in portrait and landscape

  20. 20

    Auto Image Rotated from Portrait to Landscape

  21. 21

    Django: Is there a way to detect if uploaded image is landscape or portrait?

  22. 22

    making a wordpress slider display portrait and landscape image

  23. 23

    Image is in landscape instead of portrait mode after scaling

  24. 24

    JQuery test for landscape or portrait image in Shopify

  25. 25

    Zoomable fullscreen image in portrait and landscape mode

  26. 26

    How to check whether an image is captured in portrait mode or landscape mode using camera in android?

  27. 27

    Android: How to fill the screen with an image while maintaining aspect ratio and handle both landscape and portrait orientations

  28. 28

    Android splash screen for both landscape and portrait orientation

  29. 29

    rotate action android not only landscape or portrait

HotTag

Archive