Button

Buttons are an essential way to interact with and navigate through an app, and should clearly communicate what action will occur after the user taps them
Examples
To adapt the component to the style of the application it is often necessary to change its colors.
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {
​
    private Button btnRed;
    private Button btnGreen;
    private Button btnBlue;
    public HelloWorld(){
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI(){
        btnRed = new Button("Red");
        btnRed.setBackForeColors(Color.RED, Color.WHITE);
        add(btnRed, CENTER,CENTER );
        
        btnGreen = new Button("Green");
        btnGreen.setBackForeColors(Color.GREEN, Color.WHITE);
        add(btnGreen, CENTER, AFTER );
        
        btnBlue = new Button("Blue");
        btnBlue.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnBlue, CENTER,AFTER);
    }
}
Full Button
Make the button the width of the screen.
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {
​
    private Button btnFull;
    
    public HelloWorld(){
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI() {
        btnFull = new Button("Full Button");
        btnFull.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnFull, CENTER, CENTER, PARENTSIZE, PREFERRED);
​
    }
}
Button shapes
Modify the button edges.
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow{
​
    private Button btnRounded;
    private Button btnBorderless;
    private Button btnOutlined;
    
    public HelloWorld(){
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI(){
        btnRounded = new Button("Rounded Corners Button", Button.BORDER_ROUND);
        btnRounded.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnRounded, CENTER, CENTER );
​
        btnBorderless = new Button("Borderless Button", Button.BORDER_NONE);
        btnBorderless.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnBorderless, CENTER, AFTER+5);
        
        btnOutlined = new Button("Outlined Button", Button.BORDER_OUTLINED);
        btnOutlined.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnOutlined, CENTER, AFTER+5);
​
    }
}
Sizes
Change the buttons sizes.
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {
​
    private Button btnLarge;
    private Button btnDefaultSize;
    private Button btnSmall;
    
    public HelloWorld() {
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public  void  initUI() {
        
        btnLarge = new Button("Large",Button.BORDER_ROUND);
        btnLarge.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnLarge, LEFT+20, CENTER,btnLarge.getPreferredWidth() <=  48  ? DP +  96: btnLarge.getPreferredWidth(),DP +  54);
        
        btnDefaultSize = new Button("Default",Button.BORDER_ROUND);
        btnDefaultSize.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnDefaultSize, AFTER+5, CENTER_OF);
        
        btnSmall = new Button("Small",Button.BORDER_ROUND);
        btnSmall.setBackForeColors(Color.BLUE, Color.WHITE);
        add(btnSmall, AFTER+5, CENTER_OF, btnSmall.getPreferredWidth() <=  24? DP +  48  : btnSmall.getPreferredWidth(), DP +  27,btnDefaultSize);
        
    }
}
Button image
Add an image to the button.
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.ui.image.Image;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {
​
    private Button btnLeftImage;
    
    public HelloWorld() {
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI() {
        try {
            Image img = new Image("images/bt_info.png");
            btnLeftImage = new Button("Left Image", img.scaledBy(0.2,0.2), RIGHT,10);
            btnLeftImage.setBackForeColors(Color.BLUE, Color.WHITE);
            add(btnLeftImage, CENTER, AFTER+25);    
        } catch (Exception exception) {
            exception.printStackTrace();
        }       
    }
}
Do not forget to create a folder called "images" inside /src/main/resources and save the bt_info.png image inside it [images].
Events
Handling events with addPressListener() :
package com.totalcross;
import totalcross.ui.gfx.Color;
import totalcross.sys.Settings;
import totalcross.ui.Button;
import totalcross.ui.MainWindow;
public class HelloWorld extends MainWindow {
​
    private Button btnRed;
    private Button btnGreen;
    private Button btnBlue;
    public HelloWorld(){
        setUIStyle(Settings.MATERIAL_UI);
    }
    @Override
    public void initUI(){
        btn = new Button("Do something");
        btn.setBackForeColors(Color.RED, Color.WHITE);
        btn.addPressListener((event) -> {
            // DO SOMETHING
        })
        add(btn, CENTER,CENTER );
    }
}
Behind the Class
Attributes
Type
Name
Description
boolean
Button.CENTRALIZE
Center image and text on the button.
Methods
Type
Name
Description
Constructor
Button( )
Creates a simple button
Constructor
Button(Image img)
Creates a simple button with the referred image
Constructor
Button(Image img, byte border)
Creates a button with the referreds image and border
Constructor
Button(String text)
Creates a button with the referred text
Constructor
Button(String text, byte border)
Creates a button with the referreds text and border
Constructor
Button(String text, Image img, int textPosition, int gap)
Creates a button with the referred text and image
Image
getImage( )
Return the button image
String
getText( )
Return the button text
Boolean
isPressed( )
Return true if button is pressed
void
press(boolean pressed)
If true, press the button
void
setBorder(byte border)
Set the button border style
void
setImage(Image img)
Set the button image
void
setPressedColor(int newColor)
Return the button text
void
setText(String text)
Set the button text
void
simulatePress( )
Press and depress the button
References
See also our quick tutorial video on creating buttons.
See the Java Docs for more information.
Aligned Labels
Check
Last updated 7 months ago
Type	Name	Description
boolean	Button.CENTRALIZE	Center image and text on the button.