A drawable resource is a general concept for a graphic that can be drawn to the screen and which you can retrieve with APIs such as [getDrawable(int)](https://developer.android.google.cn/reference/android/content/res/Resources#getDrawable(int)) or apply to another XML resource with attributes such as android:drawable and android:icon. There are several different types of drawables:
- [Bitmap File](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Bitmap)
- A bitmap graphic file (`.png`, `.webp`, `.jpg`, or `.gif`). Creates a `[BitmapDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/BitmapDrawable)`.
- [Nine-Patch File](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#NinePatch)
- A PNG file with stretchable regions to allow image resizing based on content (`.9.png`). Creates a `[NinePatchDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/NinePatchDrawable)`.
- [Layer List](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#LayerList)
- A Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is be drawn on top. Creates a `[LayerDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LayerDrawable)`.
- [State List](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#StateList)
- An XML file that references different bitmap graphics for different states (for example, to use a different image when a button is pressed). Creates a `[StateListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/StateListDrawable)`.
- [Level List](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#LevelList)
- An XML file that defines a drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Creates a `[LevelListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LevelListDrawable)`.
- [Transition Drawable](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Transition)
- An XML file that defines a drawable that can cross-fade between two drawable resources. Creates a `[TransitionDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable)`.
- [Inset Drawable](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Inset)
- An XML file that defines a drawable that insets another drawable by a specified distance. This is useful when a View needs a background drawable that is smaller than the View's actual bounds.
- [Clip Drawable](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Clip)
- An XML file that defines a drawable that clips another Drawable based on this Drawable's current level value. Creates a `[ClipDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ClipDrawable)`.
- [Scale Drawable](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Scale)
- An XML file that defines a drawable that changes the size of another Drawable based on its current level value. Creates a `[ScaleDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ScaleDrawable)`
- [Shape Drawable](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#Shape)
- An XML file that defines a geometric shape, including colors and gradients. Creates a `[GradientDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/GradientDrawable)`.
Also see the Animation Resource document for how to create an [AnimationDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/AnimationDrawable).
Note: A color resource can also be used as a drawable in XML. For example, when creating a state list drawable, you can reference a color resource for the android:drawable attribute (android:drawable="@color/green").
Bitmap
A bitmap image. Android supports bitmap files in the following formats: .png (preferred), ,webp (preferred, requires API level 17 or higher), .jpg (acceptable), .gif (discouraged).
You can reference a bitmap file directly, using the filename as the resource ID, or create an alias resource ID in XML.
Note: Bitmap files may be automatically optimized with lossless image compression by the aapt tool during the build process. For example, a true-color PNG that does not require more than 256 colors may be converted to an 8-bit PNG with a color palette. This will result in an image of equal quality but which requires less memory. So be aware that the image binaries placed in this directory can change during the build. If you plan on reading an image as a bit stream in order to convert it to a bitmap, put your images in the res/raw/ folder instead, where they will not be optimized.
Bitmap file
A bitmap file is a .png, .webp, .jpg, or .gif file. Android creates a [Drawable](https://developer.android.google.cn/reference/android/graphics/drawable/Drawable) resource for any of these files when you save them in the res/drawable/ directory.
- file location:
- `res/drawable/*filename*.png` (`.png`, `.webp`, `.jpg`, or `.gif`) The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[BitmapDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/BitmapDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- example:
- With an image saved at `res/drawable/myimage.png`, this layout XML applies the image to a View: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
The following application code retrieves the image as a
[Drawable](https://developer.android.google.cn/reference/android/graphics/drawable/Drawable):KotlinJava <devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
val drawable: Drawable? = ResourcesCompat."); --devsite-code-border:0; --devsite-code-border-radius:0; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: 0px -23px; overflow: hidden; position: relative; direction: ltr !important; --devsite-content-border-radius:0 0 8px 8px;">val drawable: Drawable? = ResourcesCompat.[getDrawable](https://developer.android.google.cn/reference/androidx/core/content/res/ResourcesCompat#getDrawable(android.content.res.Resources,%20int,%20android.content.res.Resources.Theme))(resources, R.drawable.myimage, null)(resources, R.drawable.myimage, null) - see also:
-
- 2D Graphics
[BitmapDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/BitmapDrawable)
XML bitmap
An XML bitmap is a resource defined in XML that points to a bitmap file. The effect is an alias for a raw bitmap file. The XML can specify additional properties for the bitmap such as dithering and tiling.
Note: You can use a <bitmap> element as a child of an <item> element. For example, when creating a state list or layer list, you can exclude the android:drawable attribute from an <item> element and nest a <bitmap> inside it that defines the drawable item.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[BitmapDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/BitmapDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[bitmap](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#bitmap-element) 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"] /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- see also:
-
[BitmapDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/BitmapDrawable)- Creating alias resources
Nine-Patch
A [NinePatch](https://developer.android.google.cn/reference/android/graphics/NinePatch) is a PNG image in which you can define stretchable regions that Android scales when content within the View exceeds the normal image bounds. You typically assign this type of image as the background of a View that has at least one dimension set to "wrap_content", and when the View grows to accommodate the content, the Nine-Patch image is also scaled to match the size of the View. An example use of a Nine-Patch image is the background used by Android's standard [Button](https://developer.android.google.cn/reference/android/widget/Button) widget, which must stretch to accommodate the text (or image) inside the button.
Same as with a normal bitmap, you can reference a Nine-Patch file directly or from a resource defined by XML.
For a complete discussion about how to create a Nine-Patch file with stretchable regions, see the 2D Graphics document.
Nine-patch file
- file location:
- `res/drawable/*filename*.9.png` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[NinePatchDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/NinePatchDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- example:
- With an image saved at `res/drawable/myninepatch.9.png`, this layout XML applies the Nine-Patch to a View: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: ; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- see also:
-
- 2D Graphics
[NinePatchDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/NinePatchDrawable)
XML Nine-Patch
An XML Nine-Patch is a resource defined in XML that points to a Nine-Patch file. The XML can specify dithering for the image.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[NinePatchDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/NinePatchDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[nine-patch](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#ninepatch-element) xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/*drawable_resource*" android:dither=["true" | "false"] /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
Layer list
A [LayerDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LayerDrawable) is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.
Each drawable is represented by an <item> element inside a single <layer-list> element.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[LayerDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LayerDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[layer-list](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#layerlist-element) xmlns:android="http://schemas.android.com/apk/res/android" > <[item](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#layerlist-item-element) android:drawable="@[package:]drawable/*drawable_resource*" android:id="@[+][*package*:]id/*resource_name*" android:top="*dimension*" android:right="*dimension*" android:bottom="*dimension*" android:left="*dimension*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- XML file saved at `res/drawable/layers.xml`: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
Notice that this example uses a nested
<bitmap>element to define the drawable resource for each item with a "center" gravity. This ensures that none of the images are scaled to fit the size of the container, due to resizing caused by the offset images.This layout XML applies the drawable to a View:
<devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
"); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">The result is a stack of increasingly offset images:
[图片上传失败...(image-574c92-1678947221557)]
- see also:
-
[LayerDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LayerDrawable)
State list
A [StateListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/StateListDrawable) is a drawable object defined in XML that uses a several different images to represent the same graphic, depending on the state of the object. For example, a [Button](https://developer.android.google.cn/reference/android/widget/Button) widget can exist in one of several different states (pressed, focused, or neither) and, using a state list drawable, you can provide a different background image for each state.
You can describe the state list in an XML file. Each graphic is represented by an <item> element inside a single <selector> element. Each <item> uses various attributes to describe the state in which it should be used as the graphic for the drawable.
During each state change, the state list is traversed top to bottom and the first item that matches the current state is used—the selection is not based on the "best match," but simply the first item that meets the minimum criteria of the state.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[StateListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/StateListDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[selector](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#selector-element) xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <[item](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#item-element) 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"] /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- XML file saved at `res/drawable/button.xml`: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
This layout XML applies the state list drawable to a Button:
<devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
"); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: ; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;"> - see also:
-
[StateListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/StateListDrawable)
Level list
A Drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Setting the level value of the drawable with [setLevel()](https://developer.android.google.cn/reference/android/graphics/drawable/Drawable#setLevel(int)) loads the drawable resource in the level list that has a android:maxLevel value greater than or equal to the value passed to the method.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[LevelListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LevelListDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[level-list](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#levellist-element) xmlns:android="http://schemas.android.com/apk/res/android" > <[item](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#levellist-item-element) android:drawable="@drawable/*drawable_resource*" android:maxLevel="*integer*" android:minLevel="*integer*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: ; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
Once this is applied to a
[View](https://developer.android.google.cn/reference/android/view/View), the level can be changed with[setLevel()](https://developer.android.google.cn/reference/android/graphics/drawable/Drawable#setLevel(int))or[setImageLevel()](https://developer.android.google.cn/reference/android/widget/ImageView#setImageLevel(int)). - see also:
-
[LevelListDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/LevelListDrawable)
Transition drawable
A [TransitionDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable) is a drawable object that can cross-fade between the two drawable resources.
Each drawable is represented by an <item> element inside a single <transition> element. No more than two items are supported. To transition forward, call [startTransition()](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable#startTransition(int)). To transition backward, call [reverseTransition()](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable#reverseTransition(int)).
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[TransitionDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[transition](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#transition-element) xmlns:android="http://schemas.android.com/apk/res/android" > <[item](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#transition-item-element) android:drawable="@[package:]drawable/*drawable_resource*" android:id="@[+][*package*:]id/*resource_name*" android:top="*dimension*" android:right="*dimension*" android:bottom="*dimension*" android:left="*dimension*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- XML file saved at `res/drawable/transition.xml`: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
This layout XML applies the drawable to a View:
<devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
"); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">And the following code performs a 500ms transition from the first item to the second:
KotlinJava <devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
val button: ImageButton = findViewById(R.id.button) val drawable: Drawable = button.drawable if (drawable is TransitionDrawable) { drawable.startTransition(500) }"); --devsite-code-border:0; --devsite-code-border-radius:0; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: 0px -23px; overflow: hidden; position: relative; direction: ltr !important; --devsite-content-border-radius:0 0 8px 8px;"> - see also:
-
[TransitionDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/TransitionDrawable)
Inset drawable
A drawable defined in XML that insets another drawable by a specified distance. This is useful when a View needs a background that is smaller than the View's actual bounds.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[InsetDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/InsetDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[inset](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#inset-element) 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*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- see also:
-
[InsetDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/InsetDrawable)
Clip drawable
A drawable defined in XML that clips another drawable based on this Drawable's current level. You can control how much the child drawable gets clipped in width and height based on the level, as well as a gravity to control where it is placed in its overall container. Most often used to implement things like progress bars.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[ClipDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ClipDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[clip](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#clip-element) 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"] /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- XML file saved at `res/drawable/clip.xml`: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
The following layout XML applies the clip drawable to a View:
<devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
"); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">The following code gets the drawable and increases the amount of clipping in order to progressively reveal the image:
KotlinJava <devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
val imageview: ImageView = findViewById(R.id.image) val drawable: Drawable = imageview.background if (drawable is ClipDrawable) { drawable.level = drawable.level + 1000 }"); --devsite-code-border:0; --devsite-code-border-radius:0; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: 0px -23px; overflow: hidden; position: relative; direction: ltr !important; --devsite-content-border-radius:0 0 8px 8px;">Increasing the level reduces the amount of clipping and slowly reveals the image. Here it is at a level of 7000:
[图片上传失败...(image-9a465-1678947221557)]
Note: The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.
- see also:
-
[ClipDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ClipDrawable)
Scale drawable
A drawable defined in XML that changes the size of another drawable based on its current level.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[ScaleDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ScaleDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[scale](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#scale-element) 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*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- see also:
-
[ScaleDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ScaleDrawable)
Shape drawable
This is a generic shape defined in XML.
- file location:
- `res/drawable/*filename*.xml` The filename is used as the resource ID.
- compiled resource datatype:
- Resource pointer to a `[GradientDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/GradientDrawable)`.
- resource reference:
- In Java: `R.drawable.*filename*` In XML: `@[*package*:]drawable/*filename*`
- syntax:
- <[shape](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#shape-element) xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <[corners](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#corners-element) android:radius="*integer*" android:topLeftRadius="*integer*" android:topRightRadius="*integer*" android:bottomLeftRadius="*integer*" android:bottomRightRadius="*integer*" /> <[gradient](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#gradient-element) 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](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#padding-element) android:left="*integer*" android:top="*integer*" android:right="*integer*" android:bottom="*integer*" /> <[size](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#size-element) android:width="*integer*" android:height="*integer*" /> <[solid](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#solid-element) android:color="*color*" /> <[stroke](https://developer.android.google.cn/guide/topics/resources/drawable-resource?hl=en#stroke-element) android:width="*integer*" android:color="*color*" android:dashWidth="*integer*" android:dashGap="*integer*" /> "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin-top: 0px; margin-right: ; margin-bottom: 0px; margin-left: ; overflow: hidden; position: relative; direction: ltr !important;">
- elements:
- example:
- XML file saved at `res/drawable/gradient_box.xml`: "); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">
This layout XML applies the shape drawable to a View:
<devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
"); --devsite-code-border:var(--devsite-secondary-border); --devsite-code-border-radius:8px; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: var(--devsite-code-margin,16px 0); overflow: hidden; position: relative; direction: ltr !important;">This application code gets the shape drawable and applies it to a View:
KotlinJava <devsite-code data-copy-event-label="" style="box-sizing: inherit; --devsite-code-background:#f8f9fa; --devsite-code-color:#37474f; --devsite-var-color:#d01884; --devsite-code-buttons-toggle-dark-display:inline; --devsite-code-buttons-toggle-light-display:none; --devsite-code-comments-color:#b80672; --devsite-code-keywords-color:#1967d2; --devsite-code-numbers-color:#c5221f; --devsite-code-strings-color:#188038; --devsite-code-types-color:#9334e6; --devsite-github-link-icon:url("data:image/svg+xml;utf8,<svg xmlns="www.w3.org/2000/svg\" viewBox="0 0 18 18">
val shape: Drawable? ="); --devsite-code-border:0; --devsite-code-border-radius:0; --devsite-code-margin:32px 0; border: var(--devsite-code-border,0); border-radius: var(--devsite-code-border-radius,0); clear: both; display: block; margin: 0px -23px; overflow: hidden; position: relative; direction: ltr !important; --devsite-content-border-radius:0 0 8px 8px;">val shape: Drawable? = [getDrawable](https://developer.android.google.cn/reference/androidx/core/content/res/ResourcesCompat#getDrawable(android.content.res.Resources,%20int,%20android.content.res.Resources.Theme))([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape(val shape: Drawable? = val shape: Drawable? = [getDrawable](https://developer.android.google.cn/reference/androidx/core/content/res/ResourcesCompat#getDrawable(android.content.res.Resources,%20int,%20android.content.res.Resources.Theme))([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape ([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape, R.drawable.gradient_box,val shape: Drawable? = val shape: Drawable? = [getDrawable](https://developer.android.google.cn/reference/androidx/core/content/res/ResourcesCompat#getDrawable(android.content.res.Resources,%20int,%20android.content.res.Resources.Theme))([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape (val shape: Drawable? = val shape: Drawable? = [getDrawable](https://developer.android.google.cn/reference/androidx/core/content/res/ResourcesCompat#getDrawable(android.content.res.Resources,%20int,%20android.content.res.Resources.Theme))([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape ([resources](https://developer.android.google.cn/reference/android/content/Context#getResources()), R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape , R.drawable.gradient_box, [getTheme()](https://developer.android.google.cn/reference/android/content/Context#getTheme())) val tv: TextView = findViewById(R.id.textview) tv.background = shape) val tv: TextView = findViewById(R.id.textview) tv.background = shape - see also:
-
[ShapeDrawable](https://developer.android.google.cn/reference/android/graphics/drawable/ShapeDrawable)