Search code examples
androidimageviewandroid-gridlayout

Android ImageViews in GridLayout rendering problem

I have a strange problem with GridLayout containing ImageViews.

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:columnCount="2"
    android:rowCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_row="1"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="2"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="1"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="2"
        android:layout_column="1"
        android:src="@drawable/test" />

</GridLayout>

This is what I would like to achieve:

Desired layout

However, the layout doesn't seem to scale at all and looks like this (depending on the size of screen):

Actual layout

What I have tried (and did not work):

  • Adding android:clipChildren="false" in GridLayout
  • Setting scaleType of ImageViews as fitXY, fitCenter and centerCrop
  • Setting layout_width and layout_height of ImageViews to wrap_content, match_parent and their permutations (however, I would expect the GridLayout to set size of its children automatically)

Could someone more experienced please tell me how to achieve my goal? :D Thank you!

PS: If there is any other layout which I could use to achieve the desired look, please let me know.

Solution

  • You need to specify layout_width / layout_height and also layout_columnWeight / layout_rowWeight for the child views. It is similar to weights in LinearLayout.

    Use it like this:

    <?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:columnCount="2"
    android:rowCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="1"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="2"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="1"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="2"
        android:layout_column="1"
        android:src="@drawable/test" />

</GridLayout>

    Btw I recommend you to use GridLayout from JetPack (AndroidX) as it has fixed some bugs and has better implementation overall for different Android versions - https://developer.android.com/jetpack/androidx/releases/gridlayout

    When using this AndroidX version, you would just replace android:* namespace of layout_rowWeight / columnWeight / layout_row / layout_column to app:* namespace.