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
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();
}
}
}
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);
}
@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 |
Last modified 3yr ago