FMX Demo Applications

Overview

The SVGIconImageList library provides two comprehensive FMX demo applications that showcase cross-platform icon management capabilities. These demos work on Windows, macOS, iOS, and Android, demonstrating the power of SVG icons in multi-platform applications.

Location: Demo\DXXX\ folder (where DXXX is your Delphi version folder)

Demo Applications

1. SVGIconImageListDemoFMX

Main demo for the TSVGIconImageList component, showing:

• Icon resizing at multiple sizes simultaneously
• Glyph components with different icon sizes
• ListView with icon items
• Dynamic icon assignment
• Runtime component editor
• Visual effects (GrayScale, FixedColor, Opacity)

See: TSVGIconImageList FMX Demo for detailed documentation.

2. SVGIconImageDemoFMX

Focused demo for the TSVGIconImage component, demonstrating:

• Single SVG image display
• Multi-resolution bitmap generation
• Scale-factor responsive icons
• Different images at different device scales
• Cross-platform image rendering

See: TSVGIconImage FMX Demo for detailed documentation.

Key Differences from VCL

Color Types

VCL uses TColor:

SVGIconImageList1.FixedColor := clBlack; // VCL

FMX uses TAlphaColor:

SVGIconImageList1.FixedColor := TAlphaColorRec.Black; // FMX

Opacity Types

VCL uses Byte (0-255):

SVGIconImageList1.Opacity := 128; // VCL: 50% transparent

FMX uses Single (0.0-1.0):

SVGIconImageList1.Opacity := 0.5; // FMX: 50% transparent

Multi-Resolution Support

FMX automatically generates bitmaps at multiple scales:

• 1x - Standard resolution (96 DPI)
• 1.5x - Medium resolution (144 DPI)
• 2x - Retina/High-DPI (192 DPI)
• 3x - Ultra-high resolution (288 DPI)

This ensures perfect icons on all devices from standard monitors to Retina displays and mobile devices.

AutoSizeBitmaps Property

FMX-specific property for dynamic bitmap generation:

SVGIconImageList1.AutoSizeBitmaps := True; // Generate bitmaps on demand

When True, bitmaps are created dynamically for requesting components at their needed size. When False, uses predefined scale factors.

Running the Demos

Prerequisites

• Delphi 10.3 Rio or later (minimum recommended)
• SVGIconImageList FMX components installed
• Platform SDK for target platform (iOS, Android, macOS)

Steps to Run

Windows:

1. Navigate to Demo\DXXX\ folder
2. Open SVGIconImageListDemoFMX.dpr or SVGIconImageDemoFMX.dpr
3. Select Win32 or Win64 platform
4. Build and run (F9)

macOS:

1. Open the project
2. Select macOS 32-bit or macOS 64-bit platform
3. Configure connection to Mac (if developing on Windows)
4. Build and deploy

iOS:

1. Open the project
2. Select iOS Device or iOS Simulator
3. Configure iOS SDK and provisioning
4. Build and deploy to device/simulator

Android:

1. Open the project
2. Select Android or Android 64-bit
3. Configure Android SDK paths
4. Build and deploy to device/emulator

Common Features Demonstrated

Dynamic Icon Resizing

Both demos show real-time icon resizing:

procedure TMainForm.ResizeIcons(ASize: Integer);
begin
  SVGIconImageList1.Size := ASize;
  SVGIconImageList1.RefreshAllIcons; // Force regeneration
end;

Platform-Specific Icon Loading

Load icons from platform-appropriate paths:

procedure TMainForm.LoadPlatformIcons;
var
  IconPath: string;
begin
  {$IFDEF MSWINDOWS}
  IconPath := 'C:\Icons\';
  {$ENDIF}
  {$IFDEF MACOS}
  IconPath := TPath.Combine(TPath.GetHomePath, 'Icons');
  {$ENDIF}
  {$IFDEF ANDROID}
  IconPath := TPath.Combine(TPath.GetDocumentsPath, 'icons');
  {$ENDIF}
  {$IFDEF IOS}
  IconPath := TPath.Combine(TPath.GetDocumentsPath, 'icons');
  {$ENDIF}

  SVGIconImageList1.LoadFromFiles(GetFilesInPath(IconPath));
end;

Visual Effects

Apply FMX-specific effects:

// GrayScale
SVGIconImageList1.GrayScale := True;

// Fixed Color (note TAlphaColor)
SVGIconImageList1.FixedColor := TAlphaColorRec.Crimson;

// Opacity (note 0.0-1.0 range)
SVGIconImageList1.Opacity := 0.75;

Glyph Integration

Use SVG icons in button glyphs:

