ドローアブル リソースは、画面に描画可能なグラフィックを示す一般的な概念です。getDrawable(int)
などの API を使用して取得することも、android:drawable
や android:icon
などの属性を持つ別の XML リソースに適用することもできます。ドローアブルには次のような種類があります。
- ビットマップ ファイル
- ビットマップ グラフィック ファイル(PNG、WEBP、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 はビットマップ ファイルの形式として、PNG(推奨)、WEBP(推奨。API レベル 17 以上が必要)、JPG(許容)、GIF(非推奨)をサポートしています。
ファイル名をリソース ID として、ビットマップ ファイルを直接参照するか、XML 内でエイリアス リソース ID を作成します。
注: ビットマップ ファイルは、ビルドプロセス時、aapt
ツールによって可逆画像圧縮で自動的に最適化されます。たとえば、256 色を超える色を必要としないトゥルーカラーの PNG を、カラーパレットを使用する 8 ビットの PNG に変換できます。これにより、画質を変えずにメモリ使用量を少なくできます。
その結果、このディレクトリに配置された画像バイナリは、ビルド時に変更される可能性があります。画像をビットマップに変換するためにビット ストリームとして読み込む場合は、代わりに画像を res/raw/
フォルダに保存し、最適化されないようにします。
ビットマップ ファイル
ビットマップ ファイルは、PNG、WEBP、JPG、GIF 形式のファイルです。これらのファイルを res/drawable/
ディレクトリに保存すると、Android ではこれらのファイルについて Drawable
リソースを作成します。
- ファイルの場所:
res/drawable/filename.png
(.png
、.webp
、.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>
要素の子要素として使用できます。たとえば、状態リストまたはレイヤリストを作成する場合には、<item>
要素から android:drawable
属性を除外して、ドローアブル アイテムを定義する <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
は PNG 画像であり、ビュー内のコンテンツが通常の画像境界を超えた場合に Android がスケーリングする伸縮可能領域を定義できます。このタイプの画像は通常、少なくとも 1 つのディメンションが "wrap_content"
に設定されたビューの背景として割り当てます。
ビューがコンテンツに合わせて拡大すると、9-patch 画像もビューのサイズに合わせてスケーリングされます。9-patch 画像の使用例としては、Android の標準 Button
ウィジェットで使用される背景があります。これは、ボタン内のテキスト(または画像)に合わせて拡大する必要があり、9-patch が適しています。
通常のビットマップと同様に、9-patch ファイルを直接、または XML で定義されたリソースから参照できます。
伸縮可能領域を指定して 9-patch ファイルを作成する方法について詳しくは、サイズ変更可能なビットマップ(9-patch ファイル)を作成するをご覧ください。
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 は、9-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>
要素で表します。使用できるアイテムは 2 つまでです。前方に遷移させるには 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" />
次のコードは、最初のアイテムから 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:src="@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);- 関連項目: