ボタンにテキストを設定したときにほかのビューとの間に空白ができてしまう

Question

実現したいこと

カスタムボタンの完璧な配置

前提

android studio,javaで開発しています

発生している問題

カスタムボタンをグリッドレイアウトに動的にたくさん配置しているのですが、ボタンにテキストを設定すると、ボタンとボタンの間に不自然な隙間ができます。これをなくしたいです。

問題の画像

画像では誇張してテキストを大きくしていますが、10dp程度でも、数ピクセルの隙間ができてしまいます。
もっと小さくすると隙間が発生しないですが、視認性が落ちるので困っています。

試したこと

ボタンのテキストを無くせば理想の配置になります。

テキストの大きさによって空白の大きさも変わります。
マージン関連の属性のせいなのかと思い、すべて変更し確認してみましたが効果はありませんでした。
ボタンの大きさを大きくすると空白が生じ始める最小のテキストの大きさも大きくなります。

ソースコード　追記

package com.example.myapplication;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.MotionEvent;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatButton;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.gridlayout.widget.GridLayout;

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ConstraintLayout constraintLayout = findViewById(R.id.constraint);

constraintLayout.post(() -> {
GridLayout gridLayout = findViewById(R.id.grid);

int column = gridLayout.getColumnCount();
int row = gridLayout.getRowCount();

int width = constraintLayout.getWidth() / column;
int height = constraintLayout.getHeight() / row;
int btnSize = 150;
int widthMargin = (width-btnSize) / 2;
int heightMargin = (height-btnSize) / 2;

String[] note = {"あ", "あ", "", "あ", "あ"};
for (int i = 0; i < column * row; i++) {
GridLayout.LayoutParams params = new GridLayout.LayoutParams();
params.width = params.height = btnSize;
params.columnSpec = GridLayout.spec(i % column, 1);
params.rowSpec = GridLayout.spec(i / column, 1);

params.setMargins(widthMargin, heightMargin, widthMargin, heightMargin);

CircleButton button = new CircleButton(this,Color.WHITE, btnSize);
button.setLayoutParams(params);
button.setId(i);
button.setText(i % column < note.length ? note[i % column] : null);
button.setOnClickListener(v -> {

});

gridLayout.addView(button);
}
});
}

public static class CircleButton extends AppCompatButton {
public CircleButton(Context context,int color, int size) {
super(context);
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.OVAL);
drawable.setColor(color);
setBackground(drawable);

setPadding(0, 0, 0, 0);
setMinWidth(size);
setMinHeight(size);
setTextSize(100);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
int radius = getWidth() / 2;

if (event.getActionMasked() == MotionEvent.ACTION_DOWN && (float) Math.sqrt(Math.pow(event.getX() - centerX, 2) + Math.pow(event.getY() - centerY, 2)) > radius) {
if (event.getAction() == MotionEvent.ACTION_UP) performClick();
return false;
}

return super.onTouchEvent(event);
}

@Override
public boolean performClick() {
return super.performClick();
}
}
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.gridlayout.widget.GridLayout
android:id="@+id/grid"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#787878"
app:columnCount="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="5">

</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

追加で分かったことがあるので記しておきます。
・ボタンのテキストに何も記述しない列がないと起こらない
・テキストが英文字であると起こらない（かな、カナであると起こる）
・英文字である列とかなである列が混在していても起こる
どうやらテキストが関係していそうです。

Comments

[jimbe]

コピペして動作させれば画像のようになることが確認出来る最小の一連のコード・レイアウトをご提示頂けますでしょうか。
部分々々では再現できなかったり、提示されていない部分が関係している可能性も捨てきれません。
また開発環境・動作環境が関わるかもしれませんので、各種バージョンやエミュレータ・実機の設定等々、出来る限り情報を添付頂けると助かると思います。

[salt111]

長くなりましたので質問文に追記しておきました。ご確認ください。

[jimbe]

ありがとうございます。後ほど試してみます。
45行目のsetText をした場合としなかった場合で各ボタンが同じ位置にあれば良いということであっていますか。

[salt111]

はい。その通りです。

Answer 1

カナ、かなの違いで起こるようだったので、カスタムフォントを作成し、文字の幅と高さをすべて統一すると解決しました。
また、空白とかなの違いのみだとそこまでせずとも全角のスペースを入れると解決することを確認しました。

Answer 2

ご提示頂いたコードとレイアウトを新規作成したプロジェクトの MainActivity.java と activity_main.xml に張り付け、いつも使っている Pixel 6 API 30 のエミュレータで setText をコメントにした/しない場合の実行時画面をキャプチャして "ペイント" でそれぞれを 25% に縮小後並べました。

赤線は並べた後に書き込んだものです。
目立った違いは無さそうです。

---

ついでに(?) GridLayout へのボタンの設定は row/column とも alignment=CENTER, weight=1f とすることで各枠を GridLayout の幅/高さを等分に分けた大きさにした上でボタンを中央に出来ますので、マージンを計算・設定しなくて済むのではないでしょうか。(実際の大きさが決まるのを待つ必要が無くなるので post もせずに済みますし。)

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

    GridLayout gridLayout = findViewById(R.id.grid);

    int column = gridLayout.getColumnCount();
    int row = gridLayout.getRowCount();

    int btnSize = 150;

    String[] note = {"あ", "あ", "", "あ", "あ"};
    for (int i = 0; i < column * row; i++) {
      GridLayout.LayoutParams params = new GridLayout.LayoutParams();
      params.width = params.height = btnSize;
      params.columnSpec = GridLayout.spec(i % column, GridLayout.CENTER, 1f);
      params.rowSpec = GridLayout.spec(i / column, GridLayout.CENTER, 1f);

      CircleButton button = new CircleButton(this, Color.WHITE, btnSize);
      button.setLayoutParams(params);
      button.setId(View.generateViewId());
      button.setText(i % column < note.length ? note[i % column] : null);
      button.setOnClickListener(v -> {

      });

      gridLayout.addView(button);
    }
  }

Comments

[salt111]

このビューの裏にほかのビューを重ねたかったので、１pxのずれも妥協したくなかった結果そのコードになりました。ｗ
なぜ僕の環境でしか起こらなかったのかは謎ですね、、

[jimbe]

>このビューの裏にほかのビューを重ねたかったので

"このビュー" というのはボタンを並べているパネルのことでしょうか。
計算の誤差が発生するような大きさ関係ならアプリで計算してもレイアウトマネージャが計算しても同じかと思いますが…まあココは掘る所じゃないですね。

>なぜ僕の環境でしか起こらなかったのかは謎ですね、、

それを確認する為もあって質問へのコメントに

>また開発環境・動作環境が関わるかもしれませんので、各種バージョンやエミュレータ・実機の設定等々、出来る限り情報を添付頂けると

と書かせて頂いたのですけども^^;