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?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
Design. Code. Compile. Deploy.
Start Free TrialUpgrade Today
Free Delphi Community EditionFree C++Builder Community Edition
English 
French 
Portuguese 
German 
Japanese