3

I'm trying to layout some images using GridLayout, in uneven sizes (I'm trying to implement StaggeredGrid ), but when I'm placing the first image in the first cell it stretches all over the screen.

How do I prevent it from doing this ?

<?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:layout_width="match_parent"
   android:layout_height="match_parent"
   android:columnCount="4"
   android:rowCount="4"
   tools:context=".MainActivity" >

<ImageView
    android:layout_columnSpan="1"
    android:layout_rowSpan="2"
    android:src="@drawable/pic1" />

<ImageView
    android:layout_columnSpan="2"
    android:layout_rowSpan="1"
    android:src="@drawable/pic2" />

</GridLayout>

Thanks,

Shmulik

Shmulik Klein
  • 3,754
  • 19
  • 34

1 Answers1

0

Please use layout_column and layout_row to specify in which row and in which column of that row you want to place your ImageView.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="4"
    tools:context=".MainActivity" >

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

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

</GridLayout>

Also reading the doc I found that we can have control over the stretch using Gravity. It says,

Excess Space Distribution:

GridLayout's distribution of excess space is based on priority rather than weight. A child's ability to stretch is inferred from the alignment properties of its row and column groups (which are typically set by setting the gravity property of the child's layout parameters). If alignment was defined along a given axis then the component is taken as flexible in that direction. If no alignment was set, the component is instead assumed to be inflexible.

Multiple components in the same row or column group are considered to act in parallel. Such a group is flexible only if all of the components within it are flexible. Row and column groups that sit either side of a common boundary are instead considered to act in series. The composite group made of these two elements is flexible if one of its elements is flexible.

To make a column stretch, make sure all of the components inside it define a gravity. To prevent a column from stretching, ensure that one of the components in the column does not define a gravity.

AND

To place equal amounts of space around a component in a cell group; use CENTER alignment (or gravity). For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group. When using either of these techniques, bear in mind that cell groups may be defined to overlap.

Hassaan
  • 932
  • 8
  • 16
Atul O Holic
  • 6,692
  • 4
  • 39
  • 74
  • Thanks for your reply, but it still covers the whole screen. – Shmulik Klein Feb 22 '14 at 08:57
  • You will also have to specify the layout_width and layout_height for your ImageViews as wrap_content or the desired size. And do check the size of your Images. Make them small enough you need to appear – Atul O Holic Feb 22 '14 at 09:04
  • But then I'm losing the concept of using a grid... then why not just use RelativeLayout instead ? Is there a way I can split the screen into several pieces in different sizes and put in each piece an image so the ratio would be saved on different devices ? – Shmulik Klein Feb 22 '14 at 18:03
  • Can you confirm that your image is not very big enough to occupy the screen because using GridLayout we are only giving the rows and columns but dont put any restriction on it. SO if the image is very big it will spread to its size. – Atul O Holic Feb 22 '14 at 18:26
  • Please my edits. Also have a look at - http://stackoverflow.com/questions/10347846/how-to-use-the-gridlayout-to-fit-screen-size – Atul O Holic Feb 22 '14 at 18:49