RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++

Changing the color scheme of an Android style

Author: Felipe X60228

 

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.

openstyle-1767352

styles5_5f00_1-1461762

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!

 


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

Related posts
News

Using C++17 Algorithms Library Parallel Sorting with C++Builder 10.4 Sydney for Win32 and Win64

C++News

C++Builder and Platforms Support

C++

What's New in the GetIt Package Manager - June 2020

C++

RAD Studio 10.4 Now Available, Learn More

Leave a Reply

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

IN THE ARTICLES