GridLayout overflows the screen

Question

I have images in a Grid Layout. However the Grid Layout rows overflow the screen. I think the image widths are not the cause of problem. If I delete the images, the grid layout lines still overflow.

How can I solve this?

Code:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:id="@+id/myGridLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2"
    tools:context="com.example.orhan9.mdtransitionanimation.MainActivity">

    <ImageView
        android:id="@+id/papagan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="0"
        app:srcCompat="@drawable/papagan"
        />
    <ImageView
        android:id="@+id/goril"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="0"
        app:srcCompat="@drawable/goril" />

    <ImageView
        android:id="@+id/okuz"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="1"
        app:srcCompat="@drawable/okuz" />

    <ImageView
        android:id="@+id/ordek"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        app:srcCompat="@drawable/ordek" />

    <Button
        android:id="@+id/btnTransition"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="transition animation" />

</GridLayout>

Layout screen:

Use gridview instead of gridlayout, pass adapter with gridview, you can also take recyclerview to support latest api, check below link : https://www.journaldev.com/13792/android-gridlayoutmanager-example — Milan Hirpara, Mar 03 '18 at 10:40

score 0 · Answer 1 · answered Mar 03 '18 at 11:08

I might found couple of ways to help you out:

Try use a Linearlayout to warp your images, set its width & height and inside it put your images like suggested here (Their solution is with TextView but you can do the same with your Imageview).
Set your image size to be specific size (in dp).
Try to use android:layout_rowWeight and android:layout_columnWeight like here.

And here is a quick tutorial that might help you understand better the Grid Layout: Grid Layout by Example

score 0 · Answer 2 · answered Mar 03 '18 at 12:39

You can do this to avoid overflows the screen because in your case you have to declare height and width
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/myGridLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2">
<LinearLayout
    android:orientation="vertical">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <ImageView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_row="0"
            android:layout_weight="1"
            app:srcCompat="@drawable/ffff"
            android:scaleType="fitXY"/>
        <ImageView
            android:id="@+id/b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_weight="1"
            android:layout_row="0"
            app:srcCompat="@drawable/ffff"
            android:scaleType="fitXY"/>
    </LinearLayout>
    <LinearLayout

        android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <ImageView
            android:id="@+id/c"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_row="1"
            android:layout_weight="1"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/ffff"/>


        <ImageView
            android:id="@+id/d"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="1"
            android:layout_weight="1"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/ffff"/>

    </LinearLayout>
</LinearLayout>

GridLayout overflows the screen

2 Answers2