Cross-Platform Icon Button Example

Embarcadero

vor 2 Jahren

Our Icon Button Demo shows you how to add an icon to a button for a sleek, professional look. This cross-platform app is built using Delphi and provides a single code base and UI for Android, iOS, macOS, Windows, and Linux. Whether you’re looking to add a personal touch to your device or want to create a more sophisticated interface for your users, our Icon Button Demo is the perfect solution. Give it a try today!

Download the full cross-platform icon button demo 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.

Inhaltsverzeichnis

What is an icon button in software development?

An icon button is a graphical control element that allows users to interact with a software application. It typically consists of an icon or image that represents a specific action, command, or task. Icon buttons are commonly used in user interfaces to provide visual cues for common actions, such as opening a file or saving a document. They can also be used to provide quick access to frequently used commands or tools. In many cases, icon buttons are more intuitive and efficient than traditional text-based menu items or toolbar buttons. As a result, they are often used in conjunction with other elements, such as drop-down menus and context menus.

Screenshot

What does the icon button demosource code look like?

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.StdCtrls,
  FMX.Layouts, FMX.Effects, FMX.Controls.Presentation;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    GridPanelLayout1: TGridPanelLayout;
    Button1: TButton;
    Button2: TButton;
    Label2: TLabel;
    procedure Button2Click(Sender: TObject);
    procedure Button1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
<strong>    FValue: Integer;
    procedure UpdateLabel(AValue: Integer);</strong>
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.UpdateLabel(AValue: Integer);
begin
  Label2.Text := AValue.ToString;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  Dec(FValue);
  UpdateLabel(FValue);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  Inc(FValue);
  UpdateLabel(FValue);
end;</strong>

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Klassen, System.Variants,

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

FMX.Layouts, FMX.Effects, FMX.Controls.Presentation;

type

TForm1 = Klasse(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

GridPanelLayout1: TGridPanelLayout;

Button1: TButton;

Button2: TButton;

Label2: TLabel;

procedure Button2Click(Sender: TObject);

procedure Button1Click(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

<strong> FValue: Integer;

procedure UpdateLabel(AValue: Integer);</strong>

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.UpdateLabel(AValue: Integer);

Start

Label2.Text := AValue.ToString;

end;

procedure TForm1.Button1Click(Sender: TObject);

Start

Dec(FValue);

UpdateLabel(FValue);

end;

procedure TForm1.Button2Click(Sender: TObject);

Start

Inc(FValue);

UpdateLabel(FValue);

end;</strong>

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.