Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!

Changing the color scheme of an Android style

Author: Felipe X60228

In this post, we’ll show you how to use the Bitmap-style designer to change the color scheme of an Android-style you’ve created in IDE Software.

Step 1: Select one of the Style Templates

Open the Bitmap Style Designer via the Tools menu in the IDE.  Select New > New Android Light Style. You can choose any of the style templates provided here. but for this blog post, we are going to create a new version of the Android style by changing the color scheme from green accents to red accents.


Step 2: Export the Style Images

Browse to the Images node and select Export. Select a Destination Folder, then click Export.



Step 3: Open the exported images in the graphics program of your choice

Using Photoshop, open the 3x version of the style graphic. Go to Image > Adjustments > Hue/Saturation.



Step 4: Change the Hue/Saturation to quickly customize the style colors

Change the Hue and Saturation values to adjust the colors. After making the changes to the 3x style, save the new style30x.png. Then apply the same changes to the other resolutions and image files in your exported images folder. Alternatively, you can use the 3x graphic, and Photoshop’s Image > Image Size menu to resize the image back down to 2x, 1.5x and 1x. It’s important to keep the same naming conventions, i.e. mystyle.png for the 1x style, mystyle15x.png for the 1.5x style, mystyle20x.png for the 2x style and mystyle30x.png for the 3x style.



Step 5: Update the style images in the Bitmap Style Designer and save the new style

Select the Images node in the Bitmap Style Designer. Select the first image in the list, and click “Update“. Select the replacement image and click OK. Repeat until you have replaced each of the images with your updated red graphics.  After you are done updating the images, select File > Save As > FireMonkey Style (*.style).


Step 6: Load the style into a StyleBook and apply it to your application.

Place a StyleBook onto your form. Double-click on the StyleBook and click on the “Open” icon. Browse to the location of the newly saved red Android Style. After loading the new style, click the “x” and select “Apply Style…” and “OK”. Select your form in the Structure pane and set the StyleBook property to StyleBook1. Ensure that “Style” in the FireUI Multi-Device Designer is set to “Android“. You will now see that your UI elements that previously showed a green color accent now have a red color accent. A good sample app to use is the Controls demo which can be found under SamplesMulti-Device SamplesControls.



As you can see in this screenshot, the TAniIndicator control still shows the green color accent because I didn’t update the separate graphics for it in this case.


Get RAD Studio Berlin Update 2 Anniversary Edition today.

Get More. Do More. Spend Less. Six Great Offers for the Holiday Season!


What's Coming in Delphi, C++Builder, and RAD Studio 11.2 Alexandria

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.