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