// Assign ImageList
Button1.Images := SVGIconImageList1;

// Set icon index
Button1.ImageIndex := 0;

// Icons automatically scale with button size

ListView with Icons

Populate ListView with SVG icons:

procedure TMainForm.PopulateListView;
var
  Item: TListViewItem;
begin
  ListView1.ItemAppearance.ItemAppearance := 'ImageListItemRightButton';
  ListView1.Images := SVGIconImageList1;

  Item := ListView1.Items.Add;
  Item.Text := 'Home';
  Item.ImageIndex := 0;

  Item := ListView1.Items.Add;
  Item.Text := 'Settings';
  Item.ImageIndex := 1;
end;

Demo Icons

Both demos use free SVG icons from Icons8:

• Location: Demo\flat-color-icons\ folder
• License: Free to use
• Source: https://github.com/icons8/flat-color-icons

The collection includes:

• Navigation icons (home, back, forward)
• Action icons (save, open, edit, delete)
• Status icons (warning, error, success)
• UI icons (settings, menu, search)

Cross-Platform Testing Tips

Windows

• Test on different DPI settings (100%, 125%, 150%, 200%)
• Verify icon sharpness at all scales
• Test with different monitor resolutions

macOS

• Test on Retina displays (2x scaling)
• Verify on both Intel and Apple Silicon Macs
• Check icon appearance in light and dark modes

iOS

• Test on devices with different scales:
  • iPhone non-Retina: 1x (older devices)
  • iPhone Retina: 2x (iPhone 6/7/8)
  • iPhone Retina HD: 3x (iPhone 6+/7+/8+/X and later)
• Test on both iPhone and iPad
• Verify in portrait and landscape orientations

Android

• Test on devices with different DPIs:
  • MDPI: ~160 DPI (1x)
  • HDPI: ~240 DPI (1.5x)
  • XHDPI: ~320 DPI (2x)
  • XXHDPI: ~480 DPI (3x)
• Test on various screen sizes (phone, tablet)
• Check with different Android versions

Performance Considerations

FMX-Specific Optimizations

1. Use AutoSizeBitmaps wisely:

// For dynamic layouts
SVGIconImageList1.AutoSizeBitmaps := True;

// For fixed layouts (better performance)
SVGIconImageList1.AutoSizeBitmaps := False;

2. Preload icons at startup:

procedure TMainForm.FormCreate(Sender: TObject);
begin
  // Load all icons during splash screen
  LoadAllIcons;

  // Pre-generate bitmaps
  SVGIconImageList1.RefreshAllIcons;
end;

3. Choose appropriate rendering engine:

• Image32: Good balance, no dependencies
• Skia4Delphi: Best quality, requires Skia DLL deployment

See Choice of Factories for engine comparison.

Deployment

Including SVG Files

When deploying FMX applications, you can either:

Option 1: Deploy SVG files separately

• Include SVG files in deployment
• Load at runtime using LoadFromFiles
• Easier to update icons without recompiling

Option 2: Embed in resources

• Embed SVG files in executable resources
• Load using LoadFromResource
• No separate icon files needed

See Deploy FMX Application for complete deployment guide.

Troubleshooting

Icons don't appear on mobile devices

• Verify file paths are platform-appropriate
• Check file permissions on mobile platforms
• Use TPath helper functions for cross-platform paths

Icons appear at wrong scale

• Ensure multi-resolution bitmaps are generated
• Check device scale factor detection
• Verify AutoSizeBitmaps setting

Performance issues on Android

• Reduce icon count in large collections
• Use AutoSizeBitmaps := False for static layouts
• Pre-generate bitmaps during loading screen

Color issues with fixed color

• Remember to use TAlphaColor, not TColor
• Use TAlphaColorRec constants: TAlphaColorRec.Black
• Check ApplyFixedColorToRootOnly setting

Source Code

All FMX demo source code is available:

• TSVGIconImageList Demo: Demo\DXXX\SVGIconImageListDemoFMX.dpr
• TSVGIconImage Demo: Demo\DXXX\SVGIconImageDemoFMX.dpr
• Icons: Demo\flat-color-icons\*.svg

Related Documentation

Component Documentation

• Overview (FMX) - Complete FMX component overview
• FMX Reference - Complete FMX API reference

Advanced Topics

• Demos - Detailed - Comprehensive demo documentation
• Deploy FMX Application - Deployment guide
• Choice of Factories - Rendering engine selection
• Library Architecture - Technical implementation

Specific Demo Details

• TSVGIconImageList FMX Demo - ImageList demo details
• TSVGIconImage FMX Demo - IconImage demo details