This page will help you through the installation, setup, and basic workflow of designing a theme with the help of Theme Creator. For a complete walkthrough of the creation process, see the How to create a theme page.
You may also want to watch our on How to Get Started video on YouTube.
We recommend that you always have an Xperia device connected to your computer so that you can see your theme on an actual device throughout the design process. Learn more on the Test and verify page.
- Step A. Download and install Theme Creator
- Download Java for free and install it on your computer. You must have a 64-bit Java Runtime Environment (JRE) version 7 or higher installed on your computer to run Theme Creator.
- Download Theme Creator.
- Unzip the downloaded file, theme-creator-v1_3_0.zip into a directory on your hard drive. After unzipping, you should have a file called theme-creator.jar in the directory
- Step B. Create your first theme project
- Open the Theme Creator tool.
- Go through the intro guide.
- On the Welcome screen, click on New project…
Note: If you wish to use Photoshop templates when creating your theme, you can click the link “Learn more about templates” that will take you to the downloadable Zip file, and also provide information on how to use them.
- In the dialog that comes up, enter the required project properties:
- Theme name: Enter the name you want for your theme, which appears on the phone.
- Package name: Come up with a unique identifier for your theme app, which identifies it in the Google Play store. The name should be in this format:
[domain].[company name].[application name]
For example, if your company’s home page is www.mycompany.com, the package name could be:
Note: If you change the package name when you update your theme, Google Play will consider it an entirely different theme, and your users will not be able to update it from their current version.
- Theme version: the version of the theme as displayed on the Phone and in Google Play. You can leave this as 1.0.0 for now. It can be changed at any time later – typically right before you release a new version of your theme.
- Project directory: Select a folder where you would like to place your project. You can create a new folder for it, or select a folder you have already created. We’ll call this the projectRoot folder going forward.
- When you have set your project properties, click OK.
In the Theme Creator window, the left panel is a navigator that allows you to browse through the customizable UI elements. These are organized into categories and groups that you can open and close. A preview panel on the right shows an approximation of how selected resources look in the various screen views in which they appear.
In this example, the preview will show the default versions of all components, since you have not yet customized any resources.
There are a lot of resources available for you to customize, but when you first start the program, you will only see a limited number of them in the tree. This is because by default, a resource group called “Basic theme” is selected. If you want to make a simple theme, customizing only “Basic theme” is enough. If you want to make a more detailed theme, then you can select Advanced theme or “All resources” from the drop-down at the top of the tree.
“All resources” and “Basic theme” side by side. “All resources” contain hundreds of editable resources that allow you to create a highly detailed theme. “Basic theme” contain only the 10-12 most important editable resources.
- Step D. Edit a resource and test the result
To start creating your first theme, we will edit a resource in Theme Creator and preview it directly in the tool.
- In the navigation tree, open up “Basic theme” (this is done by default). Click the resource named Background.
- Notice how the preview pane displays a highlight to show where the Background resource is displayed. This lets you know where the resource is used, and what it looks like by default.
- Click the pen icon by the resource to open the menu and choose Set to color.
- Use the color editor to set the color to #FF9D00. Notice that the preview updates to the new color as you work. When you have chosen the color, click OK.Note: Look at the preview screens to see how they automatically update to show the new color.
- Look at the preview screens to see how they automatically update to show the new color.
Note! You can enable Android 5.0 (Lollipop) previews in the tool by ticking the checkbox named “Lollipop” in the platform selector.
Congratulations! You have now gone through the entire process of using Theme Creator to create a theme and preview the result in the tool. However, in the steps above we have only made a very simple change to illustrate the process. To learn more about what you can do, see How to create a theme or go straight to Test and verify to try your theme on an Xperia smartphone or tablet.