Register now for Android Dev Summit 2019!

Manage your app's UI resources with Resource Manager

Resource Manager is a new tool window for importing, creating, managing, and using resources in your app. You can open the tool window by selecting View > Tool Windows > Resource Manager from the menu bar or by selecting Resource Manager on the left side bar.

Figure 1: The Resource Manager

  1. Click Add to add a new resource to your project. You can add image assets, vector assets, resources, or you can import resources into your project.
  2. The module dropdown lets you view resources specific to a module.
  3. Use the search bar to search the selected module for a resource.
  4. The Resource Manager manages your app's drawables, colors, and layouts. Use these tabs to switch between each resource type.
  5. The filter button lets you show resources from external libraries.
  6. The main content area displays previews of your resources. Right-click on a resource to see a context menu where, among other things, you can rename the resource and search your app for where the resource is used.
  7. Click these buttons to view your resources as either tiles or lists.
  8. Click these buttons to change the preview size of your resources.

In addition to the features mentioned above, the Resource Manager provides a simple way to bulk import drawables into your project. You can drag and drop your image files—including SVG files—directly onto the Resource Manager, or you can use the Import Drawables wizard. For more information, see the Import resources into your project section below.

Double-click on a resource to have the Resource Manager display more detailed information. If you have multiple versions of a resource, this detailed view displays each version along with any associated qualifiers, as shown in figure 2. From here, you can also double-click on a specific version to open it in an editor window.

Figure 2: The Resource Manager showing versions of an image resource for different screen densities.

Import drawables into your project

You can import image resources by dragging and dropping the resource files or folders directly onto the Resource Manager. After you drop the resources onto the Resource Manager, the Import drawables dialog appears, where you can view the summary of the resources and add any needed qualifiers before importing.

To import image resources into your project, do the following:

  1. Drag and drop your images directly onto the Resource Manager window in Android Studio. Alternatively, you can click the plus icon (+), choose Import Drawables, as shown in figure 3, and then select the files and folders that you want to import.

    Figure 3: Select Import Drawables from the dropdown menu.

  2. The Import drawables dialog appears. As shown in figure 4, this dialog displays a list of the resources you're importing. If you're providing multiple versions of the same resource, add device configuration qualifiers that describe the specific configuration that the resource supports. For example, if you're providing multiple versions of the same resource for different screen densities, you can add a Density qualifier for each version. Note that if two or more resources have the same name and qualifiers, only one version is imported. For more information on resource qualifiers, see Providing alternative resources.

    Figure 4: The Import Drawables dialog.

  3. When you're ready to import your resources, click the Import button.

In the Resource Manager window, your resources are now ready for you to use in your project, as shown in figure 5.

Figure 5: The Resource Manager now shows your imported images.

Automatically parse drawable densities

When you import a file or folder, and its path contains a density qualifier, the Resource Manager automatically applies the density qualifier as part of the import. The Resource Manager can parse both Android's density qualifiers and iOS's scale factors.

This table lists how different supported densities is represented for both Android and iOS:

Density Android density qualifier iOS scaling factor
Low-density (~120dpi) ldpi not supported
Medium-density (~160dpi) mdpi original scale
High-density (~240dpi) hdpi not supported
Extra-high-density (~320dpi) xhdpi @2x
Extra-extra-high-density (~480dpi) xxhdpi @3x
Extra-extra-extra-high-density (~640dpi) xxxhdpi @4x

Here are some examples of how input paths translate to resource paths after import:

Android density qualifier: hdpi
Input path: /UserFolder/icon1/hdpi/icon.png
Resource path: <projectFolder>/<moduleFolder>/src/main/res/drawable-hdpi/icon.png
Android density qualifier: xxhdpi
Input path: /UserFolder/icon1/abc-xxhdpi/icon.png
Resource path: <projectFolder>/<moduleFolder>/src/main/res/drawable-xxhdpi/icon.png
iOS scaling factor: @2x
Input path: /UserFolder/icon1/icon@2x.png
Resource path: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon.png
iOS scaling factor: @2x
Input path: /UserFolder/icon1/icon@2x_alternate.png
Resource path: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon_alternate.png

For more information on supporting devices with different pixel densities, see Support different pixel densities.

Drag and drop drawables into your layout

You can drag and drop drawables from the Resource Manager directly onto a layout. When you drop a resource onto a layout, the Resource Manager creates a corresponding ImageView for that drawable, as shown in animation 1:

Animation 1: Dragging and dropping drawables onto a layout in Design view.

You can also drag and drop onto the XML view in the Text tab, as shown in animation 2:

Animation 2: Dragging and dropping drawables onto a layout in Text view.

When dropping a drawable onto a layout in the Text tab, the generated code differs depending on where you drop the layout:

  • If you drop a drawable onto a blank area, the Resource Manager generates a corresponding ImageView.
  • If you drop a drawable onto any attribute, the Resource Manager replaces that attribute value with a reference to the drawable.
  • If you drop a drawable onto an existing ImageView element, the Resource Manager replaces the corresponding source attribute.