Lorenzo
Lorenzo

Reputation: 32

How to center ImageView in GridLayout?

I have a full screen grid layout with 8 rows of 7 ImageView. I need all the rows centered without spaces between them (now I have as result the image I uploaded). The space must be only on the top and on the bottom. I already tried to find a solution on the Internet but I haven't found one.

XML:

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

    <GridLayout
        android:id="@+id/gameGrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:rowCount="8"
        android:columnCount="7"
        >
        <!-- ROW 1-1 -->
        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/cellR1-1"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            app:srcCompat="@drawable/dl"
            />
        <!-- ROW 1-2 -->
        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/cellR1-2"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            app:srcCompat="@drawable/dl"
            />
        <!-- ROW ... -->
    </GridLayout>
</RelativeLayout>

I tried as solution to set all the ImageViews height same as the width but my code didn't worked:

void setGrid(){
    //setting the cell height as the cell widht
    int imagWidth = cell[0][0].getLayoutParams().width;
    for(int r=0;r<rowCount;r++)
        for(int c=0;c<columnCount;c++) {
            cell[r][c].getLayoutParams().height = imagWidth;
            cell[r][c].requestLayout();
        }
}

Image:
Image

Upvotes: 0

Views: 441

Answers (2)

Masoud Mokhtari
Masoud Mokhtari

Reputation: 2474

Try using RecyclerView with GridLayoutManager like below:

GridLayoutManager layoutManager = new GridLayoutManager(getContext(), 7);
            YourAdapter adapter = new YourAdapter();
            recyclerView.setLayoutManager(layoutManager);
            recyclerView.setAdapter(adapter);

            int spacing = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16,
                    Objects.requireNonNull(getContext()).getResources().getDisplayMetrics());
            recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
                @Override
                public void getItemOffsets(@NotNull Rect outRect, @NotNull View view, @NotNull RecyclerView parent, @NotNull RecyclerView.State state) {

                    if (parent.getChildAdapterPosition(view) == Objects.requireNonNull(parent.getAdapter()).getItemCount() - 1) {
                        outRect.bottom = spacing;
                    }
                    if (parent.getChildAdapterPosition(view) == 0) {
                        outRect.top = spacing;
                    }
                }
            });

Other solution is: Instead of adding padding to both the top and bottom items, You can just add the padding to the top and bottom of your RecyclerView and set the clipToPadding attribute to false.

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingTop="8dp"
    android:paddingBottom="8dp" />

Upvotes: 0

Kinjal
Kinjal

Reputation: 142

It might be helpful to you, use the RecyclerView instead of GridLayout

RecyclerView.LayoutManager recyclerViewLayoutManager = new GridLayoutManager(getApplicationContext(), 7); // 7 means how many column you want you can change according to your requirement.
recyclerView.setLayoutManager(recyclerViewLayoutManager);

Upvotes: 1

Related Questions