1

I have 12 images which I wish to display in a grid of 4 rows by 3 columns. For this purpose I am using a GridLayout. The images are of different sizes and I wish for them to be scaled so each fill a cell, something like weight in Linear Layout. I've played with the ImageViews scaleType and adjustViewBounds properties but have only succeeded by manually setting layout_width and layout_height. Is this possible or should I adjust the sizes in advance? Is there a better way of achieving my goal with a different layout?

I am working with Android Studio 1.1.0, API 21.

Thank you!

activity_set_background.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ImagesGridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:rowCount="4"
tools:context=".SetBackgroundActivity">


<ImageView
    android:id="@+id/background1"
    android:layout_gravity="start|top"
    android:scaleType="centerInside"
    android:adjustViewBounds="true"
    android:layout_rowSpan="1"
    android:layout_columnSpan="1"
    android:src="@drawable/bg1"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="0"
    android:layout_column="0" />

<ImageView
    android:id="@+id/background2"
    android:layout_gravity="left|top"
    android:src="@drawable/bg2"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="0"
    android:layout_column="1" />

<ImageView
    android:id="@+id/background3"
    android:layout_gravity="left|top"
    android:src="@drawable/bg3"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="0"
    android:layout_column="2" />

<ImageView
    android:id="@+id/background4"
    android:layout_gravity="left|top"
    android:src="@drawable/bg4"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="1"
    android:layout_column="0" />

<ImageView
    android:id="@+id/background5"
    android:layout_gravity="left|top"
    android:src="@drawable/bg5"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="1"
    android:layout_column="1" />

<ImageView
    android:id="@+id/background6"
    android:layout_gravity="left|top"
    android:src="@drawable/bg6"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="1"
    android:layout_column="2" />

<ImageView
    android:id="@+id/background7"
    android:layout_gravity="start|top"
    android:scaleType="centerInside"
    android:adjustViewBounds="true"
    android:layout_rowSpan="1"
    android:layout_columnSpan="1"
    android:src="@drawable/bg7"
    android:layout_row="2"
    android:layout_column="0"
    android:layout_width="124dp"
    android:layout_height="123dp" />

<ImageView
    android:id="@+id/background8"
    android:layout_gravity="left|top"
    android:src="@drawable/bg8"
    android:layout_width="131dp"
    android:layout_height="108dp"
    android:layout_row="2"
    android:layout_column="1" />

<ImageView
    android:id="@+id/background9"
    android:layout_gravity="left|top"
    android:src="@drawable/bg9"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="2"
    android:layout_column="2" />

<ImageView
    android:id="@+id/background10"
    android:layout_gravity="left|top"
    android:src="@drawable/bg10"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="3"
    android:layout_column="0" />

<ImageView
    android:id="@+id/background11"
    android:layout_gravity="left|top"
    android:src="@drawable/bg11"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="3"
    android:layout_column="1" />

<ImageView
    android:id="@+id/background12"
    android:layout_gravity="left|top"
    android:src="@drawable/bg12"
    android:layout_width="118dp"
    android:layout_height="97dp"
    android:layout_row="3"
    android:layout_column="2" />

jww
  • 97,681
  • 90
  • 411
  • 885
Digital Da
  • 891
  • 1
  • 10
  • 23
  • did you look at this documentation, it shows you how to set the width and height by implementing an ImageAdapter http://developer.android.com/guide/topics/ui/layout/gridview.html – faljbour Mar 27 '15 at 04:51

2 Answers2

0

See https://stackoverflow.com/a/14881357/2680254 .

public class SquareImageView extends ImageView
{ 

public SquareImageView(final Context context)
{ 
    super(context);
} 

public SquareImageView(final Context context, final AttributeSet attrs)
{ 
    super(context, attrs);
} 

public SquareImageView(final Context context, final AttributeSet attrs, final int defStyle)
{ 
    super(context, attrs, defStyle);
} 


@Override 
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec)
{ 
    final int width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
    setMeasuredDimension(width, width);
} 

@Override 
protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh)
{ 
    super.onSizeChanged(w, w, oldw, oldh);
} 

}

Community
  • 1
  • 1
Gilberto Ibarra
  • 2,849
  • 2
  • 27
  • 38
0

As per My idea, You Can Use Relative and Linear Layout For display Imageview and set its mergin or padding with diffrent style from values folder for supported size of devices,set below code with imageview

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
    android:id="@+id/first"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="3" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"

        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
</LinearLayout>
<LinearLayout
    android:id="@+id/second"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/first"
    android:weightSum="3" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
</LinearLayout>
<LinearLayout
    android:id="@+id/third"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/second"
    android:weightSum="3" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
</LinearLayout>
<LinearLayout
    android:id="@+id/fourth"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/third"
    android:weightSum="3" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher"
        android:scaleType="centerInside"
        android:text="1" />
</LinearLayout>

Alka Jadav
  • 115
  • 2
  • 13