Assigning custom buttons dynamically into a custom grid layout

Question

I have a requirement to display a question along with a list of options that i am getting from server. Each option has a title and an image and these options should be clickable. So I am creating a class ImageButton extending to RelativeLayout and each option is an ImageButton. I am also creating a class ImageButtonGroup extending to GridLayout and dynamimcally adding all the ImageButtons to this ImageButtonGroup.

It works fine except for the alignment of the ImageButtons. The ImageButton's size depends on the length of the title text (the image is of same size for all options) and I am having hard time in distributing equal cell space to each ImageButton in the grid layout. See below my code where I am adding ImageButtons to ImageButtonGroup:

ImageButtonGroup imageButtonGroup =
          (ImageButtonGroup)
              mInflater.inflate(
                  R.layout.button_image_response_layout, holder.richTextContainer, false);
      int total = item.getMessage().getResponseOptions().size();
      int col = 3;
      int row = total / col;
      imageButtonGroup.setColumnCount(col);
      imageButtonGroup.setRowCount(row + 1);
      for (int i = 0; i < total; i++) {
        ResponseOption responseOption = item.getMessage().getResponseOptions().get(i);
        ImageButtonView imageButtonView =
            (ImageButtonView)
                mInflater.inflate(
                    R.layout.image_button_layout, holder.richTextContainer, false);
        imageButtonView.setData(
            responseOption.getImage(), responseOption.getViewText(), responseOption.getValue());
        GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams();
        gridParam.setGravity(Gravity.CENTER);
        gridParam.topMargin = 10;
        gridParam.bottomMargin = 10;
        gridParam.width = GridLayout.LayoutParams.WRAP_CONTENT;
        gridParam.height = GridLayout.LayoutParams.WRAP_CONTENT;
        imageButtonGroup.addView(imageButtonView, gridParam);

This gets me the following view:(The text isn't always Happy as shown below)

How to dynamically allocate fixed sized cell to these buttons inside a grid layout?

Can you put a screen of the actual behaviour of your gridview? — Cedric Franck, Feb 22 '17 at 13:47

Cedric Franck · Answer 1 · 2017-02-23T09:47:41.577

You can to specify row and column while creating the GridLayoutParams so that it will handle itself the matching of the size dependending on the total space:

GridLayout.LayoutParams first = new GridLayout.LayoutParams(row, col);

GridLayout.LayoutParams(GridLayout.Spec rowSpec, GridLayout.Spec columnSpec)

Constructs a new LayoutParams instance for this rowSpec and columnSpec.

In your specific case it will be something like :

    for (int i = 0; i < total; i++) {
            ResponseOption responseOption = item.getMessage().getResponseOptions().get(i);
            ImageButtonView imageButtonView =
                (ImageButtonView)
                    mInflater.inflate(
                        R.layout.image_button_layout, holder.richTextContainer, false);
            imageButtonView.setData(
                responseOption.getImage(), responseOption.getViewText(), responseOption.getValue());
Spec row = GridLayout.spec(Math.round(i / 3);
Spec col = GridLayout.spec(i % 3);
            GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(row, col);
            gridParam.setGravity(Gravity.CENTER);
            gridParam.topMargin = 10;
            gridParam.bottomMargin = 10;
            gridParam.width = GridLayout.LayoutParams.WRAP_CONTENT;
            gridParam.height = GridLayout.LayoutParams.WRAP_CONTENT;
            imageButtonGroup.addView(imageButtonView, gridParam);

GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(Math.round(i / 3), i % 3); gives "Cannot resolve constructor LayoutParams(int, int)" — Prabhat, Feb 23 '17 at 09:43
Yup i made a mistake . You need to use Spec object to pass to the constructor. Check the edited answer. — Cedric Franck, Feb 23 '17 at 09:48
This had no effect . I'm thinking if weight can somehow come to my rescue. But i am not sure. — Prabhat, Feb 23 '17 at 09:58
Maybe. I think this topic may help your case : http://stackoverflow.com/questions/10347846/how-to-make-a-gridlayout-fit-screen-size — Cedric Franck, Feb 23 '17 at 10:03

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

I was able to achieve this taking a hint from here

I got the screen width, calculated my layout size in terms of %age point (came out to be 70% of the total width) and divided it by 3 (the number of column). So basically what i did is:

int dWidth = (int)(presenter.getView().getScreenWidth() * .70) / 3;
gridParam.width = dWidth;

edited May 23 '17 at 12:17

Community

1
1

answered Feb 23 '17 at 11:44

Prabhat

143
2
8

Assigning custom buttons dynamically into a custom grid layout

2 Answers2