I've got a list of URLs which point to images that have different dimensions. I want to show them in a staggered vertical grid, stretching the width of each image to occupy a single row and stretching the height to wrap around the scaled image. Everything should look something like this:
http://www.technotalkative.com/wp-content/uploads/2014/04/staggered-gridview-in-android.png
I'm using RecycleView and StaggeredGridLayoutManager. Unfortunately I can't get it to work well.
This is class of the item I want to show:
public class Photo {
public String title;
public String url;
public Photo(String title, String url) {
this.title = title;
this.url = url;
}
}
Corresponding XML for the item:
<?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:margin="5dp">
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/imageview"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@color/transparant_white"
android:gravity="center_horizontal"
android:textSize="18sp"/>
</RelativeLayout>
The adapter:
public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {
private final static String TAG = PhotoAdapter.class.getSimpleName();
private Context mContext;
private List<Photo> mPhotos;
public PhotoAdapter(Context context, List<Photo> photos) {
super();
mContext = context;
mPhotos = photos;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_photo, viewGroup, false);
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
Photo photo = mPhotos.get(i);
Picasso.with(mContext).load(photo.url).into(viewHolder.imageView);
viewHolder.textView.setText(photo.title);
}
@Override
public int getItemCount() {
return mPhotos.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
ImageView imageView;
TextView textView;
public ViewHolder(View itemView) {
super(itemView);
imageView = (ImageView) itemView.findViewById(R.id.imageview);
textView = (TextView) itemView.findViewById(R.id.textview);
}
}
}
And the fragment where everything gets called:
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
PhotoAdapter photoAdapter = new PhotoAdapter(getActivity(), createItems());
StaggeredGridLayoutManager staggeredGridLayoutManager
= new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
recyclerView.setAdapter(photoAdapter);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
return rootView;
}
First few images appears fine, but when I'm scrolling down all images starts to shows up in single column. Then when I scroll on absolute top of list, everything puts together and images shows in two columns, until I scroll down to images that I didn't download yet. Problem is I don't know size of each image before I download them, so I can't set size of each item in advance.
Hopefully someone has encountered and solved this before or simply knows more about this than me and can help me getting it to work.
I also tried Staggered GridView by Etsy whit similar and even worse results.
