Search code examples
androidandroid-buttonspacingandroid-gridlayout

Why gridlayout in Android can't line up buttons properly with my java app?

My java code looks like this :

    LinearLayout Table_And_Login_Layout = new LinearLayout(context);
    Table_And_Login_Layout.setId(View.generateViewId());
    Table_And_Login_Layout.setBackgroundColor(Color.rgb(88, 188, 218));
    Table_And_Login_Layout.setHorizontalGravity(Gravity.CENTER);
    Table_And_Login_Layout.setVerticalGravity(Gravity.CENTER);

    addView(Table_And_Login_Layout, LinearLayout.LayoutParams.MATCH_PARENT,width*row_count+13);

    GridLayout Table_Layout = new GridLayout(context);
    Table_Layout.setColumnCount(col_count);
    Table_Layout.setRowCount(row_count);
    Table_Layout.setBackgroundColor(Color.rgb(88, 188, 218));

    Table_And_Login_Layout.addView(Table_Layout, width*col_count,width*row_count+8);

    Table_Button = new Button[row_count][col_count];
    for (int row = 0; row < row_count; row++)
      for (int col = 0; col < col_count; col++)
      {
        Table_Button[row][col] = new Button(context);
        Table_Button[row][col].setTypeface(Typeface.MONOSPACE);
        Table_Button[row][col].setAllCaps(false);
        Table_Button[row][col].setTextSize(21);
        Table_Button[row][col].setOnClickListener(Table_Button_Listener);
        Table_Layout.addView(Table_Button[row][col], width, width);
//        Table_Layout.addView(Table_Button[row][col], 190, 190);

        GradientDrawable drawable = new GradientDrawable();
        drawable.setShape(GradientDrawable.RECTANGLE);
        drawable.setCornerRadii(new float[] { 8, 8, 8, 8, 8, 8, 8, 8 });
        drawable.setStroke(8, Color.rgb(28,158,218));
        drawable.setColor(Color.rgb(214, 215, 215));
        Table_Button[row][col].setPadding(0, 0, 0, 0);
        Table_Button[row][col].setBackground(drawable);
      }

    LinearLayout GATE_Login_Layout = new LinearLayout(context);
    GATE_Login_Layout.setBackgroundColor(Color.rgb(88, 188, 218));
    Table_And_Login_Layout.addView(GATE_Login_Layout, width, width*2);
    GATE_Login_Layout.setHorizontalGravity(Gravity.RIGHT);
    GATE_Login_Layout.setVerticalGravity(Gravity.CENTER);

    Button Login_Button=new Button(context);
    Login_Button.setText("Login");
    Login_Button.setAllCaps(false);
    Login_Button.setOnClickListener(Login_Button_Listener);
    GATE_Login_Layout.addView(Login_Button);

...

  String getFormattedTableButton(String token)
  {
    String symbols[] = token.split(" "),text = symbols[0]+" <big>"+symbols[1]+"</big><br><small>"+symbols[2]+"</small> <big>"+symbols[3]+"</big>";
    Out(text);
    return text;
//    return "Hi";
  }

  public void resetButtons(GATE gate)
  {
    for (int row = 0; row < row_count; row++) for (int col = 0; col < col_count; col++) Table_Button[row][col].setText(Html.fromHtml(getFormattedTableButton(gate.table[row][col])));

  }

The screenshot looks like this :

enter image description here

As you can see the top 2 rows have uneven space between buttons, I found it's caused by the text on the buttons, if I change the text to something like "Hi", the buttons will line up straight, isn't that a bug in the Android system ? Buttons should line up according to the gridlayout, they shouldn't jag because of the text on the buttons, am I right ?

The text are like this :

I/System.out: 19 <big>Ⓩ</big><br><small>♀</small> <big>%</big>
I/System.out: 2 <big>ι</big><br><small>△</small> <big>#</big>
I/System.out: 23 <big>υ</big><br><small>♥</small> <big>♫</big>
I/System.out: 9 <big>Ⓨ</big><br><small>−</small> <big>₣</big>
I/System.out: 10 <big>Ⓑ</big><br><small>♠</small> <big>€</big>
I/System.out: 41 <big>φ</big><br><small>●</small> <big>฿</big>
I/System.out: 39 <big>ξ</big><br><small>↓</small> <big>$</big>
I/System.out: 17 <big>Ⓞ</big><br><small>♂</small> <big>✉</big>
I/System.out: 27 <big>Ⓕ</big><br><small>☰</small> <big>☮</big>
I/System.out: 31 <big>σ</big><br><small>☆</small> <big>₯</big>

So the question is "how to fix it ?"

Solution

  • Figured it out, by adding another layout for each button in the grid, looks like this :

    Table_Button = new Button[row_count][col_count];
for (int row = 0; row < row_count; row++)
  for (int col = 0; col < col_count; col++)
  {
    Table_Button[row][col] = new Button(context);
    Table_Button[row][col].setTypeface(Typeface.MONOSPACE);
    Table_Button[row][col].setAllCaps(false);
    Table_Button[row][col].setTextSize(21);
    Table_Button[row][col].setGravity(Gravity.CENTER);
    Table_Button[row][col].setOnClickListener(Table_Button_Listener);

    LinearLayout Button_Layout = new LinearLayout(context);
    Button_Layout.setBackgroundColor(Color.rgb(88, 188, 218));
    Button_Layout.setHorizontalGravity(Gravity.CENTER);
    Button_Layout.setVerticalGravity(Gravity.CENTER);
    Button_Layout.addView(Table_Button[row][col], width, width);

    Table_Layout.addView(Button_Layout, width, width);

    GradientDrawable drawable = new GradientDrawable();
    drawable.setShape(GradientDrawable.RECTANGLE);
    drawable.setCornerRadii(new float[] { 8, 8, 8, 8, 8, 8, 8, 8 });
    drawable.setStroke(8, Color.rgb(28,158,218));
    drawable.setColor(Color.rgb(214, 215, 215));
    Table_Button[row][col].setPadding(0, 0, 0, 0);
    Table_Button[row][col].setBackground(drawable);
  }

    So now it looks like this :

    enter image description here