1page.title=Android Developer Tools 2page.tags=adt 3@jd:body 4 5 <div id="qv-wrapper"> 6 <div id="qv"> 7 <h2>In this document</h2> 8 9 <ol> 10 <li><a href="#tools">SDK Tools Integration</a></li> 11 12 <li><a href="#editors">Code Editors</a> 13 <ol> 14 <li><a href="#resource-linking">Resource linking enhancements</a></li> 15 </ol> 16 </li> 17 18 <li><a href="#graphical-editor">Graphical Layout Editor</a> 19 <ol> 20 <li><a href="#canvas">Canvas and outline view</a></li> 21 <li><a href="#palette">Palette</a></li> 22 <li><a href="#config-chooser">Configuration chooser</a></li> 23 </ol> 24 </li> 25 26 <li><a href="#refactoring">Layout Factoring Support</a></li> 27 <li><a href="#Updating">Updating the ADT Plugin</a></li> 28 29 </ol> 30 </div> 31 </div> 32 33<p class="caution"> 34 <strong>Important:</strong> Support for the Android Developer Tools (ADT) in Eclipse is ending, 35 per our <a href= 36 "http://android-developers.blogspot.com/2015/06/an-update-on-eclipse-android-developer.html" 37 class="external-link">announcement</a>. You should migrate your app development projects to 38 Android Studio as soon as possible. For more information on transitioning to Android Studio, see 39 <a href="{@docRoot}sdk/installing/migrate.html">Migrating to Android Studio</a>. 40</p> 41 42 <p>Android Developer Tools (ADT) is a plugin for Eclipse that provides a suite of 43 tools that are integrated with the Eclipse IDE. It offers you access to many features that help 44 you develop Android applications. ADT 45 provides GUI access to many of the command line SDK tools as well as a UI design tool for rapid 46 prototyping, designing, and building of your application's user interface.</p> 47 48<p>If you still wish to use the ADT plugin for Eclipse, see 49<a href="{@docRoot}sdk/installing/installing-adt.html">Installing Eclipse Plugin.</a> 50</p> 51 52 53 <h2 id="tools">SDK Tools Integration</h2> 54 55 <div class="sidebox-wrapper"> 56 <div class="sidebox"> 57 <h2>Need help designing icons?</h2> 58 <p>The <a href="http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html">Android 59 Asset Studio</a> is a web-based tool that lets you generate icons from existing images, 60 clipart, or text. It also generates the icons with different DPIs for different screen sizes and 61 types.</p> 62 63 </div> 64 </div> 65 66 <p>Many of the tools that you can start or run from the command line are integrated into ADT. 67 They include:</p> 68 69 <ul> 70 <li><a href="{@docRoot}tools/debugging/debugging-tracing.html">Traceview</a>: 71 Allows you to profile your program's execution 72 (<strong>Window > Open Perspective > Traceview</strong>). </li> 73 74 <li><a href="{@docRoot}tools/help/android.html">android</a>: Provides access to 75 the Android SDK Manager and AVD Manager. Other <code>android</code> features such as creating or 76 updating projects (application and library) are integrated throughout the Eclipse IDE. </li> 77 78 <li><a href="{@docRoot}tools/debugging/debugging-ui.html#HierarchyViewer">Hierarchy 79 Viewer</a>: Allows you to visualize your application's view hierarchy to find inefficiencies 80 (<strong>Window > Open Perspective > Hierarchy Viewer</strong>).</li> 81 82 <li><a href="{@docRoot}tools/debugging/debugging-ui.html#pixelperfect">Pixel 83 Perfect</a>: Allows you to closely examine your UI to help with designing and building. 84 (<strong>Window > Open Perspective > Pixel Perfect</strong>).</li> 85 86 <li><a href="{@docRoot}tools/debugging/ddms.html">DDMS</a>: Provides 87 debugging features including: screen capturing, thread and heap information, and logcat 88 (<strong>Window > Open Perspective > DDMS</strong>).</li> 89 90 <li><a href="{@docRoot}tools/help/adb.html">adb</a>: Provides access to 91 a device from your development system. Some features of 92 <code>adb</code> are integrated into ADT such as project installation (Eclipse run menu), 93 file transfer, device enumeration, and logcat (DDMS). You must access the more advanced 94 features of <code>adb</code>, such as shell commands, from the command line.</li> 95 96 <li><a href="{@docRoot}tools/help/proguard.html">ProGuard</a>: Allows code obfuscation, 97 shrinking, and optimization. ADT integrates ProGuard as part of the build, if you <a href= 98 "{@docRoot}tools/help/proguard.html#enabling">enable it</a>.</li> 99 </ul> 100 101<h2 id="editors">Code Editors</h2> 102 103 <p>In addition to Eclipse's standard editor features, ADT provides custom XML editors to help 104 you create and edit Android manifests, resources, menus, and layouts in a form-based or graphical 105 mode. Double-clicking on an XML file in Eclipse's package explorer opens the 106 appropriate XML editor. 107 108 <div class="sidebox-wrapper"> 109 <div class="sidebox"> 110 <h2>Google I/O Session Video</h2> 111 <p>View the segment on the <a href= 112 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=30m50s">XML editors</a> for more 113 information.</p> 114 </div> 115 </div> 116 117 <p class="note"><strong>Note:</strong> You can edit Android-specific XML files (such as a layout 118or manifest) in both a graphical mode and also an XML markup mode. You can switch between 119these modes with the pair of tabs at the bottom of each custom XML editor.</p> 120 121 <p>In addition, some special file types that don't have custom editors, such as drawables, animations, 122 and color files offer editing enhancements such as XML tag completion.</p> 123 124<p>ADT provides the following custom, form-based XML editors:</p> 125 126 <dl> 127 128 <dt><strong>Graphical Layout Editor</strong></dt> 129 130 <dd>Edit and design your XML layout files with a drag and drop interface. The layout editor 131 renders your interface as well, offering you a preview as you design your layouts. This editor 132 is invoked when you open an XML file with a view declared (usually declared in 133 <code>res/layout</code>. For more information, see <a href="#graphical-editor">Graphical Layout 134 Editor</a>.</dd> 135 136 <dt><strong>Android Manifest Editor</strong></dt> 137 138 <dd>Edit Android manifests with a simple graphical interface. This editor is invoked 139 when you open an <code>AndroidManifest.xml</code> file.</dd> 140 141 <dt><strong>Menu Editor</strong></dt> 142 143 <dd>Edit menu groups and items with a simple graphical interface. This editor is 144 invoked when you open an XML file with a <code><menu></code> declared (usually located in 145 the <code>res/menu</code> folder).</dd> 146 147 <dt><strong>Resources Editor</strong></dt> 148 149 <dd>Edit resources with a simple graphical interface. This editor is invoked when 150 you open an XML file with a <code><resources></code> tag declared.</dd> 151 152 <dt><strong>XML Resources Editor</strong></dt> 153 154 <dd>Edit XML resources with a simple graphical interface. This editor is invoked 155 when you open an XML file.</dd> 156 </dl> 157 158 159 <h3 id="resource-linking">Resource linking enhancements</h3> 160 <p>In addition to the normal code editing features of Eclipse, ADT provides enhancements to the Android 161 development experience that allow you to quickly jump to declarations of various types of resources such 162 as strings or layout files. You can access these enhancements by holding down the control key and 163 clicking on the following items: 164 165 <ul> 166 167 <li>A resource identifier, such as <code>R.id.button1</code>, jumps 168 to the XML definition of the view.</li> 169 170 <li>A declaration in the <code>R.java</code> file, such as <code>public 171 static final int Button01=0x7f050000"</code>, jumps to the corresponding XML definition.</li> 172 173 <li>An activity or service definition in your manifest, such as 174 <code><activity android:name=".TestActivity"></code>, jumps to the corresponding Java class. You can 175 jump from an activity definition (or service definition) into the corresponding Java class.</li> 176 177 <li>You can jump to any value definition (e.g. <code>@string:foo</code>), regardless of 178which XML file 179 "foo" is defined in.</li> 180 181 <li>Any file-based declaration, such as <code>@layout/bar</code>, opens the file.</li> 182 183 <li>Non-XML resources, such as <code>@drawable/icon</code>, launches 184 Eclipse's default application for the given file type, which in this case is an 185 image.</li> 186 187 <li><code>@android</code> namespace resources opens the resources found in 188 the SDK install area.</li> 189 190 <li>Custom views in XML layouts, such as <code><foo.bar.MyView></foo.bar.MyView></code>, 191 or <code><view class="foo.bar.MyView"></code>) jump to the corresponding custom view classes.</li> 192 193 <li>An XML attribute such as <code>@android:string/ok</code> or <code>android.R.string.id</code> in Java code 194 opens the file that declares the strings. The XML tab opens when doing this, not 195 the form-based editor.</li> 196 197 </ul> 198 199 <h2 id="graphical-editor">Graphical Layout Editor</h2> 200 201 <p>ADT provides many features to allow you to design and build your application's user interface. 202 Many of these features are in the graphical layout editor, which you can access by opening one of 203 your application's XML layout files in Eclipse. 204 </p> 205 206 <p>The graphical layout editor is the main screen that you use to visually design and build your 207 UI. It is split up into the following parts:</p> 208 209 <dl> 210 <dt><strong>Canvas</strong></dt> 211 212 <dd>In the middle of the editor is the canvas. It provides the rendered view of your 213 layout and supports dragging and dropping of UI widgets 214 directly from the palette. You can select the platform version used to render the items in 215 the canvas. Each platform version has its own look and feel, which might be the similar to or 216 radically different from another platform version. The canvas renders the appropriate look 217 and feel for the currently selected platform version. 218 This platform version does not need to be the same as the version that your 219 application targets. 220 221 <p>The canvas also provides 222 context-sensitive actions in the layout actions bar, such as adjusting layout margins and 223orientation. 224 The layout actions bar displays available actions depending on the selected UI element in the 225 canvas.</p> 226 </dd> 227 228 <dt><strong>Outline</strong></dt> 229 230 <dd>On the right side of the editor is the outline view. It displays a hierarchical 231 view of your layout where you can do things such as reorder of views. The outline 232 view exposes similar functionality as the canvas but displays your layout in an ordered 233 list instead of a rendered preview.</dd> 234 235 <dt><strong>Palette</strong></dt> 236 237 <dd>On the left side of the editor is the palette. It provides a set of widgets that 238 you can drag onto the canvas. The palette shows rendered previews of the 239 widgets for easy lookup of desired UI widgets.</dd> 240 241 <dt><strong>Configuration Chooser</strong></dt> 242 243 <dd>At the top of the editor is the configuration chooser. 244 It provides options to change a layout's rendering mode or screen type.</dd> 245 </dl> 246 247 <img src="{@docRoot}images/layout_editor.png" alt="graphical layout editor screenshot" 248 height="500" id="layout-editor" name="layout-editor"> 249 250 <p class="img-caption"><strong>Figure 1.</strong> Graphical layout editor</p> 251 252 <h3 id="canvas">Canvas and outline view</h3> 253 254 <div class="sidebox-wrapper"> 255 <div class="sidebox"> 256 <h2>Google I/O Session Video</h2> 257 258 <p>View the segment on the <a href= 259 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=7m16s">canvas and outline view</a> and the 260 <a href="http://www.youtube.com/watch?v=Oq05KqjXTvs#t=11m43s">layout actions bar</a> 261 for more information. 262 </p> 263 </div> 264 </div> 265 266 <p>The canvas is the area where you can drag and drop UI widgets from the palette to design your 267 layout. The canvas offers a rendered preview of your layout depending on factors such as the 268 selected platform version, screen orientation, and currently selected theme that you specify in 269 the <a href="#configuration-chooser">configuration chooser</a>. You can also drag and drop 270 items into the outline view, which displays your layout in a hierarchical list. The outline view 271 exposes much of the same functionality as the canvas but offers another method of organization 272 that is beneficial for ordering and quickly selecting items. When you right-click a specific item 273 in the canvas or outline view, you can access a context-sensitive menu that lets you modify the 274 following attributes of the layout or view:</p> 275 276 <dl> 277 <dt><strong>View and layout properties</strong></dt> 278 279 <dd> 280 When you right-click a view or layout in the canvas or outline view, it brings up a 281 context-sensitive menu that lets you set things such as: 282 283 <ul> 284 <li>ID of the view or layout</li> 285 286 <li>Text of the view</li> 287 288 <li>Layout width</li> 289 290 <li>Layout height</li> 291 292 <li>Properties such as alpha or clickable</li> 293 </ul> 294 </dd> 295 296 <dt><strong>Animation preview and creation</strong></dt> 297 298 <dd> 299 If your layout or view is animated, you can preview the animation directly in the canvas 300 (when you select Android 3.0 or later as the platform version in the configuration chooser). 301 Right-click an item in the canvas and select <strong>Play Animation</strong>. If 302 animation is not associated with item, an option is available in the menu to create one. 303 304 <p>View the segment on the <a href= 305 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=28m30s">animation features</a> for more 306 information.</p> 307 </dd> 308 309 <dt><strong>Extract as Include</strong></dt> 310 311 <dd>You can extract parts of a current layout into its own layout file, 312 which you can then include in any layout with a single line of XML. See <a href= 313 "#extract-as-include">Layout Refactoring Support</a> for more information.</dd> 314 </dl> 315 316 <h4>Other canvas features</h4> 317 318 <p>The canvas has additional features not available in the outline view:</p> 319 320 <ul> 321 322 <li>Edit views with the layout actions bar: The context-sensitive layout actions bar allows you to 323 edit how a view is laid out in your UI. The available actions depend on the currently 324 selected view and its parent layout. Some common actions include 325 toggling the fill mode of the view and specifying margins. For instance, if you select a 326 {@link android.widget.Button} 327 in a {@link android.widget.LinearLayout}, you see actions related to the {@link 328android.widget.LinearLayout}, such as a toggle to switch 329 between horizontal and vertical layout, and a toggle to control whether its children are 330 aligned along their text baseline. You will also see toolbar actions to control the individual 331 layout attributes of the child, such as whether the child should stretch out to match its 332 parent's width and height, a dropdown action to set the child's layout gravity, a button to open 333 a margin editor, and a layout weight editor.</li> 334 335 <li>Edit a nested layout in its current context: If you are editing a layout 336 that includes another layout, you can edit the included layout in the layout that included 337 it.</li> 338 339 <li>Preview drag and drop location: When you drag and drop a UI widget onto the canvas, ruler 340 markers appear showing you the approximate location of the UI widget depending on the 341 type of layout, such as {@link android.widget.RelativeLayout} or {@link 342 android.widget.LinearLayout}.</li> 343 344 <li>Preview animations: You can preview view and layout animations when you select Android 2.1 345 or later for the platform version in the configuration bar.</li> 346 347 <li>Render layouts in real-time: Layouts are rendered as accurately as possible according to 348 the platform version, including the appropriate system and action bars.</li> 349 350 <li>Support for fragments: Fragments can be rendered in the same screen as the layout that 351 includes the fragments.</li> 352 353 </ul> 354 355 <img src="{@docRoot}images/canvas.png" alt="screenshot of the canvas" height="553"> 356 357 <p class="img-caption"><strong>Figure 2.</strong> Canvas portion of the layout editor showing 358 a rendered preview of an application</p> 359 360 <img src= 361 "{@docRoot}images/layout_outline.png" alt="screenshot of the outline view" height="185"> 362 363 <p class="img-caption"><strong>Figure 3.</strong> Outline view showing current layout's structure</p> 364 365 <h3 id="palette">Palette</h3> 366 367 <div class="sidebox-wrapper"> 368 <div class="sidebox"> 369 <h2>Google I/O Session Video</h2> 370 371 <p>View the segment on the <a href= 372 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=7m53s">palette</a> for more information.</p> 373 </div> 374 </div> 375 376 <p>The palette contains the UI widgets that you can drag and drop onto the canvas and add to your 377 layout. The pallete categorizes the widgets and shows rendered previews 378 for easier lookup. The main features of the palette include:</p> 379 380 <ul> 381 <li>Different modes of rendered previews include: icons only, icons and text, tiny previews, 382 small previews, and previews (rendered in real size). Previews are only available for layouts 383 rendered with the latest revisions of Android 2.1 (API Level 7) or later.</li> 384 385 <li>Custom views in your project or library projects are added under custom views 386 category.</li> 387 388 <li>Arrange UI widgets alphabetically or by category.</li> 389 </ul> 390 <img src="{@docRoot}images/palette.png" alt="palette screenshot" height="566"> 391 392 <p class="img-caption"><strong>Figure 4.</strong> Palette showing available UI widgets</p> 393 394 <h3 id="config-chooser">Configuration chooser</h3> 395 396 <div class="sidebox-wrapper"> 397 <div class="sidebox"> 398 <h2>Google I/O Session Video</h2> 399 400 <p>View the segment on the <a href= 401 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=12m51s">configuration chooser</a> for more 402 information.</p> 403 </div> 404 </div> 405 406 407 <p>The configuration chooser allows you to create and configure different configurations of 408 a layout for different situations, such as one for landscape and one for portrait mode. You can 409 set the following options for each configuration of a layout: 410 </p> 411 <ul> 412 <li>Screen type combo box: Predefined screen settings for common device configurations. You 413 can also create your own by selecting <strong>Custom...</strong>.</li> 414 415 <li>Screen orientation combo box: Portrait or Landscape screen orientation.</li> 416 417 <li>Theme combo box: Predefined themes or a custom theme that you have created.</li> 418 419 <li>Platform combo box: Platform version used to render the canvas and palette as well as 420 displaying appropriate themes.</li> 421 422 <li>Custom layout combo boxes: The locale, dock, and time of day combo boxes let you select 423 different versions of the same layout depending on the device's current state. You can 424 create a new version of a layout with the <strong>Create</strong> button.</li> 425 </ul> 426 427 <img src="{@docRoot}images/layout_bar.png" alt= 428 "configuration chooser screenshot" height="50" id="configuration-chooser" name="configuration chooser"> 429 430 <p class="img-caption"><strong>Figure 5.</strong> Configuration chooser</p> 431 432 <h2 id="refactoring">Layout Refactoring Support</h2> 433 434 <div class="sidebox-wrapper"> 435 <div class="sidebox"> 436 <h2>Google I/O Session Video</h2> 437 438 <p>View the segment on <a href= 439 "http://www.youtube.com/watch?v=Oq05KqjXTvs#t=18m00s">refactoring features</a> for a rundown 440of the more important refactoring features.</p> 441 442 </div> 443 </div> 444 445 <p>In both the graphical and XML layout editor, there are many features that help you quickly 446 refactor your layouts. The following list describes the major refactoring support:</p> 447 448 <dl> 449 450 <dt><strong>Change layout</strong></dt> 451 <dd>This lets you change the layout on the fly and re-renders the canvas for you. 452 You can apply this refactoring to any layout and the layout is converted to the new type if 453 possible. In many cases, the opening and closing tags of the layout's XML element are changed 454 along with things such as ID attributes and their references. However, for some supported 455 types, ADT attempts to preserve the layout, such as changing a {@link 456 android.widget.LinearLayout} to a {@link android.widget.RelativeLayout}.</dd> 457 458 <dt><strong>Change widget</strong></dt> 459 <dd>This lets you select one or more widgets and converts them to a new widget type. In 460 addition to changing the element name, it also removes any 461 attributes that are not supported by the new widget type and adds in any mandatory attributes 462 required by the new widget type. If the current ID of a widget includes the 463 current widget type in its ID (such as a <code><Button></code> widget named 464 <code>"button1"</code>), then the ID is changed to match the new widget type and all 465 references are updated.</dd> 466 467 <dt id="extract-as-include"><strong>Extract as include</strong></dt> 468 <dd>This lets you extract views inside of an existing layout into their own separate layout 469 file. An <code>include</code> tag that points to the newly created layout file is inserted 470 into the existing layout file. Right-click the view or layout and select <strong>Extract as 471 Include...</strong>.</dd> 472 473 <dt><strong>Extract string</strong></dt> 474 <dd>Extract strings from either XML or Java files into their own separate resource file.</dd> 475 476 <dt><strong>Extract style</strong></dt> 477 <dd>Extract style-related attributes from a layout and define them in a new 478 <code>styles.xml</code> file. You can select multiple views and this refactoring extracts all 479 of the same styles into one style and assigns that style to all the views that use it.</dd> 480 481 <dt><strong>Wrap-in container</strong></dt> 482 <dd>This lets you select one or more sibling elements and wrap them in a new container. This 483 can be applied to the root element as well, in which case the namespace declaration attributes 484 will be transferred to the new root. This refactoring also transfers <code>layout_</code> 485 attribute references to the new root, For example, suppose you have a {@link android.widget.RelativeLayout}. 486 If other widgets have layout constraints pointing to your widget, wrapping the widget causes 487 these constraints to point to the parent instead.</dd> 488 489 <dt><strong>Quick Assistant</strong></dt> 490 <dd>Provides refactoring suggestions depending on the current context. Press 491 <strong>Ctrl-1</strong> (or <strong>Cmd-1</strong> on 492 Mac) in an editor, and Eclipse provides a list of possible refactorings depending on the 493 context. The Quick Assistant provides fast access to all of the above refactorings, where applicable. 494 For example, if you are editing an XML value and decide you want to extract it out 495 as a string, place the text cursor in the string and press Ctrl-1 to see the refactoring context 496 menu.</dd> 497 </dl> 498 499 500 501 502 503<h2 id="Updating">Updating the ADT Plugin</h2> 504 505<p>From time to time, a new revision of the ADT Plugin becomes available, with 506new features and bug fixes. Generally, when a new revision of ADT is available, 507you should update to it as soon as convenient. </p> 508 509<p>In some cases, a new revision of ADT will have a dependency on a specific 510revision of the Android SDK Tools. If such dependencies exist, you will need to 511update the SDK Tools package of the SDK after installing the new revision of 512ADT. To update the SDK Tools package, use the Android SDK Manager, as 513described in <a href="{@docRoot}sdk/installing/adding-packages.html">Adding SDK Packages</a>.</p> 514 515<p>To learn about new features of each ADT revision and also any dependencies on 516the SDK Tools, see the listings in the <a href="{@docRoot}tools/revisions/index.html">Revisions</a> 517section. To determine the version currently installed, open the 518Eclipse Installed Software window using <strong>Help</strong> 519> <strong>Software Updates</strong> and refer to the version listed for 520"Android Development Tools".</p> 521 522<p>Follow the steps below to check whether an update is available and, if so, 523to install it. </p> 524 525<ol> 526 <li>Select <strong>Help</strong> > <strong>Check for Updates</strong>. 527 <p>If there are no updates available, a dialog will say so and you're done.</p></li> 528 <li>If there are updates available, select Android DDMS, Android Development Tools, 529 and Android Hierarchy Viewer, then click <strong>Next</strong>.</li> 530 <li>In the Update Details dialog, click <strong>Next</strong>.</li> 531 <li>Read and accept the license agreement and then click <strong>Finish</strong>. 532 This will download and install the latest version of Android DDMS and 533 Android Development Tools.</li> 534 <li>Restart Eclipse.</li> 535</ol> 536 537 538<p>If you encounter problems during the update, remove the existing ADT plugin from Eclipse, then 539perform a fresh installation, using the instructions for <a 540href="{@docRoot}sdk/installing/installing-adt.html">Installing the ADT 541Plugin</a>.</p> 542