Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

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"
        />

実行結果
f:id:gupuru:20140412124333p:plain
綺麗なボタンになりました(笑)


簡単にできるので、グラデーション(gradient)は一度使って見る価値はあると思います。


参考サイト
Drawable Resources | Android Developers

広告を非表示にする