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