Search code examples
androidimageviewscaleandroid-gridlayout

gridlayout: centering image in imageview

i want that the image fits in the imageview at the gridlayout. When i dont give a source to the imageview the layout is correct. But when i put the source there the width and height of the imageview is wrong. Can somebody help me to solve the problem? I this for a game.

Correct Layout without src Correct without src

XML without src

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.ktappworks.test.MainActivity">

    <GridLayout
        android:id="@+id/ph0"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_marginTop="0dp"
        android:clipChildren="false"
        android:columnCount="5"
        android:rowCount="2"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <ImageView
            android:id="@+id/ph00"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph01"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph02"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph03"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph04"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph06"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph07"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph08"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

        <ImageView
            android:id="@+id/ph09"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
             />

    </GridLayout>

</android.support.constraint.ConstraintLayout>

Incorrect layout with src Incorrect with src

XML with src

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.ktappworks.test.MainActivity">

    <GridLayout
        android:id="@+id/ph0"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_marginTop="0dp"
        android:clipChildren="false"
        android:columnCount="5"
        android:rowCount="2"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <ImageView
            android:id="@+id/ph00"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph01"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph02"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph03"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph04"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph06"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph07"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph08"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

        <ImageView
            android:id="@+id/ph09"
            android:layout_columnWeight="1"
            android:layout_margin="2dp"
            android:layout_rowWeight="1"
            android:scaleType="fitXY"
            android:src="@drawable/owl" />

    </GridLayout>

</android.support.constraint.ConstraintLayout>

Owl Image Owl Image

Solution

  • You need to define the width and height of each ImageView as 0dp for the column/row weights to take effect. I think the default is wrap_content. You may also want to change the scaleType to something other than fitXY since fitXY will distort the images.

    I have also run into an issue with the native implementation of GridLayout when using the weights for certain API levels. (I answered such a question recently and I will post a reference to it here if I can find it.) You may want to think about using the support library version of GridLayout since it seems to have a working implementation of weights. Add the following to your gradle file for this version of GridLayout:

        compile 'com.android.support:gridlayout-v7:26.1.0'

    Here is a screen shot after making these changes:

    enter image description here