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 &gt; Open Perspective &gt; 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 &gt; Open Perspective &gt; 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 &gt; Open Perspective &gt; 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 &gt; Open Perspective &gt; 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>&lt;menu&gt;</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>&lt;resources&gt;</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>&lt;activity android:name=".TestActivity"&gt;</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>&lt;foo.bar.MyView&gt;&lt;/foo.bar.MyView&gt;</code>,
191        or <code>&lt;view class="foo.bar.MyView"&gt;</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>&lt;Button&gt;</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&gt; <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> &gt; <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