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.
Table of Contents
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!
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
