前回の続き

ボタンの外観をカスタマイズしたい時があると思います。今回はグラデーションボタンの表示方法についてです。

サンプル: https://github.com/stack3/AndroidButtonSample

サンプルをダウンロードしてアプリを起動してください。いくつかボタンが並んで表示されるはずです。

※ 特にカスタマイズしないとデフォルトの外観になりますが、実はこの外観、すべての端末・OSで統一されているわけではないので、アプリ全体の外観と合わなくなることがあるので注意です。

グラデーションボタンの外観定義

01

このようなグラデーションするボタンを表示したい時は、画像ではなくXMLの定義のみで行うことができます。画像を使って実現することもできますが、XMLで定義したほうがプログラムで描画されるので、サイズが変わっても粗が目立つことはなく見栄えも良いと思います。9-patch画像を作るのも大変ですからね。

res/drawableフォルダにbutton_gradient_pink.xmlというファイルがあります。

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <shape android:shape="rectangle">
      <corners android:radius="4dp" />

      <gradient
      android:angle="270"
      android:startColor="#FF66FF"
      android:endColor="#FF33FF" />

      <stroke
      android:width="2dp"
      android:color="#FF00FF" />

      <padding
      android:top="10dp"
      android:bottom="10dp"
      android:left="10dp"
      android:right="10dp" />
    </shape>
  </item>

  <item android:state_enabled="false">
    <shape android:shape="rectangle">
      <corners android:radius="4dp" />

      <gradient
      android:angle="270"
      android:startColor="#C0C0C0"
      android:endColor="#A9A9A9" />

      <stroke
      android:width="2dp"
      android:color="#696969" />

      <padding
      android:top="10dp"
      android:bottom="10dp"
      android:left="10dp"
      android:right="10dp" />
    </shape>
  </item>

  <item>
    <shape android:shape="rectangle">
      <corners android:radius="4dp" />

      <gradient
      android:angle="270"
      android:startColor="#FFCCFF"
      android:endColor="#FF99FF" />

      <stroke
      android:width="2dp"
      android:color="#FF66FF" />

      <padding
      android:top="10dp"
      android:bottom="10dp"
      android:left="10dp"
      android:right="10dp" />
    </shape>
  </item>
</selector>

item要素について

  • 最初のitem android:state_pressed=”true”でボタンが押された時の外観を定義しています。
  • 次のitem android:state_enabled=”false”でボタンがDisabledになった時の外観を定義しています。
  • 最後のitem(属性無し)は、通常の状態を含めた上記以外の時の外観を定義しています。

shape要素について

矩形表示するためにandroid:shape=”rectangle”としています。

corners要素について

矩形の角野丸みの度合いをandroid:radius=”4dp”としています。もっと丸くしたい時はradiusの値を大きくします。

gradient要素について

矩形の塗りをグラデーションにするための定義です。通常、上から下へグラデーションさせます。その時は、android:angle=”270″とします。
startColorで始まりの色、endColorで終わりの色を指定します。

stroke要素について

矩形の外枠の線の定義です。android:widthで線の幅、android:colorで線の色を定義しています。
線が不要な時は、この要素は定義しないでください。

padding要素について

android:top,bottom,left,rightでボタンテキストとの余白を指定します。

グラデーションボタンの表示

グラデーションボタンを表示する時はActivityなどのXMLでButtonを以下のように定義します。

<Button
  android:id="@+id/button2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/widget_margin"
  android:text="@string/gradient_pink"
  android:textColor="@color/text_color"
  android:textSize="@dimen/medium_text_size"
  android:background="@drawable/button_gradient_pink" />

android:backgroundで、先ほどのbutton_gradient_pink(.xml)を指定しています。これで背景がグラデーション表示されるはずです。
他にも以下のプロパティでボタンの外観を変更できます。

  • android:textColor: 文字色
  • android:textSize: 文字のサイズ

textColorの@color/text_colorはres/values/colors.xmlで定義されています。

<color name="text_color">#333333</color>

textSizeの@dimen/medium_text_sizeはres/values/dimens.xml

<dimen name="medium_text_size">16sp</dimen>

毎回、background、textColor、textSizeを指定するのは面倒なので、通常はstyleを定義します。

styleの定義と参照

02

サンプルのこのボタンは見た目は先ほどと変わりませんが、styleを使って表示しています。

styles.xmlでbutton_gradient_pinkというstyleを定義しています。

<style name="button_gradient_pink">
  <item name="android:textSize">16sp</item>
  <item name="android:textColor">@color/text_color</item>
  <item name="android:background">@drawable/button_gradient_pink</item>
</style>

Buttonのstyle属性にこのstyleを指定すると上記の属性がまとめて設定されます。

<Button
  android:id="@+id/button3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/widget_margin"
  android:text="@string/gradient_pink_with_style"
  style="@style/button_gradient_pink" />

ここはandroid:styleではなく、ただのstyleであることに注意。

次回はフラットボタン。

その3へ続く