Make a Recyclerview of 9 items with GridLayoutManager fit the screen

user_6687699 0
Viewed 681

I have a Grid that was generated by a RecyclerView and GridLayoutManager , so in my case I will always have only 9 items on the Grid, so I want them to fill the entire screen. Below is how they look on my screen:

enter image description here

This is the activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>

then, the single_item.xml is :

<?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="120dp"
    android:padding="1dp"
    >
    <ImageView
        android:id="@+id/image_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
         />
</RelativeLayout>

How I attached the Gridlayoutmanager :

        rv = findViewById(R.id.rv);        
        ImageAdapter imageAdapter = new ImageAdapter(allBitmaps, MainActivity.this);
        mLayoutManager = new GridLayoutManager(MainActivity.this, 3);
        rv.setLayoutManager(mLayoutManager);
        rv.setAdapter(imageAdapter);

So I want the grids to fit well the entire screen, how best can this be done ?

android-recyclerview android-adapter bitmap android java
2 Answers

Here is the scenario:

  • Measure the width & height of the RecycerView before attaching the adapter to it:
  • Get the desired RecyclerView item width & height by dividing the width & height of the previous step by 3; as you have 3 items horizontally and vertically.
  • Pass the item width & height to the RecyclerView adapter as parameters and store them as fields.

In activity onCreate():

recyclerView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    @Override
    public boolean onPreDraw() {
        if (recyclerView.getViewTreeObserver().isAlive())
            recyclerView.getViewTreeObserver().removeOnPreDrawListener(this);

        float width = (float) recyclerView.getWidth() / 3;
        float height = (float) recyclerView.getHeight() / 3;
        ImageAdapter adapter = new ImageAdapter(context, width, height, allBitmaps);
        recyclerView.setAdapter(adapter);

        return true;
    }
});
  • Set the ImageView width & height in the ViewHolder:
class ViewHolder extends RecyclerView.ViewHolder {

    ImageView image;

    public ViewHolder(@NonNull View itemView) {
        super(itemView);
        image = itemView.findViewById(R.id.image);

        image.getLayoutParams().width = (int) itemWidth;
        image.getLayoutParams().height = (int) itemHeight;
    }
}

I tested this with just an ImageView as a list item layout:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY" />

Portrait preview:

enter image description here

Landscape preview:

enter image description here

user_98516080

I think if you want those images to fill up the screen, you need to modify the width and height of the image inside your single item.xml

user_128525200
Related