Cross-Platform Toggle Button Example

Embarcadero

2 years ago

Looking for an easy and effective way to toggle between two different buttons? Look no further than the Toggle Button Demo! This cross-platform application makes it simple and straightforward to switch between selections on any desktop or mobile device, whether you’re using Android, iOS, macOS, Windows, or Linux. Plus, with a single code base and UI across all platforms, the Toggle Button Demo is guaranteed to provide a consistent experience every time. So why wait? Give it a try today and see how toggle button selection can make your life easier.

Download the full cross-platform Toggle Button source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

Table of Contents

What is a toggle button in software development?

A toggle button is a graphical control element that allows the user to switch between two mutually exclusive options. The options can be either selected or unselected, and the toggle button will indicate the current state of the options. Toggle buttons are often used in multi-select lists, where the user can select multiple options by clicking on the toggle buttons. In addition, toggle buttons can be used to toggle between different views of data, such as a list view and a grid view. Toggle buttons are typically implemented as checkboxes or radio buttons.

Screenshot

What does the source code look like for the demo?

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Layouts,
  FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    SpeedButton1: TSpeedButton;
    GridPanelLayout1: TGridPanelLayout;
    SpeedButton2: TSpeedButton;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Layouts,

FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation;

type

TForm1 = class(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

SpeedButton1: TSpeedButton;

GridPanelLayout1: TGridPanelLayout;

SpeedButton2: TSpeedButton;

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

end.

What do the Toggle Button form elements properties look like?

    object SpeedButton1: TSpeedButton
      StaysPressed = True
      Align = Client
      GroupName = 'togglebutton'
      IsPressed = True
      Size.Width = 155.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      StyleLookup = 'toolbuttonleft'
      Text = 'SpeedButton1'
    end
    object SpeedButton2: TSpeedButton
      StaysPressed = True
      Align = Client
      GroupName = 'togglebutton'
      Size.Width = 155.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      StyleLookup = 'toolbuttonright'
      Text = 'SpeedButton2'
    end

object SpeedButton1: TSpeedButton

StaysPressed = True

Align = Client

GroupName = 'togglebutton'

IsPressed = True

Size.Width = 155.000000000000000000

Size.Height = 50.000000000000000000

Size.PlatformDefault = False

StyleLookup = 'toolbuttonleft'

Text = 'SpeedButton1'

end

object SpeedButton2: TSpeedButton

StaysPressed = True

Align = Client

GroupName = 'togglebutton'

Size.Width = 155.000000000000000000

Size.Height = 50.000000000000000000

Size.PlatformDefault = False

StyleLookup = 'toolbuttonright'

Text = 'SpeedButton2'

end

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.