1page.title=Drawable Resources 2parent.title=Resource Types 3parent.link=available-resources.html 4@jd:body 5 6<div id="qv-wrapper"> 7 <div id="qv"> 8 <h2>See also</h2> 9 <ol> 10 <li><a href="{@docRoot}guide/topics/graphics/2d-graphics.html">2D Graphics</a></li> 11 </ol> 12 </div> 13</div> 14 15<p>A drawable resource is a general concept for a graphic that can be drawn to the screen and which 16you can retrieve with APIs such as {@link android.content.res.Resources#getDrawable(int)} or apply 17to another XML resource with attributes such as {@code android:drawable} and {@code android:icon}. 18There are several different types of drawables:</p> 19<dl> 20 <dt><a href="#Bitmap">Bitmap File</a><dt> 21 <dd>A bitmap graphic file ({@code .png}, {@code .jpg}, or {@code .gif}). 22 Creates a {@link android.graphics.drawable.BitmapDrawable}.</dd> 23 <dt><a href="#NinePatch">Nine-Patch File</a></dt> 24 <dd>A PNG file with stretchable regions to allow image resizing based on content ({@code 25.9.png}). Creates a {@link android.graphics.drawable.NinePatchDrawable}.</dd> 26 <dt><a href="#LayerList">Layer List</a></dt> 27 <dd>A Drawable that manages an array of other Drawables. These are drawn in array order, so the 28element with the largest index is be drawn on top. Creates a {@link 29android.graphics.drawable.LayerDrawable}.</dd> 30 <dt><a href="#StateList">State List</a></dt> 31 <dd>An XML file that references different bitmap graphics 32 for different states (for example, to use a different image when a button is pressed). 33 Creates a {@link android.graphics.drawable.StateListDrawable}.</dd> 34 <dt><a href="#LevelList">Level List</a></dt> 35 <dd>An XML file that defines a drawable that manages a number of alternate Drawables, each 36assigned a maximum numerical value. Creates a {@link 37android.graphics.drawable.LevelListDrawable}.</dd> 38 <dt><a href="#Transition">Transition Drawable</a></dt> 39 <dd>An XML file that defines a drawable that can cross-fade between two drawable resources. 40Creates a {@link android.graphics.drawable.TransitionDrawable}.</dd> 41 <dt><a href="#Inset">Inset Drawable</a></dt> 42 <dd>An XML file that defines a drawable that insets another drawable by a specified distance. 43This is useful when a View needs a background drawble that is smaller than the View's actual 44bounds.</dd> 45 <dt><a href="#Clip">Clip Drawable</a></dt> 46 <dd>An XML file that defines a drawable that clips another Drawable based on this Drawable's 47current level value. Creates a {@link android.graphics.drawable.ClipDrawable}.</dd> 48 <dt><a href="#Scale">Scale Drawable</a></dt> 49 <dd>An XML file that defines a drawable that changes the size of another Drawable based on its 50current level value. Creates a {@link android.graphics.drawable.ScaleDrawable}</dd> 51 <dt><a href="#Shape">Shape Drawable</a></dt> 52 <dd>An XML file that defines a geometric shape, including colors and gradients. 53 Creates a {@link android.graphics.drawable.ShapeDrawable}.</dd> 54</dl> 55 56<p>Also see the <a href="animation-resource.html">Animation Resource</a> document for how to 57create an {@link android.graphics.drawable.AnimationDrawable}.</p> 58 59<p class="note"><strong>Note:</strong> A <a 60href="{@docRoot}guide/topics/resources/more-resources.html#Color">color resource</a> can also be 61used as a drawable in XML. For example, when creating a <a href="#StateList">state list 62drawable</a>, you can reference a color resource for the {@code android:drawable} attribute ({@code 63android:drawable="@color/green"}).</p> 64 65 66 67 68<h2 id="Bitmap">Bitmap</h2> 69 70<p>A bitmap image. Android supports bitmap files in a three formats: 71{@code .png} (preferred), {@code .jpg} (acceptable), {@code .gif} (discouraged).</p> 72 73<p>You can reference a bitmap file directly, using the filename as the resource ID, or create an 74alias resource ID in XML.</p> 75 76<p class="note"><strong>Note:</strong> Bitmap files may be automatically optimized with lossless 77image compression by the <code>aapt</code> tool during the build process. For 78example, a true-color PNG that does not require more than 256 colors may be converted to an 8-bit 79PNG with a color palette. This will result in an image of equal quality but which requires less 80memory. So be aware that the image binaries placed in this directory can change during the build. If 81you plan on reading an image as a bit stream in order to convert it to a bitmap, put your images in 82the <code>res/raw/</code> folder instead, where they will not be optimized.</p> 83 84 85<h3 id="BitmapFile">Bitmap File</h3> 86 87<p>A bitmap file is a {@code .png}, {@code .jpg}, or {@code .gif} file. Android creates a {@link 88android.graphics.drawable.Drawable} 89resource for any of these files when you save them in the {@code res/drawable/} directory.</p> 90 91<dl class="xml"> 92 93<dt>file location:</dt> 94<dd><code>res/drawable/<em>filename</em>.png</code> ({@code .png}, {@code .jpg}, or {@code .gif})<br/> 95The filename is used as the resource ID.</dd> 96 97<dt>compiled resource datatype:</dt> 98<dd>Resource pointer to a {@link android.graphics.drawable.BitmapDrawable}.</dd> 99 100<dt>resource reference:</dt> 101<dd> 102In Java: <code>R.drawable.<em>filename</em></code></li><br/> 103In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 104</dd> 105 106<dt>example:</dt> 107 108<dd>With an image saved at <code>res/drawable/myimage.png</code>, this layout XML applies 109the image to a View: 110<pre> 111<ImageView 112 android:layout_height="wrap_content" 113 android:layout_width="wrap_content" 114 android:src="@drawable/myimage" /> 115</pre> 116<p>The following application code retrieves the image as a {@link 117android.graphics.drawable.Drawable}:</p> 118<pre> 119Resources res = {@link android.content.Context#getResources()}; 120Drawable drawable = res.{@link android.content.res.Resources#getDrawable(int) getDrawable}(R.drawable.myimage); 121</pre> 122</dd> 123 124<dt>see also:</dt> 125<dd> 126<ul> 127 <li><a href="{@docRoot}guide/topics/graphics/2d-graphics.html">2D Graphics</a></li> 128 <li>{@link android.graphics.drawable.BitmapDrawable}</li> 129</ul> 130</dd> 131 132</dl> 133 134 135 136 137<h3 id="XmlBitmap">XML Bitmap</h3> 138 139<p>An XML bitmap is a resource defined in XML that points to a bitmap file. The effect is an alias for a 140raw bitmap file. The XML can specify additional properties for the bitmap such as dithering and tiling.</p> 141 142<p class="note"><strong>Note:</strong> You can use a {@code <bitmap>} element as a child of 143an {@code <item>} element. For 144example, when creating a <a href="#StateList">state list</a> or <a href="#LayerList">layer list</a>, 145you can exclude the {@code android:drawable} 146attribute from an {@code <item>} element and nest a {@code <bitmap>} inside it 147that defines the drawable item.</p> 148 149<dl class="xml"> 150 151<dt>file location:</dt> 152<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 153The filename is used as the resource ID.</dd> 154 155<dt>compiled resource datatype:</dt> 156<dd>Resource pointer to a {@link android.graphics.drawable.BitmapDrawable}.</dd> 157 158<dt>resource reference:</dt> 159<dd> 160In Java: <code>R.drawable.<em>filename</em></code></li><br/> 161In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 162</dd> 163 164<dt>syntax:</dt> 165<dd> 166<pre class="stx"> 167<?xml version="1.0" encoding="utf-8"?> 168<<a href="#bitmap-element">bitmap</a> 169 xmlns:android="http://schemas.android.com/apk/res/android" 170 android:src="@[package:]drawable/<em>drawable_resource</em>" 171 android:antialias=["true" | "false"] 172 android:dither=["true" | "false"] 173 android:filter=["true" | "false"] 174 android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | 175 "fill_vertical" | "center_horizontal" | "fill_horizontal" | 176 "center" | "fill" | "clip_vertical" | "clip_horizontal"] 177 android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] /> 178</pre> 179</dd> 180 181 182<dt>elements:</dt> 183<dd> 184<dl class="tag-list"> 185 186 <dt id="bitmap-element"><code><bitmap></code></dt> 187 <dd>Defines the bitmap source and its properties. 188 <p class="caps">attributes:</p> 189 <dl class="atn-list"> 190 <dt><code>xmlns:android</code></dt> 191 <dd><em>String</em>. Defines the XML namespace, which must be 192 <code>"http://schemas.android.com/apk/res/android"</code>. This is required only if the 193<code><bitmap></code> is the root element—it is not needed when the 194<code><bitmap></code> is nested inside an <code><item></code>.</dd> 195 <dt><code>android:src</code></dt> 196 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 197resource.</dd> 198 <dt><code>android:antialias</code></dt> 199 <dd><em>Boolean</em>. Enables or disables antialiasing.</dd> 200 <dt><code>android:dither</code></dt> 201 <dd><em>Boolean</em>. Enables or disables dithering of the bitmap if the bitmap does not 202have the same pixel configuration as the screen (for instance: a ARGB 8888 bitmap with an RGB 565 203screen).</dd> 204 <dt><code>android:filter</code></dt> 205 <dd><em>Boolean</em>. Enables or disables bitmap filtering. Filtering is used when the 206bitmap is shrunk or stretched to smooth its apperance.</dd> 207 <dt><code>android:gravity</code></dt> 208 <dd><em>Keyword</em>. Defines the gravity for the bitmap. The gravity indicates where to 209position the drawable in its container if the bitmap is smaller than the container. 210 <p>Must be one or more (separated by '|') of the following constant values:</p> 211<table> 212<tr><th>Value</th><th>Description</th></tr> 213<tr><td><code>top</code></td> 214<td>Put the object at the top of its container, not changing its size.</td></tr> 215<tr><td><code>bottom</code></td> 216<td>Put the object at the bottom of its container, not changing its size. </td></tr> 217<tr><td><code>left</code></td> 218<td>Put the object at the left edge of its container, not changing its size. </td></tr> 219<tr><td><code>right</code></td> 220<td>Put the object at the right edge of its container, not changing its size. </td></tr> 221<tr><td><code>center_vertical</code></td> 222<td>Place object in the vertical center of its container, not changing its size. </td></tr> 223<tr><td><code>fill_vertical</code></td> 224<td>Grow the vertical size of the object if needed so it completely fills its container. </td></tr> 225<tr><td><code>center_horizontal</code></td> 226<td>Place object in the horizontal center of its container, not changing its size. </td></tr> 227<tr><td><code>fill_horizontal</code></td> 228<td>Grow the horizontal size of the object if needed so it completely fills its container. 229</td></tr> 230<tr><td><code>center</code></td> 231<td>Place the object in the center of its container in both the vertical and horizontal axis, not 232changing its size. </td></tr> 233<tr><td><code>fill</code></td> 234<td>Grow the horizontal and vertical size of the object if needed so it completely fills its 235container. This is the default.</td></tr> 236<tr><td><code>clip_vertical</code></td> 237<td>Additional option that can be set to have the top and/or bottom edges of the child clipped to 238its container's bounds. The clip is based on the vertical gravity: a top gravity clips the 239bottom edge, a bottom gravity clips the top edge, and neither clips both edges. 240</td></tr> 241<tr><td><code>clip_horizontal</code></td> 242<td>Additional option that can be set to have the left and/or right edges of the child clipped to 243its container's bounds. The clip is based on the horizontal gravity: a left gravity clips 244the right edge, a right gravity clips the left edge, and neither clips both edges. 245</td></tr> 246</table> 247 </dd> 248 <dt><code>android:tileMode</code></dt> 249 <dd><em>Keyword</em>. Defines the tile mode. When the tile mode is enabled, the bitmap is 250repeated. Gravity is ignored when the tile mode is enabled. 251 <p>Must be one of the following constant values:</p> 252<table> 253<tr><th>Value</th><th>Description</th></tr> 254<tr><td><code>disabled</code></td> 255<td>Do not tile the bitmap. This is the default value.</td></tr> 256<tr><td><code>clamp</code></td> 257<td>Replicates the edge color if the shader draws outside of its original bounds</td></tr> 258<tr><td><code>repeat</code></td> 259<td>Repeats the shader's image horizontally and vertically.</td></tr> 260<tr><td><code>mirror</code></td> 261<td>Repeats the shader's image horizontally and vertically, alternating mirror images so that 262adjacent images always seam.</td></tr> 263</table> 264 265 </dd> 266 </dl> 267 </dd> 268 269</dl> 270</dd> <!-- end elements and attributes --> 271 272<dt>example:</dt> 273<dd> 274<pre> 275<?xml version="1.0" encoding="utf-8"?> 276<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 277 android:src="@drawable/icon" 278 android:tileMode="repeat" /> 279</pre> 280 281</dd> 282 283<dt>see also:</dt> 284<dd> 285<ul> 286 <li>{@link android.graphics.drawable.BitmapDrawable}</li> 287 <li><a href="{@docRoot}guide/topics/resources/providing-resources.html#AliasResources">Creating 288alias resources</a> 289</ul> 290</dd> 291 292</dl> 293 294 295 296 297 298 299<h2 id="NinePatch">Nine-Patch</h2> 300 301<p>A {@link android.graphics.NinePatch} is a PNG image in which you can define stretchable regions 302that Android scales when content within the View exceeds the normal image bounds. You 303typically assign this type of image as the background of a View that has at least one dimension set 304to {@code "wrap_content"}, and when the View grows to accomodate the content, the Nine-Patch image 305is also scaled to match the size of the View. An example use of a Nine-Patch image is the 306background used by Android's standard {@link android.widget.Button} widget, which must stretch to 307accommodate the text (or image) inside the button.</p> 308 309<p>Same as with a normal <a href="#Bitmap">bitmap</a>, you can reference a Nine-Patch file directly 310or from a resource defined by XML.</p> 311 312<p>For a complete discussion about how to create a Nine-Patch file with stretchable regions, 313see the <a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">2D Graphics</a> 314document.</p> 315 316 317<h3 id="NinePatchFile">Nine-Patch File</h3> 318 319<dl class="xml"> 320 321<dt>file location:</dt> 322<dd><code>res/drawable/<em>filename</em>.9.png</code><br/> 323The filename is used as the resource ID.</dd> 324 325<dt>compiled resource datatype:</dt> 326<dd>Resource pointer to a {@link android.graphics.drawable.NinePatchDrawable}.</dd> 327 328<dt>resource reference:</dt> 329 330<dd> 331In Java: <code>R.drawable.<em>filename</em></code><br/> 332In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 333</dd> 334 335<dt>example:</dt> 336 337<dd>With an image saved at <code>res/drawable/myninepatch.9.png</code>, this layout XML 338applies the Nine-Patch to a View: 339<pre> 340<Button 341 android:layout_height="wrap_content" 342 android:layout_width="wrap_content" 343 android:background="@drawable/myninepatch" /> 344</pre> 345</dd> 346 347<dt>see also:</dt> 348 349<dd> 350<ul> 351 <li><a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">2D Graphics</a></li> 352 <li>{@link android.graphics.drawable.NinePatchDrawable}</li> 353</ul> 354</dd> 355 356</dl> 357 358 359 360 361<h3 id="NinePatchXml">XML Nine-Patch</h3> 362 363<p>An XML Nine-Patch is a resource defined in XML that points to a Nine-Patch file. The XML can 364specify dithering for the image.</p> 365 366<dl class="xml"> 367 368<dt>file location:</dt> 369<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 370The filename is used as the resource ID.</dd> 371 372<dt>compiled resource datatype:</dt> 373<dd>Resource pointer to a {@link android.graphics.drawable.NinePatchDrawable}.</dd> 374 375<dt>resource reference:</dt> 376 377<dd> 378In Java: <code>R.drawable.<em>filename</em></code><br/> 379In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 380</dd> 381 382 383<dt>syntax:</dt> 384 385<dd> 386<pre class="stx"> 387<?xml version="1.0" encoding="utf-8"?> 388<<a href="#ninepatch-element">nine-patch</a> 389 xmlns:android="http://schemas.android.com/apk/res/android" 390 android:src="@[package:]drawable/<em>drawable_resource</em>" 391 android:dither=["true" | "false"] /> 392</pre> 393</dd> 394 395 396<dt>elements:</dt> 397 398<dd> 399<dl class="tag-list"> 400 401 <dt id="ninepatch-element"><code><nine-patch></code></dt> 402 <dd>Defines the Nine-Patch source and its properties. 403 <p class="caps">attributes:</p> 404 <dl class="atn-list"> 405 <dt><code>xmlns:android</code></dt> 406 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 407 <code>"http://schemas.android.com/apk/res/android"</code>. 408 <dt><code>android:src</code></dt> 409 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a Nine-Patch 410file.</dd> 411 <dt><code>android:dither</code></dt> 412 <dd><em>Boolean</em>. Enables or disables dithering of the bitmap if the bitmap does not 413have the same pixel configuration as the screen (for instance: a ARGB 8888 bitmap with an RGB 565 414screen).</dd> 415 </dl> 416 </dd> 417</dl> 418</dd> 419 420 421<dt>example:</dt> 422 423<dd> 424<pre class="stx"> 425<?xml version="1.0" encoding="utf-8"?> 426<nine-patch xmlns:android="http://schemas.android.com/apk/res/android" 427 android:src="@drawable/myninepatch" 428 android:dither="false" /> 429</pre> 430</dd> 431</dl> 432 433 434 435 436 437 438<h2 id="LayerList">Layer List</h2> 439 440<p>A {@link android.graphics.drawable.LayerDrawable} is a drawable object 441that manages an array of other drawables. Each drawable in the list is drawn in the order of the 442list—the last drawable in the list is drawn on top.</p> 443 444<p>Each drawable is represented by an {@code <item>} element inside a single {@code 445<layer-list>} element.</p> 446 447<dl class="xml"> 448 449<dt>file location:</dt> 450<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 451The filename is used as the resource ID.</dd> 452 453<dt>compiled resource datatype:</dt> 454<dd>Resource pointer to a {@link android.graphics.drawable.LayerDrawable}.</dd> 455 456<dt>resource reference:</dt> 457 458<dd> 459In Java: <code>R.drawable.<em>filename</em></code><br/> 460In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 461</dd> 462 463<dt>syntax:</dt> 464 465<dd> 466<pre class="stx"> 467<?xml version="1.0" encoding="utf-8"?> 468<<a href="#layerlist-element">layer-list</a> 469 xmlns:android="http://schemas.android.com/apk/res/android" > 470 <<a href="#layerlist-item-element">item</a> 471 android:drawable="@[package:]drawable/<em>drawable_resource</em>" 472 android:id="@[+][<em>package</em>:]id/<i>resource_name</i>" 473 android:top="<em>dimension</em>" 474 android:right="<em>dimension</em>" 475 android:bottom="<em>dimension</em>" 476 android:left="<em>dimension</em>" /> 477</layer-list> 478</pre> 479</dd> 480 481<dt>elements:</dt> 482 483<dd> 484<dl class="tag-list"> 485 486 <dt id="layerlist-element"><code><layer-list></code></dt> 487 <dd><strong>Required.</strong> This must be the root element. Contains one or more {@code 488<item>} elements. 489 <p class="caps">attributes:</p> 490 <dl class="atn-list"> 491 <dt><code>xmlns:android</code></dt> 492 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 493 <code>"http://schemas.android.com/apk/res/android"</code>. 494 </dl> 495 </dd> 496 <dt id="layerlist-item-element"><code><item></code></dt> 497 <dd>Defines a drawable to place in the layer drawable, in a position defined by its attributes. 498Must be a child of a <code><selector></code> element. Accepts child {@code <bitmap>} 499elements. 500 <p class="caps">attributes:</p> 501 <dl class="atn-list"> 502 <dt><code>android:drawable</code></dt> 503 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 504resource.</dd> 505 <dt><code>android:id</code></dt> 506 <dd><em>Resource ID</em>. A unique resource ID for this drawable. To create a new resource 507ID for this item, use the form: 508<code>"@+id/<em>name</em>"</code>. The plus symbol indicates that this should be created as a new 509ID. You can use this identifier to 510retrieve and modify the drawable with {@link android.view.View#findViewById(int) 511View.findViewById()} or {@link android.app.Activity#findViewById(int) Activity.findViewById()}.</dd> 512 <dt><code>android:top</code></dt> 513 <dd><em>Integer</em>. The top offset in pixels.</dd> 514 <dt><code>android:right</code></dt> 515 <dd><em>Integer</em>. The right offset in pixels.</dd> 516 <dt><code>android:bottom</code></dt> 517 <dd><em>Integer</em>. The bottom offset in pixels.</dd> 518 <dt><code>android:left</code></dt> 519 <dd><em>Integer</em>. The left offset in pixels.</dd> 520 </dl> 521 <p>All drawable items are scaled to fit the size of the containing View, by default. Thus, 522placing your images in a layer list at different positions might increase the size of the View and 523some images scale as appropriate. To avoid 524scaling items in the list, use a {@code <bitmap>} element inside the {@code 525<item>} element to specify the drawable and define the gravity to something that does not 526scale, such as {@code "center"}. For example, the following {@code <item>} defines an item 527that scales to fit its container View:</p> 528<pre> 529<item android:drawable="@drawable/image" /> 530</pre> 531 532<p>To avoid scaling, the following example uses a {@code <bitmap>} element with centered 533gravity:</p> 534<pre> 535<item> 536 <bitmap android:src="<b>@drawable/image</b>" 537 android:gravity="center" /> 538</item> 539</pre> 540 </dd> 541 542</dl> 543</dd> <!-- end elements and attributes --> 544 545<dt>example:</dt> 546 547<dd>XML file saved at <code>res/drawable/layers.xml</code>: 548<pre> 549<?xml version="1.0" encoding="utf-8"?> 550<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 551 <item> 552 <bitmap android:src="@drawable/android_red" 553 android:gravity="center" /> 554 </item> 555 <item android:top="10dp" android:left="10dp"> 556 <bitmap android:src="@drawable/android_green" 557 android:gravity="center" /> 558 </item> 559 <item android:top="20dp" android:left="20dp"> 560 <bitmap android:src="@drawable/android_blue" 561 android:gravity="center" /> 562 </item> 563</layer-list> 564</pre> 565<p>Notice that this example uses a nested {@code <bitmap>} element to define the drawable 566resource for each item with a "center" gravity. This ensures that none of the images are scaled to 567fit the size of the container, due to resizing caused by the offset images.</p> 568 569<p>This layout XML applies the drawable to a View:</p> 570<pre> 571<ImageView 572 android:layout_height="wrap_content" 573 android:layout_width="wrap_content" 574 android:src="@drawable/layers" /> 575</pre> 576 577<p>The result is a stack of increasingly offset images:</p> 578<img src="{@docRoot}images/resources/layers.png" alt="" /> 579</dd> <!-- end example --> 580 581<dt>see also:</dt> 582<dd> 583<ul> 584 <li>{@link android.graphics.drawable.LayerDrawable}</li> 585</ul> 586</dd> 587 588</dl> 589 590 591 592 593 594 595 596 597<h2 id="StateList">State List</h2> 598 599<p>A {@link android.graphics.drawable.StateListDrawable} is a drawable object defined in XML 600that uses a several different images to represent the same graphic, depending on the state of 601the object. For example, a {@link 602android.widget.Button} widget can exist in one of several different states (pressed, focused, 603or niether) and, using a state list drawable, you can provide a different background image for each 604state.</p> 605 606<p>You can describe the state list in an XML file. Each graphic is represented by an {@code 607<item>} element inside a single {@code <selector>} element. Each {@code <item>} 608uses various attributes to describe the state in which it should be used as the graphic for the 609drawable.</p> 610 611<p>During each state change, the state list is traversed top to bottom and the first item that 612matches the current state is used—the selection is <em>not</em> based on the "best 613match," but simply the first item that meets the minimum criteria of the state.</p> 614 615<dl class="xml"> 616 617<dt>file location:</dt> 618<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 619The filename is used as the resource ID.</dd> 620 621<dt>compiled resource datatype:</dt> 622<dd>Resource pointer to a {@link android.graphics.drawable.StateListDrawable}.</dd> 623 624<dt>resource reference:</dt> 625 626<dd> 627In Java: <code>R.drawable.<em>filename</em></code><br/> 628In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 629</dd> 630 631<dt>syntax:</dt> 632 633<dd> 634<pre class="stx"> 635<?xml version="1.0" encoding="utf-8"?> 636<<a href="#selector-element">selector</a> xmlns:android="http://schemas.android.com/apk/res/android" 637 android:constantSize=["true" | "false"] 638 android:dither=["true" | "false"] 639 android:variablePadding=["true" | "false"] > 640 <<a href="#item-element">item</a> 641 android:drawable="@[package:]drawable/<em>drawable_resource</em>" 642 android:state_pressed=["true" | "false"] 643 android:state_focused=["true" | "false"] 644 android:state_hovered=["true" | "false"] 645 android:state_selected=["true" | "false"] 646 android:state_checkable=["true" | "false"] 647 android:state_checked=["true" | "false"] 648 android:state_enabled=["true" | "false"] 649 android:state_activated=["true" | "false"] 650 android:state_window_focused=["true" | "false"] /> 651</selector> 652</pre> 653</dd> 654 655<dt>elements:</dt> 656 657<dd> 658<dl class="tag-list"> 659 660 <dt id="selector-element"><code><selector></code></dt> 661 <dd><strong>Required.</strong> This must be the root element. Contains one or more {@code 662<item>} elements. 663 <p class="caps">attributes:</p> 664 <dl class="atn-list"> 665 <dt><code>xmlns:android</code></dt> 666 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 667 <code>"http://schemas.android.com/apk/res/android"</code>. 668 <dt><code>android:constantSize</code></dt> 669 <dd><em>Boolean</em>. "true" if the drawable's reported internal size remains constant as the state 670changes (the size is the maximum of all of the states); "false" if the size varies based on 671the current state. Default is false.</dd> 672 <dt><code>android:dither</code></dt> 673 <dd><em>Boolean</em>. "true" to enable dithering of the bitmap if the bitmap does not have the same pixel 674configuration as the screen (for instance, an ARGB 8888 bitmap with an RGB 565 screen); "false" to 675disable dithering. Default is true.</dd> 676 <dt><code>android:variablePadding</code></dt> 677 <dd><em>Boolean</em>. "true" if the drawable's padding should change based on the current 678state that is selected; "false" if the padding should stay the same (based on the maximum 679padding of all the states). Enabling this feature requires that you deal with 680performing layout when the state changes, which is often not supported. Default is false.</dd> 681 </dl> 682 </dd> 683 <dt id="item-element"><code><item></code></dt> 684 <dd>Defines a drawable to use during certain states, as described by its attributes. Must be a 685child of a <code><selector></code> element. 686 <p class="caps">attributes:</p> 687 <dl class="atn-list"> 688 <dt><code>android:drawable</code></dt> 689 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable resource.</dd> 690 <dt><code>android:state_pressed</code></dt> 691 <dd><em>Boolean</em>. "true" if this item should be used when the object is pressed (such as when a button 692is touched/clicked); "false" if this item should be used in the default, non-pressed state.</dd> 693 <dt><code>android:state_focused</code></dt> 694 <dd><em>Boolean</em>. "true" if this item should be used when the object has input focus 695(such as when the user selects a text input); "false" if this item should be used in the default, 696non-focused state.</dd> 697 <dt><code>android:state_hovered</code></dt> 698 <dd><em>Boolean</em>. "true" if this item should be used when the object is being hovered 699by a cursor; "false" if this item should be used in the default, non-hovered state. Often, this 700drawable may be the same drawable used for the "focused" state. 701 <p>Introduced in API level 14.</p></dd> 702 <dt><code>android:state_selected</code></dt> 703 <dd><em>Boolean</em>. "true" if this item should be used when the object is the current 704user selection when navigating with a directional control (such as when navigating through a list 705with a d-pad); "false" if this item should be used when the object is not selected. 706<p>The selected state is used when focus (<code>android:state_focused</code>) is not sufficient 707(such as when list view has focus and an item within it is selected with a d-pad).</p></dd> 708 <dt><code>android:state_checkable</code></dt> 709 <dd><em>Boolean</em>. "true" if this item should be used when the object is checkable; "false" if this 710item should be used when the object is not checkable. (Only useful if the object can 711transition between a checkable and non-checkable widget.)</dd> 712 <dt><code>android:state_checked</code></dt> 713 <dd><em>Boolean</em>. "true" if this item should be used when the object is checked; "false" if it 714should be used when the object is un-checked.</dd> 715 <dt><code>android:state_enabled</code></dt> 716 <dd><em>Boolean</em>. "true" if this item should be used when the object is enabled 717(capable of receiving touch/click events); "false" if it should be used when the object is 718disabled.</dd> 719 <dt><code>android:state_activated</code></dt> 720 <dd><em>Boolean</em>. "true" if this item should be used when the object is activated as 721the persistent selection (such as to "highlight" the previously selected list item in a persistent 722navigation view); "false" if it should be used when the object is not activated. 723<p>Introduced in API level 11.</p></dd> 724 <dt><code>android:state_window_focused</code></dt> 725 <dd><em>Boolean</em>. "true" if this item should be used when the application window has focus (the 726application is in the foreground), "false" if this item should be used when the application 727window does not have focus (for example, if the notification shade is pulled down or a dialog appears).</dd> 728 </dl> 729 <p class="note"><strong>Note:</strong> Remember that Android applies the first item in the state list that 730matches the current state of the object. So, if the first item in the list contains 731none of the state attributes above, then it is applied every time, which is why your 732default value should always be last (as demonstrated in the following example).</p> 733 </dd> 734 735</dl> 736</dd> <!-- end elements and attributes --> 737 738<dt>example:</dt> 739 740<dd>XML file saved at <code>res/drawable/button.xml</code>: 741<pre> 742<?xml version="1.0" encoding="utf-8"?> 743<selector xmlns:android="http://schemas.android.com/apk/res/android"> 744 <item android:state_pressed="true" 745 android:drawable="@drawable/button_pressed" /> <!-- pressed --> 746 <item android:state_focused="true" 747 android:drawable="@drawable/button_focused" /> <!-- focused --> 748 <item android:state_hovered="true" 749 android:drawable="@drawable/button_focused" /> <!-- hovered --> 750 <item android:drawable="@drawable/button_normal" /> <!-- default --> 751</selector> 752</pre> 753 754<p>This layout XML applies the state list drawable to a Button:</p> 755<pre> 756<Button 757 android:layout_height="wrap_content" 758 android:layout_width="wrap_content" 759 android:background="@drawable/button" /> 760</pre> 761</dd> <!-- end example --> 762 763<dt>see also:</dt> 764<dd> 765<ul> 766 <li>{@link android.graphics.drawable.StateListDrawable}</li> 767</ul> 768</dd> 769 770</dl> 771 772 773 774 775 776 777 778 779<h2 id="LevelList">Level List</h2> 780 781<p>A Drawable that manages a number of alternate Drawables, each assigned a maximum numerical 782value. Setting the level value of the drawable with {@link 783android.graphics.drawable.Drawable#setLevel(int) setLevel()} loads the drawable resource in the 784level list that has a {@code android:maxLevel} value greater than or equal to the value 785passed to the method.</p> 786 787<dl class="xml"> 788 789<dt>file location:</dt> 790<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 791The filename is used as the resource ID.</dd> 792 793<dt>compiled resource datatype:</dt> 794<dd>Resource pointer to a {@link android.graphics.drawable.LevelListDrawable}.</dd> 795 796<dt>resource reference:</dt> 797 798<dd> 799In Java: <code>R.drawable.<em>filename</em></code><br/> 800In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 801</dd> 802 803<dt>syntax:</dt> 804 805<dd> 806<pre class="stx"> 807<?xml version="1.0" encoding="utf-8"?> 808<<a href="#levellist-element">level-list</a> 809 xmlns:android="http://schemas.android.com/apk/res/android" > 810 <<a href="#levellist-item-element">item</a> 811 android:drawable="@drawable/<i>drawable_resource</i>" 812 android:maxLevel="<i>integer</i>" 813 android:minLevel="<i>integer</i>" /> 814</level-list> 815</pre> 816</dd> 817 818<dt>elements:</dt> 819 820<dd> 821<dl class="tag-list"> 822 823 <dt id="levellist-element"><code><level-list></code></dt> 824 <dd>This must be the root element. Contains one or more {@code <item>} elements. 825 <p class="caps">attributes:</p> 826 <dl class="atn-list"> 827 <dt><code>xmlns:android</code></dt> 828 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 829 <code>"http://schemas.android.com/apk/res/android"</code>. 830 </dl> 831 </dd> 832 833 <dt id="levellist-item-element"><code><item></code></dt> 834 <dd>Defines a drawable to use at a certain level. 835 <p class="caps">attributes:</p> 836 <dl class="atn-list"> 837 <dt><code>android:drawable</code></dt> 838 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 839resource to be inset.</dd> 840 <dt><code>android:maxLevel</code></dt> 841 <dd><em>Integer</em>. The maximum level allowed for this item.</dd> 842 <dt><code>android:minLevel</code></dt> 843 <dd><em>Integer</em>. The minimum level allowed for this item.</dd> 844 </dl> 845 </dd> 846</dl> 847 848</dd> 849 850<dt>example:</dt> 851 852<dd> 853 854<pre> 855<?xml version="1.0" encoding="utf-8"?> 856<level-list xmlns:android="http://schemas.android.com/apk/res/android" > 857 <item 858 android:drawable="@drawable/status_off" 859 android:maxLevel="0" /> 860 <item 861 android:drawable="@drawable/status_on" 862 android:maxLevel="1" /> 863</level-list> 864</pre> 865<p>Once this is applied to a {@link android.view.View}, the level can be changed with {@link 866android.graphics.drawable.Drawable#setLevel(int) setLevel()} or {@link 867android.widget.ImageView#setImageLevel(int) setImageLevel()}.</p> 868 869</dd> 870 871<dt>see also:</dt> 872 873<dd> 874<ul> 875 <li>{@link android.graphics.drawable.LevelListDrawable}</li> 876</ul> 877</dd> 878 879</dl> 880 881 882 883 884 885 886<h2 id="Transition">Transition Drawable</h2> 887 888<p>A {@link android.graphics.drawable.TransitionDrawable} is a drawable object 889that can cross-fade between the two drawable resources.</p> 890 891<p>Each drawable is represented by an {@code <item>} element inside a single {@code 892<transition>} element. No more than two items are supported. To transition forward, call 893{@link android.graphics.drawable.TransitionDrawable#startTransition(int) startTransition()}. To 894transition backward, call {@link android.graphics.drawable.TransitionDrawable#reverseTransition(int) 895reverseTransition()}.</p> 896 897<dl class="xml"> 898 899<dt>file location:</dt> 900<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 901The filename is used as the resource ID.</dd> 902 903<dt>compiled resource datatype:</dt> 904<dd>Resource pointer to a {@link android.graphics.drawable.TransitionDrawable}.</dd> 905 906<dt>resource reference:</dt> 907 908<dd> 909In Java: <code>R.drawable.<em>filename</em></code><br/> 910In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 911</dd> 912 913<dt>syntax:</dt> 914 915<dd> 916<pre class="stx"> 917<?xml version="1.0" encoding="utf-8"?> 918<<a href="#transition-element">transition</a> 919xmlns:android="http://schemas.android.com/apk/res/android" > 920 <<a href="#transition-item-element">item</a> 921 android:drawable="@[package:]drawable/<em>drawable_resource</em>" 922 android:id="@[+][<em>package</em>:]id/<i>resource_name</i>" 923 android:top="<em>dimension</em>" 924 android:right="<em>dimension</em>" 925 android:bottom="<em>dimension</em>" 926 android:left="<em>dimension</em>" /> 927</transition> 928</pre> 929</dd> 930 931<dt>elements:</dt> 932 933<dd> 934<dl class="tag-list"> 935 936 <dt id="transition-element"><code><transition></code></dt> 937 <dd><strong>Required.</strong> This must be the root element. Contains one or more {@code 938<item>} elements. 939 <p class="caps">attributes:</p> 940 <dl class="atn-list"> 941 <dt><code>xmlns:android</code></dt> 942 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 943 <code>"http://schemas.android.com/apk/res/android"</code>. 944 </dl> 945 </dd> 946 <dt id="transition-item-element"><code><item></code></dt> 947 <dd>Defines a drawable to use as part of the drawable transition. 948Must be a child of a <code><transition></code> element. Accepts child {@code <bitmap>} 949elements. 950 <p class="caps">attributes:</p> 951 <dl class="atn-list"> 952 <dt><code>android:drawable</code></dt> 953 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 954resource.</dd> 955 <dt><code>android:id</code></dt> 956 <dd><em>Resource ID</em>. A unique resource ID for this drawable. To create a new resource 957ID for this item, use the form: 958<code>"@+id/<em>name</em>"</code>. The plus symbol indicates that this should be created as a new 959ID. You can use this identifier to 960retrieve and modify the drawable with {@link android.view.View#findViewById(int) 961View.findViewById()} or {@link android.app.Activity#findViewById(int) Activity.findViewById()}.</dd> 962 <dt><code>android:top</code></dt> 963 <dd><em>Integer</em>. The top offset in pixels.</dd> 964 <dt><code>android:right</code></dt> 965 <dd><em>Integer</em>. The right offset in pixels.</dd> 966 <dt><code>android:bottom</code></dt> 967 <dd><em>Integer</em>. The bottom offset in pixels.</dd> 968 <dt><code>android:left</code></dt> 969 <dd><em>Integer</em>. The left offset in pixels.</dd> 970 </dl> 971 </dd> 972 973</dl> 974</dd> <!-- end elements and attributes --> 975 976<dt>example:</dt> 977 978<dd>XML file saved at <code>res/drawable/transition.xml</code>: 979<pre> 980<?xml version="1.0" encoding="utf-8"?> 981<transition xmlns:android="http://schemas.android.com/apk/res/android"> 982 <item android:drawable="@drawable/on" /> 983 <item android:drawable="@drawable/off" /> 984</transition> 985</pre> 986 987<p>This layout XML applies the drawable to a View:</p> 988<pre> 989<ImageButton 990 android:id="@+id/button" 991 android:layout_height="wrap_content" 992 android:layout_width="wrap_content" 993 android:src="@drawable/transition" /> 994</pre> 995 996<p>And the following code performs a 500ms transition from the first item to the second:</p> 997<pre> 998ImageButton button = (ImageButton) findViewById(R.id.button); 999TransitionDrawable drawable = (TransitionDrawable) button.getDrawable(); 1000drawable.startTransition(500); 1001</pre> 1002 1003</dd> <!-- end example --> 1004 1005<dt>see also:</dt> 1006 1007<dd> 1008<ul> 1009 <li>{@link android.graphics.drawable.TransitionDrawable}</li> 1010</ul> 1011</dd> 1012 1013</dl> 1014 1015 1016 1017 1018 1019<h2 id="Inset">Inset Drawable</h2> 1020 1021<p>A drawable defined in XML that insets another drawable by a specified distance. This is useful 1022when a View needs a background that is smaller than the View's actual bounds.</p> 1023 1024<dl class="xml"> 1025 1026<dt>file location:</dt> 1027<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 1028The filename is used as the resource ID.</dd> 1029 1030<dt>compiled resource datatype:</dt> 1031<dd>Resource pointer to a {@link android.graphics.drawable.InsetDrawable}.</dd> 1032 1033<dt>resource reference:</dt> 1034 1035<dd> 1036In Java: <code>R.drawable.<em>filename</em></code><br/> 1037In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 1038</dd> 1039 1040<dt>syntax:</dt> 1041 1042<dd> 1043<pre class="stx"> 1044<?xml version="1.0" encoding="utf-8"?> 1045<<a href="#inset-element">inset</a> 1046 xmlns:android="http://schemas.android.com/apk/res/android" 1047 android:drawable="@drawable/<i>drawable_resource</i>" 1048 android:insetTop="<i>dimension</i>" 1049 android:insetRight="<i>dimension</i>" 1050 android:insetBottom="<i>dimension</i>" 1051 android:insetLeft="<i>dimension</i>" /> 1052</pre> 1053</dd> 1054 1055<dt>elements:</dt> 1056 1057<dd> 1058<dl class="tag-list"> 1059 1060 <dt id="inset-element"><code><inset></code></dt> 1061 <dd>Defines the inset drawable. This must be the root element. 1062 <p class="caps">attributes:</p> 1063 <dl class="atn-list"> 1064 <dt><code>xmlns:android</code></dt> 1065 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 1066 <code>"http://schemas.android.com/apk/res/android"</code>. 1067 <dt><code>android:drawable</code></dt> 1068 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 1069resource to be inset.</dd> 1070 <dt><code>android:insetTop</code></dt> 1071 <dd><em>Dimension</em>. The top inset, as a dimension value or <a 1072href="more-resources.html#Dimension">dimension resource</a></dd> 1073 <dt><code>android:insetRight</code></dt> 1074 <dd><em>Dimension</em>. The right inset, as a dimension value or <a 1075href="more-resources.html#Dimension">dimension resource</a></dd> 1076 <dt><code>android:insetBottom</code></dt> 1077 <dd><em>Dimension</em>. The bottom inset, as a dimension value or <a 1078href="more-resources.html#Dimension">dimension resource</a></dd> 1079 <dt><code>android:insetLeft</code></dt> 1080 <dd><em>Dimension</em>. The left inset, as a dimension value or <a 1081href="more-resources.html#Dimension">dimension resource</a></dd> 1082 </dl> 1083 </dd> 1084</dl> 1085 1086</dd> 1087 1088<dt>example:</dt> 1089 1090<dd> 1091<pre> 1092<?xml version="1.0" encoding="utf-8"?> 1093<inset xmlns:android="http://schemas.android.com/apk/res/android" 1094 android:drawable="@drawable/background" 1095 android:insetTop="10dp" 1096 android:insetLeft="10dp" /> 1097</pre> 1098</dd> 1099 1100<dt>see also:</dt> 1101 1102<dd> 1103<ul> 1104 <li>{@link android.graphics.drawable.InsetDrawable}</li> 1105</ul> 1106</dd> 1107 1108</dl> 1109 1110 1111 1112 1113 1114 1115 1116 1117<h2 id="Clip">Clip Drawable</h2> 1118 1119<p>A drawable defined in XML that clips another drawable based on this Drawable's current level. You 1120can control how much the child drawable gets clipped in width and height based on the level, as well 1121as a gravity to control where it is placed in its overall container. Most often used to implement 1122things like progress bars.</p> 1123 1124<dl class="xml"> 1125 1126<dt>file location:</dt> 1127<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 1128The filename is used as the resource ID.</dd> 1129 1130<dt>compiled resource datatype:</dt> 1131<dd>Resource pointer to a {@link android.graphics.drawable.ClipDrawable}.</dd> 1132 1133<dt>resource reference:</dt> 1134 1135<dd> 1136In Java: <code>R.drawable.<em>filename</em></code><br/> 1137In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 1138</dd> 1139 1140<dt>syntax:</dt> 1141 1142<dd> 1143<pre class="stx"> 1144<?xml version="1.0" encoding="utf-8"?> 1145<<a href="#clip-element">clip</a> 1146 xmlns:android="http://schemas.android.com/apk/res/android" 1147 android:drawable="@drawable/<i>drawable_resource</i>" 1148 android:clipOrientation=["horizontal" | "vertical"] 1149 android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | 1150 "fill_vertical" | "center_horizontal" | "fill_horizontal" | 1151 "center" | "fill" | "clip_vertical" | "clip_horizontal"] /> 1152</pre> 1153</dd> 1154 1155<dt>elements:</dt> 1156 1157<dd> 1158<dl class="tag-list"> 1159 1160 <dt id="clip-element"><code><clip></code></dt> 1161 <dd>Defines the clip drawable. This must be the root element. 1162 <p class="caps">attributes:</p> 1163 <dl class="atn-list"> 1164 <dt><code>xmlns:android</code></dt> 1165 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 1166 <code>"http://schemas.android.com/apk/res/android"</code>. 1167 <dt><code>android:drawable</code></dt> 1168 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 1169resource to be clipped.</dd> 1170 <dt><code>android:clipOrientation</code></dt> 1171 <dd><em>Keyword</em>. The orientation for the clip. 1172 <p>Must be one of the following constant values:</p> 1173<table> 1174<tr><th>Value</th><th>Description</th></tr> 1175<tr><td><code>horizontal</code></td> 1176<td>Clip the drawable horizontally.</td></tr> 1177<tr><td><code>vertical</code></td> 1178<td>Clip the drawable vertically.</td></tr> 1179</table> 1180 </dd> 1181 <dt><code>android:gravity</code></dt> 1182 <dd><em>Keyword</em>. Specifies where to clip within the drawable. 1183 <p>Must be one or more (separated by '|') of the following constant values:</p> 1184<table> 1185<tr><th>Value</th><th>Description</th></tr> 1186<tr><td><code>top</code></td> 1187<td>Put the object at the top of its container, not changing its size. When {@code 1188clipOrientation} is {@code "vertical"}, clipping occurs at the bottom of the drawable.</td></tr> 1189<tr><td><code>bottom</code></td> 1190<td>Put the object at the bottom of its container, not changing its size. When {@code 1191clipOrientation} is {@code "vertical"}, clipping occurs at the top of the drawable.</td></tr> 1192<tr><td><code>left</code></td> 1193<td>Put the object at the left edge of its container, not changing its size. This is the 1194default. When {@code clipOrientation} is {@code "horizontal"}, clipping occurs at the right side of 1195the drawable. This is the default.</td></tr> 1196<tr><td><code>right</code></td> 1197<td>Put the object at the right edge of its container, not changing its size. When {@code 1198clipOrientation} is {@code "horizontal"}, clipping occurs at the left side of 1199the drawable.</td></tr> 1200<tr><td><code>center_vertical</code></td> 1201<td>Place object in the vertical center of its container, not changing its size. Clipping behaves 1202the same as when gravity is {@code "center"}.</td></tr> 1203<tr><td><code>fill_vertical</code></td> 1204<td>Grow the vertical size of the object if needed so it completely fills its container. When {@code 1205clipOrientation} is {@code "vertical"}, no clipping occurs because the drawable fills the 1206vertical space (unless the drawable level is 0, in which case it's not visible).</td></tr> 1207<tr><td><code>center_horizontal</code></td> 1208<td>Place object in the horizontal center of its container, not changing its size. 1209Clipping behaves the same as when gravity is {@code "center"}.</td></tr> 1210<tr><td><code>fill_horizontal</code></td> 1211<td>Grow the horizontal size of the object if needed so it completely fills its container. When 1212{@code clipOrientation} is {@code "horizontal"}, no clipping occurs because the drawable fills the 1213horizontal space (unless the drawable level is 0, in which case it's not visible). 1214</td></tr> 1215<tr><td><code>center</code></td> 1216<td>Place the object in the center of its container in both the vertical and horizontal axis, not 1217changing its size. When {@code 1218clipOrientation} is {@code "horizontal"}, clipping occurs on the left and right. When {@code 1219clipOrientation} is {@code "vertical"}, clipping occurs on the top and bottom.</td></tr> 1220<tr><td><code>fill</code></td> 1221<td>Grow the horizontal and vertical size of the object if needed so it completely fills its 1222container. No clipping occurs because the drawable fills the 1223horizontal and vertical space (unless the drawable level is 0, in which case it's not 1224visible).</td></tr> 1225<tr><td><code>clip_vertical</code></td> 1226<td>Additional option that can be set to have the top and/or bottom edges of the child clipped to 1227its container's bounds. The clip is based on the vertical gravity: a top gravity clips the 1228bottom edge, a bottom gravity clips the top edge, and neither clips both edges. 1229</td></tr> 1230<tr><td><code>clip_horizontal</code></td> 1231<td>Additional option that can be set to have the left and/or right edges of the child clipped to 1232its container's bounds. The clip is based on the horizontal gravity: a left gravity clips 1233the right edge, a right gravity clips the left edge, and neither clips both edges. 1234</td></tr> 1235</table></dd> 1236 </dl> 1237 </dd> 1238</dl> 1239 1240</dd> <!-- end elements and attributes --> 1241 1242<dt>example:</dt> 1243 1244<dd>XML file saved at <code>res/drawable/clip.xml</code>: 1245<pre> 1246<?xml version="1.0" encoding="utf-8"?> 1247<clip xmlns:android="http://schemas.android.com/apk/res/android" 1248 android:drawable="@drawable/android" 1249 android:clipOrientation="horizontal" 1250 android:gravity="left" /> 1251</pre> 1252 <p>The following layout XML applies the clip drawable to a View:</p> 1253<pre> 1254<ImageView 1255 android:id="@+id/image" 1256 android:background="@drawable/clip" 1257 android:layout_height="wrap_content" 1258 android:layout_width="wrap_content" /> 1259</pre> 1260 1261 <p>The following code gets the drawable and increases the amount of clipping in order to 1262progressively reveal the image:</p> 1263<pre> 1264ImageView imageview = (ImageView) findViewById(R.id.image); 1265ClipDrawable drawable = (ClipDrawable) imageview.getDrawable(); 1266drawable.setLevel(drawable.getLevel() + 1000); 1267</pre> 1268 1269<p>Increasing the level reduces the amount of clipping and slowly reveals the image. Here it is 1270at a level of 7000:</p> 1271<img src="{@docRoot}images/resources/clip.png" alt="" /> 1272 1273<p class="note"><strong>Note:</strong> The default level is 0, which is fully clipped so the image 1274is not visible. When the level is 10,000, the image is not clipped and completely visible.</p> 1275</dd> <!-- end example --> 1276 1277<dt>see also:</dt> 1278 1279<dd> 1280<ul> 1281 <li>{@link android.graphics.drawable.ClipDrawable}</li> 1282</ul> 1283</dd> 1284 1285</dl> 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295<h2 id="Scale">Scale Drawable</h2> 1296 1297<p>A drawable defined in XML that changes the size of another drawable based on its current 1298level.</p> 1299 1300<dl class="xml"> 1301 1302<dt>file location:</dt> 1303<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 1304The filename is used as the resource ID.</dd> 1305 1306<dt>compiled resource datatype:</dt> 1307<dd>Resource pointer to a {@link android.graphics.drawable.ScaleDrawable}.</dd> 1308 1309<dt>resource reference:</dt> 1310 1311<dd> 1312In Java: <code>R.drawable.<em>filename</em></code><br/> 1313In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 1314</dd> 1315 1316<dt>syntax:</dt> 1317 1318<dd> 1319<pre class="stx"> 1320<?xml version="1.0" encoding="utf-8"?> 1321<<a href="#scale-element">scale</a> 1322 xmlns:android="http://schemas.android.com/apk/res/android" 1323 android:drawable="@drawable/<i>drawable_resource</i>" 1324 android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" | 1325 "fill_vertical" | "center_horizontal" | "fill_horizontal" | 1326 "center" | "fill" | "clip_vertical" | "clip_horizontal"] 1327 android:scaleHeight="<i>percentage</i>" 1328 android:scaleWidth="<i>percentage</i>" /> 1329</pre> 1330</dd> 1331 1332<dt>elements:</dt> 1333 1334<dd> 1335<dl class="tag-list"> 1336 1337 <dt id="scale-element"><code><scale></code></dt> 1338 <dd>Defines the scale drawable. This must be the root element. 1339 <p class="caps">attributes:</p> 1340 <dl class="atn-list"> 1341 <dt><code>xmlns:android</code></dt> 1342 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 1343 <code>"http://schemas.android.com/apk/res/android"</code>. 1344 <dt><code>android:drawable</code></dt> 1345 <dd><em>Drawable resource</em>. <strong>Required</strong>. Reference to a drawable 1346resource.</dd> 1347 <dt><code>android:scaleGravity</code></dt> 1348 <dd><em>Keyword</em>. Specifies the gravity position after scaling. 1349 <p>Must be one or more (separated by '|') of the following constant values:</p> 1350<table> 1351<tr><th>Value</th><th>Description</th></tr> 1352<tr><td><code>top</code></td> 1353<td>Put the object at the top of its container, not changing its size.</td></tr> 1354<tr><td><code>bottom</code></td> 1355<td>Put the object at the bottom of its container, not changing its size. </td></tr> 1356<tr><td><code>left</code></td> 1357<td>Put the object at the left edge of its container, not changing its size. This is the 1358default.</td></tr> 1359<tr><td><code>right</code></td> 1360<td>Put the object at the right edge of its container, not changing its size. </td></tr> 1361<tr><td><code>center_vertical</code></td> 1362<td>Place object in the vertical center of its container, not changing its size. </td></tr> 1363<tr><td><code>fill_vertical</code></td> 1364<td>Grow the vertical size of the object if needed so it completely fills its container. </td></tr> 1365<tr><td><code>center_horizontal</code></td> 1366<td>Place object in the horizontal center of its container, not changing its size. </td></tr> 1367<tr><td><code>fill_horizontal</code></td> 1368<td>Grow the horizontal size of the object if needed so it completely fills its container. 1369</td></tr> 1370<tr><td><code>center</code></td> 1371<td>Place the object in the center of its container in both the vertical and horizontal axis, not 1372changing its size. </td></tr> 1373<tr><td><code>fill</code></td> 1374<td>Grow the horizontal and vertical size of the object if needed so it completely fills its 1375container. </td></tr> 1376<tr><td><code>clip_vertical</code></td> 1377<td>Additional option that can be set to have the top and/or bottom edges of the child clipped to 1378its container's bounds. The clip is based on the vertical gravity: a top gravity clips the 1379bottom edge, a bottom gravity clips the top edge, and neither clips both edges. 1380</td></tr> 1381<tr><td><code>clip_horizontal</code></td> 1382<td>Additional option that can be set to have the left and/or right edges of the child clipped to 1383its container's bounds. The clip is based on the horizontal gravity: a left gravity clips 1384the right edge, a right gravity clips the left edge, and neither clips both edges. 1385</td></tr> 1386</table></dd> 1387 <dt><code>android:scaleHeight</code></dt> 1388 <dd><em>Percentage</em>. The scale height, expressed as a percentage of the drawable's 1389bound. The value's format is XX%. For instance: 100%, 12.5%, etc.</dd> 1390 <dt><code>android:scaleWidth</code></dt> 1391 <dd><em>Percentage</em>. The scale width, expressed as a percentage of the drawable's 1392bound. The value's format is XX%. For instance: 100%, 12.5%, etc.</dd> 1393 </dl> 1394 </dd> 1395</dl> 1396 1397</dd> 1398 1399<dt>example:</dt> 1400 1401<dd> 1402<pre class="stx"> 1403<?xml version="1.0" encoding="utf-8"?> 1404<scale xmlns:android="http://schemas.android.com/apk/res/android" 1405 android:drawable="@drawable/logo" 1406 android:scaleGravity="center_vertical|center_horizontal" 1407 android:scaleHeight="80%" 1408 android:scaleWidth="80%" /> 1409</pre> 1410</dd> 1411 1412<dt>see also:</dt> 1413<dd> 1414<ul> 1415 <li>{@link android.graphics.drawable.ScaleDrawable}</li> 1416</ul> 1417</dd> 1418 1419</dl> 1420 1421 1422 1423 1424 1425 1426 1427<h2 id="Shape">Shape Drawable</h2> 1428 1429<p>This is a generic shape defined in XML.</p> 1430 1431<dl class="xml"> 1432 1433<dt>file location:</dt> 1434<dd><code>res/drawable/<em>filename</em>.xml</code><br/> 1435The filename is used as the resource ID.</dd> 1436 1437<dt>compiled resource datatype:</dt> 1438<dd>Resource pointer to a {@link android.graphics.drawable.GradientDrawable}.</dd> 1439 1440<dt>resource reference:</dt> 1441 1442<dd> 1443In Java: <code>R.drawable.<em>filename</em></code><br/> 1444In XML: <code>@[<em>package</em>:]drawable/<em>filename</em></code> 1445</dd> 1446 1447<dt>syntax:</dt> 1448 1449<dd> 1450<pre class="stx"> 1451<?xml version="1.0" encoding="utf-8"?> 1452<<a href="#shape-element">shape</a> 1453 xmlns:android="http://schemas.android.com/apk/res/android" 1454 android:shape=["rectangle" | "oval" | "line" | "ring"] > 1455 <<a href="#corners-element">corners</a> 1456 android:radius="<em>integer</em>" 1457 android:topLeftRadius="<em>integer</em>" 1458 android:topRightRadius="<em>integer</em>" 1459 android:bottomLeftRadius="<em>integer</em>" 1460 android:bottomRightRadius="<em>integer</em>" /> 1461 <<a href="#gradient-element">gradient</a> 1462 android:angle="<em>integer</em>" 1463 android:centerX="<em>integer</em>" 1464 android:centerY="<em>integer</em>" 1465 android:centerColor="<em>integer</em>" 1466 android:endColor="<em>color</em>" 1467 android:gradientRadius="<em>integer</em>" 1468 android:startColor="<em>color</em>" 1469 android:type=["linear" | "radial" | "sweep"] 1470 android:useLevel=["true" | "false"] /> 1471 <<a href="#padding-element">padding</a> 1472 android:left="<em>integer</em>" 1473 android:top="<em>integer</em>" 1474 android:right="<em>integer</em>" 1475 android:bottom="<em>integer</em>" /> 1476 <<a href="#size-element">size</a> 1477 android:width="<em>integer</em>" 1478 android:height="<em>integer</em>" /> 1479 <<a href="#solid-element">solid</a> 1480 android:color="<em>color</em>" /> 1481 <<a href="#stroke-element">stroke</a> 1482 android:width="<em>integer</em>" 1483 android:color="<em>color</em>" 1484 android:dashWidth="<em>integer</em>" 1485 android:dashGap="<em>integer</em>" /> 1486</shape> 1487</pre> 1488</dd> 1489 1490<dt>elements:</dt> 1491 1492<dd> 1493<dl class="tag-list"> 1494 1495 <dt id="shape-element"><code><shape></code></dt> 1496 <dd>The shape drawable. This must be the root element. 1497 <p class="caps">attributes:</p> 1498 <dl class="atn-list"> 1499 <dt><code>xmlns:android</code></dt> 1500 <dd><em>String</em>. <strong>Required.</strong> Defines the XML namespace, which must be 1501 <code>"http://schemas.android.com/apk/res/android"</code>. 1502 <dt><code>android:shape</code></dt> 1503 <dd><em>Keyword</em>. Defines the type of shape. Valid values are: 1504 <table> 1505 <tr><th>Value</th><th>Desciption</th></tr> 1506 <tr><td>{@code "rectangle"}</td> 1507 <td>A rectangle that fills the containing View. This is the default shape.</td></tr> 1508 <tr><td>{@code "oval"}</td> 1509 <td>An oval shape that fits the dimensions of the containing View.</td></tr> 1510 <tr><td>{@code "line"}</td> 1511 <td>A horizontal line that spans the width of the containing View. This 1512 shape requires the {@code <stroke>} element to define the width of the 1513 line.</td></tr> 1514 <tr><td>{@code "ring"}</td> 1515 <td>A ring shape.</td></tr> 1516 </table> 1517 </dd> 1518 </dl> 1519 <p>The following attributes are used only when {@code android:shape="ring"}:</p> 1520 <dl class="atn-list"> 1521 <dt><code>android:innerRadius</code></dt> 1522 <dd><em>Dimension</em>. The radius for the 1523inner part of the ring (the hole in the middle), as a dimension value or <a 1524href="more-resources.html#Dimension">dimension resource</a>.</dd> 1525 <dt><code>android:innerRadiusRatio</code></dt> 1526 <dd><em>Float</em>. The radius for the inner 1527part of the ring, expressed as a ratio of the ring's width. For instance, if {@code 1528android:innerRadiusRatio="5"}, then the inner radius equals the ring's width divided by 5. This 1529value is overridden by {@code android:innerRadius}. Default value is 9.</dd> 1530 <dt><code>android:thickness</code></dt> 1531 <dd><em>Dimension</em>. The thickness of the 1532ring, as a dimension value or <a 1533href="more-resources.html#Dimension">dimension resource</a>.</dd> 1534 <dt><code>android:thicknessRatio</code></dt> 1535 <dd><em>Float</em>. The thickness of the ring, 1536expressed as a ratio of the ring's width. For instance, if {@code android:thicknessRatio="2"}, then 1537the thickness equals the ring's width divided by 2. This value is overridden by {@code 1538android:innerRadius}. Default value is 3.</dd> 1539 <dt><code>android:useLevel</code></dt> 1540 <dd><em>Boolean</em>. "true" if this is used as 1541a {@link android.graphics.drawable.LevelListDrawable}. This should normally be "false" 1542 or your shape may not appear.</dd> 1543 </dl> 1544 <dt id="corners-element"><code><corners></code></dt> 1545 <dd>Creates rounded corners for the shape. Applies only when the shape is a rectangle. 1546 <p class="caps">attributes:</p> 1547 <dl class="atn-list"> 1548 <dt><code>android:radius</code></dt> 1549 <dd><em>Dimension</em>. The radius for all corners, as a dimension value or <a 1550href="more-resources.html#Dimension">dimension resource</a>. This is overridden for each 1551corner by the following attributes.</dd> 1552 <dt><code>android:topLeftRadius</code></dt> 1553 <dd><em>Dimension</em>. The radius for the top-left corner, as a dimension value or <a 1554href="more-resources.html#Dimension">dimension resource</a>.</dd> 1555 <dt><code>android:topRightRadius</code></dt> 1556 <dd><em>Dimension</em>. The radius for the top-right corner, as a dimension value or <a 1557href="more-resources.html#Dimension">dimension resource</a>.</dd> 1558 <dt><code>android:bottomLeftRadius</code></dt> 1559 <dd><em>Dimension</em>. The radius for the bottom-left corner, as a dimension value or <a 1560href="more-resources.html#Dimension">dimension resource</a>.</dd> 1561 <dt><code>android:bottomRightRadius</code></dt> 1562 <dd><em>Dimension</em>. The radius for the bottom-right corner, as a dimension value or <a 1563href="more-resources.html#Dimension">dimension resource</a>.</dd> 1564 </dl> 1565 <p class="note"><strong>Note:</strong> Every corner must (initially) be provided a corner 1566radius greater than 1, or else no corners are rounded. If you want specific corners 1567to <em>not</em> be rounded, a work-around is to use {@code android:radius} to set a default corner 1568radius greater than 1, but then override each and every corner with the values you really 1569want, providing zero ("0dp") where you don't want rounded corners.</p> 1570 </dd> 1571 <dt id="gradient-element"><code><gradient></code></dt> 1572 <dd>Specifies a gradient color for the shape. 1573 <p class="caps">attributes:</p> 1574 <dl class="atn-list"> 1575 <dt><code>android:angle</code></dt> 1576 <dd><em>Integer</em>. The angle for the gradient, in degrees. 0 is left to right, 90 is 1577bottom to top. It must be a multiple of 45. Default is 0.</dd> 1578 <dt><code>android:centerX</code></dt> 1579 <dd><em>Float</em>. The relative X-position for the center of the gradient (0 - 1.0).</dd> 1580 <dt><code>android:centerY</code></dt> 1581 <dd><em>Float</em>. The relative Y-position for the center of the gradient (0 - 1.0).</dd> 1582 <dt><code>android:centerColor</code></dt> 1583 <dd><em>Color</em>. Optional color that comes between the start and end colors, as a 1584hexadecimal value or <a href="more-resources.html#Color">color resource</a>.</dd> 1585 <dt><code>android:endColor</code></dt> 1586 <dd><em>Color</em>. The ending color, as a hexadecimal 1587value or <a href="more-resources.html#Color">color resource</a>.</dd> 1588 <dt><code>android:gradientRadius</code></dt> 1589 <dd><em>Float</em>. The radius for the gradient. Only applied when {@code 1590android:type="radial"}.</dd> 1591 <dt><code>android:startColor</code></dt> 1592 <dd><em>Color</em>. The starting color, as a hexadecimal 1593value or <a href="more-resources.html#Color">color resource</a>.</dd> 1594 <dt><code>android:type</code></dt> 1595 <dd><em>Keyword</em>. The type of gradient pattern to apply. Valid values are: 1596 <table> 1597 <tr><th>Value</th><th>Description</th></tr> 1598 <tr><td>{@code "linear"}</td> 1599 <td>A linear gradient. This is the default.</td></tr> 1600 <tr><td>{@code "radial"}</td> 1601 <td>A radial gradient. The start color is the center color.</td></tr> 1602 <tr><td>{@code "sweep"}</td> 1603 <td>A sweeping line gradient. </td></tr> 1604 </table> 1605 </dd> 1606 <dt><code>android:useLevel</code></dt> 1607 <dd><em>Boolean</em>. "true" if this is used as a {@link 1608android.graphics.drawable.LevelListDrawable}.</dd> 1609 </dl> 1610 </dd> 1611 <dt id="padding-element"><code><padding></code></dt> 1612 <dd>Padding to apply to the containing View element (this pads the position of the View 1613content, not the shape). 1614 <p class="caps">attributes:</p> 1615 <dl class="atn-list"> 1616 <dt><code>android:left</code></dt> 1617 <dd><em>Dimension</em>. Left padding, as a dimension value or <a 1618href="more-resources.html#Dimension">dimension resource</a>.</dd> 1619 <dt><code>android:top</code></dt> 1620 <dd><em>Dimension</em>. Top padding, as a dimension value or <a 1621href="more-resources.html#Dimension">dimension resource</a>.</dd> 1622 <dt><code>android:right</code></dt> 1623 <dd><em>Dimension</em>. Right padding, as a dimension value or <a 1624href="more-resources.html#Dimension">dimension resource</a>.</dd> 1625 <dt><code>android:bottom</code></dt> 1626 <dd><em>Dimension</em>. Bottom padding, as a dimension value or <a 1627href="more-resources.html#Dimension">dimension resource</a>.</dd> 1628 </dl> 1629 </dd> 1630 <dt id="size-element"><code><size></code></dt> 1631 <dd>The size of the shape. 1632 <p class="caps">attributes:</p> 1633 <dl class="atn-list"> 1634 <dt><code>android:height</code></dt> 1635 <dd><em>Dimension</em>. The height of the shape, as a dimension value or <a 1636href="more-resources.html#Dimension">dimension resource</a>.</dd> 1637 <dt><code>android:width</code></dt> 1638 <dd><em>Dimension</em>. The width of the shape, as a dimension value or <a 1639href="more-resources.html#Dimension">dimension resource</a>.</dd> 1640 </dl> 1641 <p class="note"><strong>Note:</strong> The shape scales to the size of the container 1642View proportionate to the dimensions defined here, by default. When you use the shape in an {@link 1643android.widget.ImageView}, you can restrict scaling by setting the <a 1644href="{@docRoot}reference/android/widget/ImageView.html#attr_android:scaleType">{@code 1645android:scaleType}</a> to {@code "center"}.</p> 1646 </dd> 1647 <dt id="solid-element"><code><solid></code></dt> 1648 <dd>A solid color to fill the shape. 1649 <p class="caps">attributes:</p> 1650 <dl class="atn-list"> 1651 <dt><code>android:color</code></dt> 1652 <dd><em>Color</em>. The color to apply to the shape, as a hexadecimal 1653value or <a href="more-resources.html#Color">color resource</a>.</dd> 1654 </dl> 1655 </dd> 1656 <dt id="stroke-element"><code><stroke></code></dt> 1657 <dd>A stroke line for the shape. 1658 <p class="caps">attributes:</p> 1659 <dl class="atn-list"> 1660 <dt><code>android:width</code></dt> 1661 <dd><em>Dimension</em>. The thickness of the line, as a dimension value or <a 1662href="more-resources.html#Dimension">dimension resource</a>.</dd> 1663 <dt><code>android:color</code></dt> 1664 <dd><em>Color</em>. The color of the line, as a 1665hexadecimal value or <a href="more-resources.html#Color">color resource</a>.</dd> 1666 <dt><code>android:dashGap</code></dt> 1667 <dd><em>Dimension</em>. The distance between line dashes, as a dimension value or <a 1668href="more-resources.html#Dimension">dimension resource</a>. Only valid if {@code 1669android:dashWidth} is set.</dd> 1670 <dt><code>android:dashWidth</code></dt> 1671 <dd><em>Dimension</em>. The size of each dash line, as a dimension value or <a 1672href="more-resources.html#Dimension">dimension resource</a>. Only valid if {@code 1673android:dashGap} is set.</dd> 1674 </dl> 1675 </dd> 1676 1677</dl> 1678</dd> <!-- end elements and attributes --> 1679 1680<dt>example:</dt> 1681 1682<dd>XML file saved at <code>res/drawable/gradient_box.xml</code>: 1683<pre> 1684<?xml version="1.0" encoding="utf-8"?> 1685<shape xmlns:android="http://schemas.android.com/apk/res/android" 1686 android:shape="rectangle"> 1687 <gradient 1688 android:startColor="#FFFF0000" 1689 android:endColor="#80FF00FF" 1690 android:angle="45"/> 1691 <padding android:left="7dp" 1692 android:top="7dp" 1693 android:right="7dp" 1694 android:bottom="7dp" /> 1695 <corners android:radius="8dp" /> 1696</shape> 1697</pre> 1698 1699 <p>This layout XML applies the shape drawable to a View:</p> 1700<pre> 1701<TextView 1702 android:background="@drawable/gradient_box" 1703 android:layout_height="wrap_content" 1704 android:layout_width="wrap_content" /> 1705</pre> 1706 1707 <p>This application code gets the shape drawable and applies it to a View:</p> 1708<pre> 1709Resources res = {@link android.content.Context#getResources()}; 1710Drawable shape = res. {@link android.content.res.Resources#getDrawable(int) getDrawable}(R.drawable.gradient_box); 1711 1712TextView tv = (TextView)findViewByID(R.id.textview); 1713tv.setBackground(shape); 1714</pre> 1715</dd> <!-- end example --> 1716 1717<dt>see also:</dt> 1718 1719<dd> 1720<ul> 1721 <li>{@link android.graphics.drawable.ShapeDrawable}</li> 1722</ul> 1723</dd> 1724 1725</dl> 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739