ドローアブル リソースとは、一般的に画面上に描画するグラフィックのことであり、getDrawable(int)
などの API で取得できるものや、android:drawable
や android:icon
などの属性で別の XML リソースに適用するものがあります。ドローアブルには複数のタイプがあります。
- ビットマップ ファイル
- ビットマップ グラフィック ファイル(
.png
、.jpg
、.gif
)。BitmapDrawable
を作成します。 - 9-patch ファイル
- 拡大できる領域を持つ PNG ファイルで、コンテンツに応じて画像のサイズを変更できます(
.9.png
)。NinePatchDrawable
を作成します。 - レイヤリスト
- その他のドローアブル配列を管理するドローアブル。配列順に描画されるので、インデックスの大きい要素が最前面に描画されます。
LayerDrawable
を作成します。 - 状態リスト
- 状態の変化に合わせて別々のビットマップ グラフィックを参照する XML ファイル(ボタンのクリック時に別の画像を使用するなど)。
StateListDrawable
を作成します。 - レベルリスト
- 切り替え可能な複数のドローアブルを管理するドローアブルを定義する XML ファイル。各ドローアブルには最大値が指定されます。
LevelListDrawable
を作成します。 - トランジション ドローアブル
- 2 つのドローアブル リソース間をクロスフェードできるドローアブルを定義する XML ファイル。
TransitionDrawable
を作成します。 - インセット ドローアブル
- 指定の距離で別のドローアブルを挿入するドローアブルを定義する XML ファイル。ビューが、それ自体の領域よりも小さいバックグラウンド ドローアブルを必要とする場合に便利です。
- クリップ ドローアブル
- ドローアブルの現在のレベル値に応じて別のドローアブルを切り取るドローアブルを定義する XML ファイル。
ClipDrawable
を作成します。 - スケール ドローアブル
- ドローアブルの現在のレベル値に応じて別のドローアブルのサイズを変更するドローアブルを定義する XML ファイル。
ScaleDrawable
を作成します。 - シェイプ ドローアブル
- 色やグラデーションなどを含む幾何学的図形を定義する XML ファイル。
GradientDrawable
を作成します。
AnimationDrawable
の作成方法については、アニメーション リソース ドキュメントも参照してください。
注:XML 内では、カラーリソースもドローアブルとして使えます。たとえば 状態リストのドローアブルを作成する際は、android:drawable
属性用にカラーリソースを参照できます(android:drawable="@color/green"
)。
ビットマップ
ビットマップ画像Android は次の 3 形式のビットマップ ファイルをサポートします。.png
(推奨)、.jpg
(許容)、.gif
(非推奨) です。
ファイル名をリソース ID として使用するか、XML 内でエイリアス ID を作成すれば、ビットマップ ファイルを直接参照できます。
注: ビットマップファイルは、ビルド中に aapt
ツールを使用した画像の可逆圧縮によって、自動的に最適化される場合があります。たとえば、256 色以上を必要としないトゥルーカラーの PNG を、カラーパレットを使って 8-bit PNG に変換可能です。結果として、より少ないメモリで同等の画質が得られます。このディレクトリ内のイメージ バイナリは、ビルド中に変化する可能性があることにご注意ください。ビットマップに変換するために画像をビット ストリームとして読み込もうとする場合には、最適化を避けるために res/raw/
フォルダに画像を移してください。
ビットマップ ファイル
ビットマップ ファイルとは .png
、.jpg
、.gif
形式のファイルです。これらのファイルを res/drawable/
ディレクトリに保存すると、Android は Drawable
リソースを生成します。
- ファイルの場所:
res/drawable/filename.png
(.png
、.jpg
、.gif
)
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
BitmapDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 例:
res/drawable/myimage.png
に保存された画像を使って、レイアウト XML で画像をビューに適用します。<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/myimage" />
以下のアプリのコードでは、画像を
Drawable
として読み込みます。Kotlin
val drawable: Drawable? = ResourcesCompat.
getDrawable
(resources, R.drawable.myimage, null)Java
Resources res =
getResources()
; Drawable drawable = ResourcesCompat.getDrawable
(res, R.drawable.myimage, null);- 関連ドキュメント:
XML ビットマップ
XML ビットマップは、ビットマップ ファイルを参照する XML 内で定義されたリソースです。処理前のビットマップファイルのエイリアスとして機能します。XML ではディザリングやタイリングなどのビットマップ用の追加プロパティを指定できます。
注: <bitmap>
要素を <item>
の子要素として使えます。たとえば、状態リスト や レイヤリストを作成する場合、android:drawable
属性を <item>
要素から除外し、その中に <bitmap>
をネストすることでドローアブル アイテムを定義します。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
BitmapDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:antialias=["true" | "false"] android:dither=["true" | "false"] android:filter=["true" | "false"] android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:mipMap=["true" | "false"] android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
- 要素:
- 例:
-
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/icon" android:tileMode="repeat" />
- 関連ドキュメント:
9-patch
NinePatch
はビュー内のコンテンツが通常の画像範囲を超えた場合に、Android によって伸縮する領域を定義できる PNG 画像です。通常、"wrap_content"
に 1 つ以上の配置指定がされたビューの背景としてこのタイプの画像を指定します。また、ビューがコンテンツを収容できるほど拡大した場合、9-patch 画像もビューのサイズに合わせて引き伸ばされます。9-patch 画像を使用する例としては、Android の標準 Button
ウィジェットで使用される背景があります。この場合ボタン内のテキスト(または画像)が中に収まるよう拡大する必要があります。
通常のビットマップ同様、9-patch ファイルを直接あるいは、XML で定義されたリソースから参照できます。
伸縮可能な領域を指定して 9-patch ファイルを作成する方法の詳細については、2D グラフィック ドキュメントをご覧ください。
9-patch ファイル
- ファイルの場所:
res/drawable/filename.9.png
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
NinePatchDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 例:
res/drawable/myninepatch.9.png
に保存された画像を使って、レイアウト XML で 9-patch をビューに適用します。<Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@drawable/myninepatch" />
- 関連ドキュメント:
XML 9-patch
XML 9-patch は、Nine-Patch ファイルを参照する XML 内で定義されたリソースです。XML で、画像に施すディザリングを指定できます。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
NinePatchDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:dither=["true" | "false"] />
- 要素:
- 例:
-
<?xml version="1.0" encoding="utf-8"?> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/myninepatch" android:dither="false" />
レイヤリスト
LayerDrawable
は他のドローアブル配列を管理するドローアブル オブジェクトです。リスト内のドローアブルは配列順に描画されるので、リストの最後にあるドローアブルが最前面に描画されます。
各ドローアブルは、1 つの <layer-list>
要素内にある <item>
要素で表されます。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
LayerDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </layer-list>
- 要素:
- 例:
res/drawable/layers.xml
に保存された XML ファイル:<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="@drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="@drawable/android_blue" android:gravity="center" /> </item> </layer-list>
この例では、ネストされた
<bitmap>
要素を使って、center グラビティを指定した各アイテムのドローアブル リソースを定義している点に注目してください。このようにすると、画像のオフセットによるサイズ変更で、コンテナのサイズに合わせて画像サイズが調整されることはありません。以下のレイアウト XML でドローアブルをビューに適用します。
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/layers" />
オフセットを増加させて画像を重ねると、以下のようになります。
- 関連ドキュメント:
状態リスト
StateListDrawable
は XML 内に定義されるドローアブル オブジェクトで、オブジェクトの状態に応じて、同一のグラフィックに異なる画像を使用します。たとえば、Button
ウィジェットは複数の状態(押下状態、フォーカス状態、どちらでもない状態)をとりますが、状態リストのドローアブルを使用すると、状態に応じて異なる背景画像を使うことが可能です。
状態リストは XML ファイル内に記載できます。それぞれのグラフィックは、1 つの <selector>
要素内にある <item>
要素で表されます。各 <item>
では、様々な属性を使用してドローアブル用のグラフィックを使用する状態を指定します。
状態が変化すると、リストを上から順に評価して、現在の状態に一致する最初のアイテムを使用します。つまり、適用するのはベストマッチするものではなく、その状態の最低限の基準を満たす最初のアイテムです。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
StateListDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_hovered=["true" | "false"] android:state_selected=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_activated=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector>
- 要素:
- 例:
res/drawable/button.xml
に保存された XML ファイル:<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <!-- focused --> <item android:state_hovered="true" android:drawable="@drawable/button_focused" /> <!-- hovered --> <item android:drawable="@drawable/button_normal" /> <!-- default --> </selector>
以下のレイアウト XML で状態リストのドローアブルをボタンに適用します。
<Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@drawable/button" />
- 関連ドキュメント:
レベルリスト
切り替え可能な複数のドローアブルを管理するドローアブルで、各ドローアブルには最大値が指定されます。setLevel()
でドローアブルのレベル値を設定すると、このメソッドに渡された値より大きい、または等しい android:maxLevel
値を持つドローアブル リソースが読み込まれます。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
LevelListDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/drawable_resource" android:maxLevel="integer" android:minLevel="integer" /> </level-list>
- 要素:
- 例:
-
<?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/status_off" android:maxLevel="0" /> <item android:drawable="@drawable/status_on" android:maxLevel="1" /> </level-list>
View
に割り当てた後は、setLevel()
またはsetImageLevel()
でレベルを変更できます。 - 関連ドキュメント:
トランジション ドローアブル
TransitionDrawable
は、2 つのドローアブル リソース間をクロスフェードできるドローアブル オブジェクトです。
各ドローアブルは、1 つの <transition>
要素内にある <item>
要素で表されます。3 つ以上のアイテムはサポートされません。次のドローアブルに遷移するには、startTransition()
を呼び出します。遷移を元に戻すには、reverseTransition()
を呼び出します。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
TransitionDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </transition>
- 要素:
- 例:
res/drawable/transition.xml
に保存された XML ファイル:<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/on" /> <item android:drawable="@drawable/off" /> </transition>
以下のレイアウト XML でドローアブルをビューに適用します。
<ImageButton android:id="@+id/button" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/transition" />
次のコードでは、1 つ目のアイテムから 2 つ目のアイテムの間に 500 ミリ秒かけて遷移します。
Kotlin
val button: ImageButton = findViewById(R.id.button) val drawable: Drawable = button.drawable if (drawable is TransitionDrawable) { drawable.startTransition(500) }
Java
ImageButton button = (ImageButton) findViewById(R.id.button); Drawable drawable = button.getDrawable(); if (drawable instanceof TransitionDrawable) { ((TransitionDrawable) drawable).startTransition(500); }
- 関連ドキュメント:
インセット ドローアブル
XML 内に定義され、指定の距離で別のドローアブルを挿入するドローアブルです。ビューが、それ自体の領域よりも小さいバックグラウンドを必要とする場合に便利です。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
InsetDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:insetTop="dimension" android:insetRight="dimension" android:insetBottom="dimension" android:insetLeft="dimension" />
- 要素:
- 例:
-
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/background" android:insetTop="10dp" android:insetLeft="10dp" />
- 関連ドキュメント:
クリップ ドローアブル
XML 内で定義され、ドローアブルの現在のレベル値に応じて別のドローアブルを切り取るドローアブルです。レベルに基づいて子ドローアブルをどの程度の幅や高さで切り取るか、同様にグラビティーに基づいて子ドローアブルをコンテナ全体のどの位置に配置するかを制御します。進捗バーなどを実装する際に多く使われます。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
ClipDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:clipOrientation=["horizontal" | "vertical"] android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] />
- 要素:
- 例:
res/drawable/clip.xml
に保存された XML ファイル:<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android" android:clipOrientation="horizontal" android:gravity="left" />
次のレイアウト XML でクリップ ドローアブルをビューに適用します。
<ImageView android:id="@+id/image" android:background="@drawable/clip" android:layout_height="wrap_content" android:layout_width="wrap_content" />
次のコードではドローアブルを取得し、切り取りのレベルを上げることで、画像が少しずつ見えるようにしています。
Kotlin
val imageview: ImageView = findViewById(R.id.image) val drawable: Drawable = imageview.background if (drawable is ClipDrawable) { drawable.level = drawable.level + 1000 }
Java
ImageView imageview = (ImageView) findViewById(R.id.image); Drawable drawable = imageview.getBackground(); if (drawable instanceof CLipDrawable) { ((ClipDrawable)drawable).setLevel(drawable.getLevel() + 1000); }
レベルを上げると、切り取る量が減るため、画像が少しずつ表示されます。これはレベル 7,000 の状態です。
注:デフォルトは 0 です。全体が切り取られているため画像は見えません。レベルが 10,000 になると、画像は切り取られないため完全に表示されます。
- 関連ドキュメント:
スケール ドローアブル
XML 内で定義され、ドローアブルの現在のレベル値に応じて別のドローアブルのサイズを変更するドローアブル。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
ScaleDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:scaleHeight="percentage" android:scaleWidth="percentage" />
- 要素:
- 例:
-
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/logo" android:scaleGravity="center_vertical|center_horizontal" android:scaleHeight="80%" android:scaleWidth="80%" />
- 関連ドキュメント:
シェイプ ドローアブル
XML 内で定義される一般的な図形です。
- ファイルの場所:
res/drawable/filename.xml
ファイル名はリソース ID として使用されます。- コンパイルされるリソースのデータ型:
GradientDrawable
へのリソース ポインタ。- リソースの参照:
-
Java の場合:
R.drawable.filename
XML の場合:@[package:]drawable/filename
- 構文:
-
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="float" android:centerY="float" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:useLevel=["true" | "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> </shape>
- 要素:
- 例:
res/drawable/gradient_box.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"/> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape>
次のレイアウト XML で図形ドローアブルをビューに適用します。
<TextView android:background="@drawable/gradient_box" android:layout_height="wrap_content" android:layout_width="wrap_content" />
このアプリのコードでシェイプ ドローアブルを取得して、ビューに適用します。
Kotlin
val shape: Drawable? =
getDrawable
(resources
, R.drawable.gradient_box,getTheme()
) val tv: TextView = findViewById(R.id.textview) tv.background = shapeJava
Resources res =
getResources()
; Drawable shape = ResourcesCompat.getDrawable
(res, R.drawable.gradient_box,getTheme()
); TextView tv = (TextView)findViewById(R.id.textview); tv.setBackground(shape);- 関連ドキュメント: