1

I was trying to fetch remote images which I've an API and display it in a Masonry Grid (Pinterest Style).

At first I was using simple GridView it was working perfectly but without the Masonry style. Then, after various research I was finally using:

  1. Fresco to fetch Image & Cache
  2. RecyclerView with StaggeredGridLayoutManager to display the images from the API.
  3. Custom layout with SimpleDraweeView to display each item.
  4. My own custom Adapter "MasonryAdapter" to bind the data to the view.

In the Custom layout, I set SimpleDraweeView with:

layout_with = match_parent
layout_height = wrap_content

Then, in my adapter I've set the correct aspect ratio to each of the image, as in my API I can get the images' width & height easily.

holder.contentImage.aspectRatio = image.width.toFloat() / image.height.toFloat()

Though at first moment everything looked acceptable but after scrolling I found everything breaks apart. I'm very new to Android & Kotlin, please ask if you need anything. Here I'm attaching a GIF to what is happening.

Preview

If image removed please check it here: https://ibb.co/dy0EjH

Sagar
  • 23,903
  • 4
  • 62
  • 62
Sukanta Paul
  • 784
  • 3
  • 19
  • 36
  • 2
    I think you might be doing something wrong in how you are notifying the adapter of changed data. Can you add your `RecyclerView` and fetching image code? – Napster Apr 30 '18 at 00:36
  • Constraint layout breaks when being used in a recycler view. You can verify this easily with a simple very simple case. I filed an issue, which was fixed very quickly (can't find the link right now). This MIGHT be your problem. Try updating your constraint layout dependency. If that doesn't resolve the problem, you might have to use a different view group. – AutonomousApps Apr 30 '18 at 04:13

2 Answers2

0

I faced a similar problem, I was using textview inside Constraint layout.

Constraint layout breaks when used in a recycler view and what fixed my problem (as @AutonomousApps mentioned in the comments):

I just updated Constraint layout version ( to the latest stable version at the moment) from 1.0.1 to 1.1.1.

So if you are using Constraint layout just update to the latest stable version and this maybe will fix your problem!

(see below images for screenshots)

enter image description here

unexpected behaviour

enter image description here

after updated constraint layout version

Rofaeil Ashaiaa
  • 663
  • 5
  • 9
0

I was also facing the same issue with my Note taking app

Just simply make the height to 0dp

Cause when it's wrap_content, the staggered view has variable size of the list so at the end due to variable size the view stops at half (cause the recycler view calculated the size less than needed)

So using 0dp / match_parent makes the size of the recycler view constant, that's why we can scroll it through

krishnabh das
  • 1