Search code examples
androidimagegridviewgrid-layout

Grid Layout Add Evenly Spaced Images


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: enter image description here

What I want: enter image description here


Solution

  • [![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>
    
    1. you need row column 3 in xml layout.
    2. you have to set width and height of imageview .
    3. height and width can be calculated based on screen size.you may not need the height but width is important.

    4. another option would be to create scaled bitmap for background resource based of screen size.

    enter image description here