Drawableで角丸やグラデーション | Drawable Resource gradient corners | Android

スポンサーリンク
スポンサーリンク

Drawableで角丸長方形

HTMLの世界ではh1やh2といった見出しを角丸長方形などに設定することがあります。

では、Androidではどのように設定するのでしょうか。

CSSほどではありませんが、XMLを使って記述することができます。

この方法であれば画像を使いませんから修正も簡単です。

というわけで、方法です。cornersを用います。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <!-- 背景色 -->
    <solid android:color="#67b44a" />

    <!-- 角の丸み -->
    <corners android:radius="8dp" />

</shape>

このXMLをdrawableに保存し、TextViewのBackGroundに指定すればTextViewの幅にあわせて表示されます。widthがmatch_parent でも 120dpでもしっかり角丸で表示されます。

<TextView
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    android:gravity="center_vertical|center_horizontal"
    android:text="Normal"
    android:background="@drawable/kadomaru"/>

といった具合です。

グラデーション付きの角丸長方形

グラデーションを使う際は、gradientを使用します。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <!-- 背景色 -->
    <gradient
        android:startColor="#FFFFFFFF"
        android:endColor="#FF67b44a"
        android:angle="0"
        />
    <!-- 角の丸み -->
    <corners android:radius="8dp" />
</shape>


デフォルトでは左端がstart、右端がendとなります。

この方向を変更したい場合は angleを用います。

gradientタグの中で angle=”270″ とすれば上から下へのグラデーションに変更されます。

<gradient
    android:startColor="#0067b44a"
    android:endColor="#FF67b44a"
    android:angle="270"
    />

左から右が0ですから上から下が270度ということで270というわけです。

ここからは透過グラデーションで表示しています。

透明度は8桁で表すことで表現でき、左2つの数値で指定します。

00xxxxxxで透明度100%、つまり完全な透明、FFで透明度0、つまり塗りつぶしとなります。

中央点を加えたグラデーションの長方形

start、endに加えてもう1点、グラデーションポイントを中央に配置する方法です。

同様にgradientを用い、もう1点としてcenterColorを用います。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <!-- 背景色 -->
    <gradient android:startColor="#0067b44a"
             android:centerColor="#FF67b44a" 
              android:endColor="#0067b44a" />
    <!-- 角の丸み -->
    <corners android:radius="8dp" />
</shape>

3点目を自由に設定するグラデーション

中央ではなく別の地点に3点目を設置する方法ももちろんあります。

これは0~1の数値をあてて、相対的に位置を決定する方法です。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <!-- 背景色 -->
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="#FF67b44a"
        android:type="radial"
        android:gradientRadius="100dp"
        android:centerX="0.3"
        android:centerY="0.3"
        />

    <!-- 角の丸み -->
    <corners android:radius="8dp" />
</shape>

centerXは左端を0、右端を1とした場合で、グラデーションのX軸の中心位置を指定し、

centerYは同様に、上を0、下を1としたY軸中心位置を記述します。

type=”radial”で放射状のグラデーション、type=”sweep”で円形のグラデーションとなります。

何も指定しない場合は直線グラデーションです。

枠線のつける方法

角丸のdrawableやグラデーションの方法は一通り説明しました。続いて枠をつける方法です。

コード自体は変わらず簡単で、次のようになります。strokeを用います。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <!-- 背景色 -->
    <solid android:color="#67b44a" />

    <!-- 角の丸み -->
    <corners android:radius="8dp" />
    <stroke
        android:width="3dp"
        android:color="#FFFFFF"/>

</shape>

となります。実はこの方法、単なる四角の枠を使う際にも利用します。

方法は、そうです。<solid android:color=”#67b44a” />を記述しない、ということです。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <!-- 背景色を指定しない -->

    <!-- 角の丸み -->
    <corners android:radius="8dp" />
    <stroke
        android:width="3dp"
        android:color="#FFFFFF"/>

</shape>

こうすれば、下のような四角枠が完成です。意外と使えるデザインです。

おわりに

drawableはソースこの他にも円(ring)や楕円(oval)、水平線(line)があります。drawableソースはxmlですからアプリを軽量化させます。サイズや色の変更も容易です。drawableリソースで表現できる図絵は、できる限りこの方法を利用してみてください。

ring,oval,lineは次の機会に。