Friday 20 November 2020

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

I need to show the collection of image in a collection view of images in android. https://i.stack.imgur.com/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?
  1. 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.

  2. 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.



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

No comments:

Post a Comment