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);}@Overridepublic 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);}}
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);}@Overridepublic void initUI() {btnFull = new Button("Full Button");btnFull.setBackForeColors(Color.BLUE, Color.WHITE);add(btnFull, CENTER, CENTER, PARENTSIZE, PREFERRED);​}}
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);}@Overridepublic 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);​}}
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);}@Overridepublic 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);}}
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);}@Overridepublic 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].
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);}@Overridepublic void initUI(){btn = new Button("Do something");btn.setBackForeColors(Color.RED, Color.WHITE);btn.addPressListener((event) -> {// DO SOMETHING})add(btn, CENTER,CENTER );}}
Type | Name | Description |
boolean | Button.CENTRALIZE | Center image and text on the button. |
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 |
See also our quick tutorial video on creating buttons.
See the Java Docs for more information.