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