android グラデーションをかける gradient

今回は、androidのグラデーション(gradient)について書きます。

グラデーションは、こんな感じに作れます↓
f:id:gupuru:20140412121735p:plain

ボタンや背景などに使えます。

導入も超簡単です（笑）

はじめに、resに「drawable」というフォルダを作ります。
f:id:gupuru:20140412122020p:plain

次に、「drawable」の中にxmlファイルを作ります。名前は、なんでもいいです。
f:id:gupuru:20140412122116p:plain
今回は、「gradient.xml」という名前にしました。

先ほど作ったxmlファイルにこのようなコードを書きます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
</shape>

最後に、グラデーションをかけたいモノにこちらを追加します↓

  android:background="@drawable/gradient"

例えば、ボタンにグラデーションをかけたい場合は、こうなります。

<Button android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ぼたん"
        android:background="@drawable/gradient"
/>

f:id:gupuru:20140412122635p:plain

これで、終わりです。とても簡単だと思います。

ここからは、このコードを少し詳しく解説します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
</shape>

android:startColor・・・開始色です。
android:endColor・・・終了色です。
android:angle・・・グラデーションをかける方向です。45度間隔で指定します。（0→45→90→135）

このコードを少し改良し、ボタンの背景に使ってみます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="135"/>
   <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

    <Button android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ぼたん"
        android:background="@drawable/gradient"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        />