How to make a collection of images with in a view in android studio using staggered layout (Or any other suggestion)

Question

I need to show the collection of image in a collection view of images in android. https://i.sstatic.net/mdZzI.png

Used recycler view not helped

• For 2 images the view is in equal two half
• For three image one view is half of the view and another half splits into two halfs and so on

Questions:

1. Shall I need to add a separate XML file for viewing one image, two images upto 5 images images in a same grid with a particular height.

• For viewing one image, xml will have a greater width and height ==> span is 1
• For two image width and height will differ and need to show as equal half ==> span is 2
• For three images ==> one image needs to shown in half of the view and another two in other half ==> Here how the span count will be set for my grid
• for 4 images ==> span is two
• for 5 images ==> what is the span here?

2. If 1 is not a best practice, how can I add the styles while showing the images in the view and set span count dynamically.

3. I have added recycler view with a staggered layout. But If the image exceeds it scrolls. How can I restrict the scrolling if I set the layout only in a certain width and height?

Updation:

Now removed recycler view and used PercentRelativeLayout to show the above image.

Here layout are possible. But I have a detail screen to show the image in next screen with swiping. It not works because of the image is given in Imageview and need to onClick the each image to see all.

Because I have given the image in string. My ShowDetailImage is my swiping optionable class. It works well for others which are in listItems.

But the image in this fragment is shown as AppCompatImageView makes the onclick for a single element.

Can i set the all list of images in that. while click image0 it needs to show all the images without clicking each one in case the image is > 1

Need to click and see each image

For code refer

 protected View onInheritorCreateView(@NonNull LayoutInflater inflater,
                                         @Nullable ViewGroup container, @Nullable Bundle b) {
        int value = mAdapter.getCount();
        if (value ==1) {
            return inflater.inflate(R.layout.one_image, container,false);
        } else if (value == 2) {
            return inflater.inflate(R.layout.grid_two_image, container,false);
        } else if (value == 3) {
            return inflater.inflate(R.layout.three_images, container,false);
        } else if (value == 4) {
            return inflater.inflate(R.layout.grid_four_image, container,false);
        } else if (value == 5) {
            return inflater.inflate(R.layout.grid_five_images, container,false);
        } else {
            return inflater.inflate(R.layout.five_plus, container, false);
        }
    }


 public void onViewCreated(final View v, @Nullable Bundle b) {
        super.onViewCreated(v, b);
        int value1 =  mAdapter.getCount();
        if(value1 == 1) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0);
        } else if (value1 == 2) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1);
        } else if (value1 == 3) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1, R.id.image2);
        } else if (value1 == 4 ) {
                Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1, R.id.image2,  R.id.image3);
        } else {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image1, R.id.image2, R.id.image3, R.id.image4, R.id.image0);
        }
}



 private final View.OnClickListener mOnClickListener = new View.OnClickListener() {
      
        @Override
        public void onClick(View view) {
           
            switch (view.getId()) {
                case R.id.image0;
                final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
        case R.id.image1;
        final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
      case R.id.image2;
        final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
      case R.id.image3;
       final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
     default 
      break;

I use RecyclerView? Refer here But it did not help for me in 3 and 5 images.

Ruder

i think you should use StaggeredGridLayoutManager on your recyclerview's layout manager, here : #33316793 – Triune

But the recycler view will give all the items in the view with scrolling. I think. Can I able to achieve the view that will show with a count above the image using this? – Ruder

A RecyclerView will do the general gridding, but for the indivitual view, you will have to make something custom to do the logic of spliting the height and width between the views inside the item. – Modulus

@AhmadSattout So using recyclerview it can be possible. Did you have any sample code for this? – Ruder

I don't, but it's doable with some tweaking. Can't Studio right now sadly, but if you don't know how to customize a view group, then I think you should research more to achieve this layout – Modulus

@AhmadSattout Thanks for your reply. Can you explain about my clarification. Here for one image, it is a single image and for two images it splits into two. So here can I able to set the StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL). Then for three I need one half portion and another half split to two StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL). Can you help me here with your thoughts? – Ruder

How can I restrict the scrolling in recycler view if the image count is greater than 5. For 3 and 5 images, how can i give the span count and how the other half will be shown in UI? – Ruder

I think Managing Different layouts for different count would be easy as you have to manage only 5 cases – Melodic

Can you let me know If I have more than 5 how can I restrict the scrolling in recyclerview – Ruder

Hey @sejn, I assume you need a thumbnail preview for the album (just like the image you posted) so the simple approach I can suggest is to consider a separate adapter cell for some of them, If you're looking for a dynamic solution StaggeredGridLayoutManager is a better choice. – Tripartite

I have used staggeredGridLayoutManager. But for 3 images it not comes as expected. @FarshadTahmasbi Did you have any calculations for this in adapter. I have used a recyclerview and adapter. Inside the adapter it has separate xmls to show one, two images and so on. – Ruder

Hello suppose you have 10 images how you want to show them ? are you going to set span to 2 and make 5 rows? – Longfellow

no 10 means only 5 images with +count. refer my image in my question – Ruder

Answer 1

As an alternative to StaggeredGridLayoutManager, it is possible to use PercentRelativeLayout (even though it is deprecated). For example, for the 5-image row the layout would be:

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_blue_light">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="50%"
        app:layout_aspectRatio="100%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="50%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="75%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="50%"
        android:layout_below="@id/image1"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="75%"
        android:layout_below="@id/image2"/>

</androidx.percentlayout.widget.PercentRelativeLayout>

See full example here

Verso

In my case I need to show the same view for 1 or 2 images or 3 images and upto 5 image. But the above sample has each id for each one. I not need a static one. The resulting payload will have one or 2 or 3 or 5 and above. But I need to mimic in a window for all the conditions. Above works only upto 5, If I got 6 and above it not works. – Ruder

Is this good to map first five images to 5 ids. If so shall I need to repeat the above same for 1 to four images? – Ruder

This approach doesn't work 6 or more images. But for the first 5 images you can use the same id: image1, image2, ... , image5 for all layout files. In this case, the first imageView will always be view.findViewById<ImageView>(R.id.image1). – Verso

So I need to use the same id for different xml file (i.e) For 1 image image1. – Ruder

Thanks for your reply, Did you know how the width and height will be set for the same using a staggered layout using recycler view? Also If I set the above as per your thought I need to map each image for each Id. I am i right? – Ruder

l don't think this can be done using StaggeredGridLayoutManager. For example, in case of 3 images, the largest one has 66.7% of the screen width, and the smaller images have 33.3% width. This would require fractional spans. – Verso

Thanks for your reply. Implemented your sample, UI works but i need clarification while Onclick needs to show all images in that particular feed with scrollable. But how can I make this. Because the example has single image id and if click on one image it will show the image which the user clicks on the next screen. But in the same way it needs to show other images also. For ex: I have 3 images in the post means while clicking one image I need all the images in the next screen. – Ruder

I can click one and able to see. For another one I need to go back and click on the next image to see in the detail screen. Any thoughts for this? – Ruder

updated my question. Did u have any suggestion regarding my changes – Ruder

Here for more than one images, I am facing the scrolling of images with adding of layout. (i.e) for one it shows one image, for two it shows four images (means two + two in the next line like a list). It adding the items in the list same as the above layout. – Ruder