I'm developing an app that will display images on RecyclerView by means of Firebase-UI RecyclerView
The problem is that when I use StaggeredGridLayoutManager in my RecyclerView there appears very long vertical gaps between horizontal items row.
This is my whole Fragment code that I use...
public class Home extends Fragment {
private static final String TAG = "Blalba";
private static RecyclerView mGridView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.home, container, false);
mGridView = (RecyclerView) view.findViewById(R.id.grid_view);
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
mGridView.setLayoutManager(staggeredGridLayoutManager);
SpacesItemDecoration decoration = new SpacesItemDecoration(16);
mGridView.addItemDecoration(decoration);
setUpFirebaseImagesAdapter();
return view;
}
public static void setUpFirebaseImagesAdapter() {
DatabaseReference mImagesReference = FirebaseDatabase.getInstance().getReference().child("Images");
FirebaseRecyclerAdapter mFirebasePostsAdapter = new FirebaseRecyclerAdapter<ImageAttribute, FirebaseImagesViewHolder>
(ImageAttribute.class, R.layout.home_list_item, FirebaseImagesViewHolder.class, mImagesReference) {
@Override
protected void populateViewHolder(FirebaseImagesViewHolder viewHolder, ImageAttribute model, int position) {
Log.v("TAGTAG", "Is Scrolling");
viewHolder.bindPost(model);
}
};
mGridView.setAdapter(mFirebasePostsAdapter);
}
public static class FirebaseImagesViewHolder extends RecyclerView.ViewHolder {
View mView;
Context mContext;
public FirebaseImagesViewHolder(View itemView) {
super(itemView);
mView = itemView;
mContext = itemView.getContext();
}
public void bindPost(final ImageAttribute postAttributes) {
ImageView PostImageView = (ImageView) mView.findViewById(R.id.image_view);
Picasso.with(mContext)
.load(postAttributes.getImage_link())
.into(PostImageView);
}
}
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
private final int mSpace;
public SpacesItemDecoration(int space) {
this.mSpace = space;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.left = mSpace;
outRect.right = mSpace;
outRect.bottom = mSpace;
// Add top margin only for the first item to avoid double space between items
if (parent.getChildAdapterPosition(view) == 0)
outRect.top = mSpace;
}
}
}
My xml layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_search_white_24dp"
android:drawablePadding="5dp"
android:drawableTint="@color/colorPrimary"
android:padding="13dp"
android:text="Search"
android:textColor="@color/colorPrimary"
android:textSize="16sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:column_count="3"
app:item_margin="1dp" />
</LinearLayout>
And finally my recyclerView item:
<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
