【Android Studio】ボダンのデザインをカスタマイズするときの基本

android studio

自分がつくるアプリのイメージに合わせて、表示するボタンのデザインを変えたい場合も多々あると思います。今回は、背景色の変更や、ボタンの形の変え方の基本をご紹介します。

文字色、背景色、フォントサイズ

まず、文字色、背景色、フォントサイズです。

文字色
背景色
フォントサイズ

カラーコードは以下のサイトが参考になると思います。

カラーコード表

サンプルコードはこちらです。背景色をTomato、文字色を白にしています。

ボタンの形を変える

もう少し、複雑なデザインをカスタマイズするときは、\res\drawableにデザインを記述したファイルを作成します。具体的には、以下のような手順で行います。

  1. \res\drawableに新規xmlファイルを作成
  2. デザインを記述する
  3. ボタンのbackgroundの設定で作成したファイルを呼び出す

\res\drawableに新規xmlファイルを作成

app\res\drawableに移動します。

新規xmlファイルを作成します。今回はbutton_design.xmlというファイル名にしました。

デザインを記述する

先ほど作成したbutton_design.xmlにデザインを書き込んでいきます。ボタンの形や背景色の詳細設定をする際にはShapeを使うと便利です。詳しくは、こちらを参考にしてください。

Developersの公式ドキュメントに記載されているサンプルコードはこちらです。

ボタンのbackgroundの設定で作成したファイルを呼び出す

backgroundでボタンデザインを記載したxmlファイルを呼び出します。

角に丸みが付き、グラデーションもかかって、かなり雰囲気が変わりましたね!

その他の設定

図形のタイプ(android:shapeに記載する)

"rectangle" 四角形 デフォルトの図形
"oval" 楕円形
"line" 水平線 線の太さを指定する <stroke> 要素が必要。
"ring" 同心円
タイトルとURLをコピーしました