Grid Layout Add Evenly Spaced Images

Question

I am trying to fit a specified amount of images in a Grid Layout programmatically and I want them all to be evenly sized and spread out. Whenever I try to add multiple images the grid layout only shows one. What am I doing wrong?

XML:

<GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6"
        android:gravity="center"/>

Java:

//reset data and grid
    data.clear();
    gridLayout.removeAllViews();

    Random random = new Random();
    for(int i = 0; i < num; i++){
        data.add(String.format("%." + 0 + "f", random.nextDouble() * (6 - 1) + 1));
        ImageView imageView = new ImageView(getContext());
        switch (data.get(i)) {
            case "1":
                imageView.setImageResource(R.drawable.dice1);
                break;
            case "2":
                imageView.setImageResource(R.drawable.dice2);
                break;
            case "3":
                imageView.setImageResource(R.drawable.dice3);
                break;
            case "4":
                imageView.setImageResource(R.drawable.dice4);
                break;
            case "5":
                imageView.setImageResource(R.drawable.dice5);
                break;
            default:
                imageView.setImageResource(R.drawable.dice6);
                break;
        }
        gridLayout.addView(imageView, i);
    }

What shows up:

What I want:

G Singh · Accepted Answer · 2017-07-05T19:36:52.023

[![Screenshot][1]][1]

package com.plumtestongo.sample;

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.ViewTreeObserver;
import android.widget.GridLayout;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.Random;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        final GridLayout layout = (GridLayout) findViewById(R.id.gridlayout);
        ViewTreeObserver vto = layout.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    layout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                int width = layout.getMeasuredWidth();
                int height = layout.getMeasuredHeight();
                setViews(height, width);

            }
        });
    }


    private void setViews(int layoutHeight, int layoutWidth) {

        int width = layoutWidth / 3;
        int height = layoutHeight / 2;
        Log.i(getClass().getName(), "Image height" + height + " Width:" + width);
        ArrayList<String> data = new ArrayList<>();
        data.clear();
        GridLayout gridLayout = (GridLayout) findViewById(R.id.gridlayout);
        gridLayout.removeAllViews();
        Random random = new Random();
        int num = 6;
        for (int i = 0; i < num; i++) {
            data.add(String.format("%." + 0 + "f", random.nextDouble() * (6 - 1) + 1));
            ImageView imageView = new ImageView(this);
            GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
            layoutParams.width = width;
            layoutParams.height = height;
            imageView.setLayoutParams(layoutParams);
            switch (data.get(i)) {
                case "1":
                    imageView.setImageResource(R.drawable.dice2);
                    break;
                case "2":
                    imageView.setImageResource(R.drawable.dice2);
                    break;
                case "3":
                    imageView.setImageResource(R.drawable.dice2);
                    break;
                case "4":
                    imageView.setImageResource(R.drawable.dice2);
                    break;
                case "5":
                    imageView.setImageResource(R.drawable.dice2);
                    break;
                default:
                    imageView.setImageResource(R.drawable.dice2);
                    break;
            }
            gridLayout.addView(imageView, i);
        }
    }

}



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

      android:layout_width="match_parent"
      android:layout_height="match_parent">

    <GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="3"
        android:padding="10dp"
        android:gravity="center"/>


</LinearLayout>

you need row column 3 in xml layout.
you have to set width and height of imageview .
height and width can be calculated based on screen size.you may not need the height but width is important.
another option would be to create scaled bitmap for background resource based of screen size.

Yes! This is so close! The only problem is that my gridlayout is not the whole screen like your's so this happens a lot = http://imgur.com/a/jiKAJ. How do if fit the images by width and height? — Jared, Jul 05 '17 at 18:54
Nvm! I did it. Used this "int height = gridLayout.getMeasuredHeight() / gridLayout.getRowCount();" for the height and it works perfectly! thanks — Jared, Jul 05 '17 at 19:21
I was actually working on this.Just be careful you only use measured height by implementing global layout listener or just creating a custom grid layout and override onMeasure method.I am updating my answer — G Singh, Jul 05 '17 at 19:35

Carlos Valencia · Answer 2 · 2017-07-05T00:16:28.287

0

Look at these properties

android:columnCount="2" android:rowCount="2"

Before adding the image to the gridview try to play the properties listed above.

If layout contains 1 image set both to 1 If layout contains 2 images set row to 1 and column to 2. If layout contains 3 images set row to 1 and column to 3

If layout contains 4 set both to 2.

Etc...

edited Jul 05 '17 at 00:16

answered Jul 04 '17 at 22:18

Carlos Valencia

61
3

That did nothing. Also adding a specified amount of columns does nothing. – Jared Jul 04 '17 at 22:27
Can you add a picture of what exactly you wanna get? Or similar. – Carlos Valencia Jul 04 '17 at 22:28
I added pictures :) – Jared Jul 04 '17 at 22:52
Still doesn't work. :( I think the xml is fine. I'm probably adding the views in an incorrect way or something. – Jared Jul 04 '17 at 23:36
Try getchildcount method and loop through to find if imageviews are added succesfully .then give baclground color grid view to see if it has enough space needed. – G Singh Jul 04 '17 at 23:36
It adds them all. Btw it's a grid layout not a gridview – Jared Jul 04 '17 at 23:41
Yeah i meant to write grid layout.it could be overlaping problem .does adding images in xml with same properties work ? – G Singh Jul 04 '17 at 23:45
It does the same thing. It just adds the next images to the right of the last image. – Jared Jul 04 '17 at 23:54
Try this https://stackoverflow.com/questions/10347846/how-to-make-a-gridlayout-fit-screen-size – Carlos Valencia Jul 05 '17 at 01:01

Grid Layout Add Evenly Spaced Images

2 Answers2