I am having a problem showing RecyclerView
with StaggeredGridLayoutManager
whose item contain an imageview
and the image is loaded in imageview
using glide
.
The problem i am facing is that after images getting loaded they are not staggered and are of equal sizes as well there is a big gap between two columns. How to vary the height of images with no gaps in columns?
Asked
Active
Viewed 7,688 times
8
![](../../users/profiles/800716.webp)
Sam Judd
- 7,017
- 1
- 33
- 37
![](../../users/profiles/1149140.webp)
Passiondroid
- 1,505
- 1
- 16
- 27
-
If there's a big gap between the columns then you should also provide `scaleType` to your images, I would suggest you set either centerCrop or fitXY scaleType. – Apurva Mar 22 '16 at 08:21
-
giving any image + code of your work would be more understable – Sayem Mar 22 '16 at 09:17
-
You can have a look at this where u can use glide with [Glide/Picasso-RecyclerView-StaggeredGridLayoutManager](https://github.com/yuvaraj119/Picasso-RecyclerView-StaggeredGridLayoutManager) – YLS Apr 21 '16 at 03:02
5 Answers
10
I was having the same issue. What worked for me was to set android:adjustViewBounds="true"
for my ImageView. I'm not even setting scaleType.
Here's the full content of my layout file, item.xml.
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gif_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorFiller"
android:adjustViewBounds="true"/>
Hope this helps!
![](../../users/profiles/1910863.webp)
Don Shrout
- 514
- 5
- 15
6
Finally i am able to find out the soultion. I had to create the custom imageview to vary its aspect ratio in Staggered Recycler View.
public class DynamicHeightNetworkImageView extends ImageView {
private float mAspectRatio = 1.5f;
public DynamicHeightNetworkImageView(Context context) {
super(context);
}
public DynamicHeightNetworkImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DynamicHeightNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setAspectRatio(float aspectRatio) {
mAspectRatio = aspectRatio;
requestLayout();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measuredWidth = getMeasuredWidth();
setMeasuredDimension(measuredWidth, (int) (measuredWidth / mAspectRatio));
}
}
Then in onBindViewHolder of the adapter i set the aspect ratio of the image by -
Picasso.with(this).load(THUMB_URL).into(holder.thumbnailView);
holder.thumbnailView.setAspectRatio(ASPECT_RATIO));
![](../../users/profiles/1149140.webp)
Passiondroid
- 1,505
- 1
- 16
- 27
2
Add android:adjustViewBounds="true"
to the ImageView in the item layout and use CenterCrop
and FitCenter
in Glide like this:
Glide.with(vh.view.getContext())
.load(item.getUrl())
.centerCrop()
.fitCenter()
.thumbnail(0.3f)
.placeholder(R.drawable.img_placeholder)
.into(vh.image);
![](../../users/profiles/10563474.webp)
Alektas
- 316
- 2
- 6
0
First Intialize Your RecyclerView
RecyclerView recyclerGallery = (RecyclerView)findViewById(R.id.gallery_recycler_view);
gaggeredGridLayoutManager = new StaggeredGridLayoutManager(3, 1);
recyclerGallery.setLayoutManager(gaggeredGridLayoutManager);
galleryAdapter = new GalleryAdaptor(ProfImageGallery.this, imgsUrl);
recyclerGallery.setAdapter(galleryAdapter);
Then Your Adaptor ( Edit According to your Need)
public class GalleryAdaptor extends RecyclerView.Adapter<GalleryAdaptor.ViewHolder> {
private Context mContext;
private ArrayList<String> mDataset;
// Provide a suitable constructor (depends on the kind of dataset)
public GalleryAdaptor(Context mContext, ArrayList<String> mdataList) {
this.mContext = mContext;
this.mDataset = mdataList;
}
// Create new views (invoked by the layout manager)
@Override
public GalleryAdaptor.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// create a new view
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.row_gallery, parent, false);
// set the view's size, margins, paddings and layout parameters
ViewHolder vh = new ViewHolder(v);
return vh;
}
// Replace the contents of a view (invoked by the layout manager)
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
String imageUrl = mDataset.get(position);
holder.progressBar.setVisibility(View.VISIBLE);
//load the image url with a callback to a callback method/class
Picasso.with(mContext)
.load(imageUrl)
.into(holder.workImage,
new ImageLoadedCallback(holder.progressBar) {
@Override
public void onSuccess() {
if (holder.progressBar != null) {
holder.progressBar.setVisibility(View.GONE);
}
}
});
}
Replace Picaso Code i.e
Picasso.with(mContext)
.load(imageUrl)
.into(holder.workImage,
new ImageLoadedCallback(holder.progressBar) {
@Override
public void onSuccess() {
if (holder.progressBar != null) {
holder.progressBar.setVisibility(View.GONE);
}
}
});
With Glide.
Glide.with(this).load(imageUrl).into(imageView);
![](../../users/profiles/-1.webp)
Community
- 1
- 1
![](../../users/profiles/4530161.webp)
Navneet Sharma
- 89
- 8
0
For me it's working
Picasso.get()
.load(uploadCurrent.getImageUrl())
.placeholder(R.drawable.loading)
.config(Bitmap.Config.RGB_565)
.into(holder.imageView);
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/id_imgItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"/>
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/id_imgItemGets"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:gravity="center_horizontal"
android:textSize="18sp"/>
</RelativeLayout>
![](../../users/profiles/9950537.webp)
Victor Sam VS
- 51
- 1
- 4