前回の続き

今回はフラットボタンの作り方です。

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

前回で使ったサンプルで以下のようなボタンが表示されているはずです。

06

フラットボタンの外観定義

res/drawable/button_flat_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" />
      <solid android:color="#FF66FF" />
      <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" />
      <solid android:color="#C0C0C0" />
      <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" />
      <solid android:color="#FFCCFF" />
      <stroke
      android:width="2dp"
      android:color="#FF66FF" />
      <padding
      android:top="10dp"
      android:bottom="10dp"
      android:left="10dp"
      android:right="10dp" />
    </shape>
  </item>
</selector>

ほとんど前回のグラデーションと同じです。違いは、gradientを使わずsolidを使っていることです。

solid要素

矩形を単色で塗りつぶします。android:color属性で色を指定します。

フラットボタンの表示

Buttonのandroid:backgroundにbutton_flat_pinkを指定すれば、外観がフラットボタンになります。しかし前回同様にstyleを使ってtextColorやtextSizeも一緒に設定できるようにするほうが良いでしょう。

res/values/styles.xml

button_flat_pinkというstyleを定義しています。

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

Buttonにstyleを適用

<Button
  android:id="@+id/button4"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/widget_margin"
  android:text="@string/flat_pink"
  style="@style/button_flat_pink" />

以上、フラットボタンの説明でした。

その4へ続く