2019.09.09 2023.01.15

【Android Studio】ダイアログの文字色・文字サイズ・背景色のカスタマイズ方法

Sara

ここでは「AlertDialogの文字色・文字サイズ・背景色のカスタマイズ方法」を紹介します。

文字の色を変えるだけでもアプリの雰囲気が変わりますので、ぜひお試しください。

ダイアログの基本的な使い方は以下の記事をお読み下さい。

開発環境

Android Studio	4.1.1
Android Emulator	Nexus 4 (API 30)
minSdk	16
targetSdk	30

AlertDialog のカスタマイズ

1. 色の用意

タイトルとボタンに使用する色を colors.xml に定義しておきます。

黒・白・赤などの一般的な色を使う場合は、このあと紹介する Color クラスに用意されているので、この手順は不要です。

Android Studio 画面左側のプロジェクト構造から app → res → values → colors.xml を開きます。

colors.xml を開いたら、6行目のように好きな色をご用意ください。

2. タイトルのカスタマイズ

まずはタイトルのカスタマイズをします。（7~13行目）

ここではタイトル用の TextView を用意して

表示するテキスト
文字サイズ
文字色
背景色
Padding
揃える位置

の順番で設定しています。

10行目

titleView.setTextColor(Color.WHITE);

文字の色は Color クラスに用意されている WHITE（白）を使っています。

黒・白・赤などの一般的な色は Color クラスに用意されているので、簡単に使うことができます。

使用できる色は https://developer.android.com/reference/android/graphics/Color#summary をお読みください。

11行目

titleView.setBackgroundColor(getResources().getColor(R.color.alertBlue));

背景色には先ほど colors.xml に定義した色を使っています。

RGB や HEX を使った色の指定方法は【Android Studio】Colorクラス・Resources を使った色の指定方法まとめをお読みください。

12行目

titleView.setPadding(20, 20, 20, 20);

padding を「左・上・右・下」の順番でセットしています。

今回はタイトルを中央揃えにしているので、左右の Padding は 0 しても問題ありません。

Padding（パディング）は、タイトル TextView の枠と文字の距離（すき間）の部分です。

16行目

builder.setCustomTitle(titleView)

setTitle メソッドではなく、setCustomTitle メソッドを使って TextView をセットすればタイトルのカスタマイズは完了です。

3. メッセージのカスタマイズ

次にメッセージ部分のカスタマイズをします。

メッセージもタイトルと同じように TextView を用意するだけでカスタマイズできます。（15~19行目）

設定項目はタイトルで使ったものと同じです。

メッセージ部分にも背景色を付けたい場合は、タイトルと同じように setBackgroundColor メソッドを使います。

23行目

.setView(msgView)

setMessage メソッドではなく、setView メソッドを使って TextView をセットすれば完了です。

HTMLを使いたい場合

以下のように書くと HTML でメッセージを書くこともできます。

6 行目の setMovementMethod メソッドは <a> リンクをクリックできるようにするために使うので、リンクがない場合は不要です。

もう一つの HTML の設定方法はこちらをお読み下さい。

4. ボタンのカスタマイズ

onCreateDialog メソッドでは、まだフラグメントが作成されていません。

そのためフラグメントが表示される直前の onStart メソッドで Button を取得してカスタマイズします。

32~40行目を追加します。

今回は POSITIVE ボタンだけ使用していますが、NEGATIVE, NEUTRAL ボタンも以下のように取得できます。

alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE)
alertDialog.getButton(AlertDialog.BUTTON_NEUTRAL)

アプリを実行

以上で完成です。

アプリを実行すると、このようなダイアログが表示されます。

ダイアログのカスタマイズ方法

0 Comments

Inline Feedbacks

View all comments

ABOUT ME