| description |
|---|
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 |
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);
}
}
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);
}
}
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);
}
}
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);
}
}
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();
}
}
}{% hint style="warning" %} Do not forget to create a folder called "images" inside /src/main/resources and save the bt_info.png image inside it [images]. {% endhint %}
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 );
}
}| 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.