May 11, 2018

Cards – Componentes – Totalcross com Material Design

What are Cards?

Applications typically display data in containers with standard styles. These containers are used to store the information of each item and display them. To create these containers easily and consistently, regardless of device, Totalcross created Cards based on CardView on Android. Cards efficiently provide a way to store a “block” of information to be viewed at the same time as offers a simple and outstanding style.

imagem mostrando cards no padrão material com Totalcross

Types of Cards

You can create and customize the way you want your cards, but it is very common to find certain patterns, such as:

Exemplos de card com totalcross no padrão MaterialDesign

Building an example

If you are not familiar with Totalcross, I suggest you start with HelloWorld, after all, we do not want you to be cursed.

To start we need 3 basic things:

With that, we can start!


One of the easiest is cardWeather. For it we will need some components:

(remembering that it will be built in the class that inherits from the container, in this case we will chmar from CardWeatherSample).

  • one ImageControl (ImageControl imgIco)
  • two Containers (Container cont, cont2)
  • two labels. (Label lbValue, lbText)

So just mount within the initUI(), as we can see below:

public void initUI() {

   try {
     /*As usual, let's start by saying the standard features,
       such as background color, border type and color*/
     borderColor = 0xFFFFFF;

     /*Now let's create the first container and call it cont.
       Let's position it on the left side of the screen.*/
     cont = new Container();
     //Let's create cont2, this is the Container on the right side
     cont2 = new Container();

     //Here we place the cont on the left side
     add(cont, LEFT, TOP, PARENTSIZE+50, PARENTSIZE); 
     //And the cont2 on the right side

     /*Now let's instantiate our ImageControl
       to show the image of the weather.*/ 
     imgIcon = new ImageControl(
            new Image("images/partly-cloudly.png").hwScaledFixedAspectRatio(
            (int) (fmH * 5), true));
     /*Here we will instantiate our Label with the weather number,
       by use font as Lato Medium and tell the color*/
     lbValue = new Label("22°");
     lbValue.setFont(Font.getFont("Lato Medium", false, lbValue.getFont().size + 30));
     //Let's do the same with the Label that contains the text
     lbText = new Label("Partly Cloudly");
     lbText.setFont(Font.getFont("Lato Medium", false, lbText.getFont().size + 10));

     /*Now let's add them to the containers.
       The image on the left side and the other components on the right side*/
     cont2.add(lbValue, CENTER, CENTER - 30, PREFERRED, PREFERRED);
     cont2.add(lbText, CENTER, AFTER, PREFERRED, PREFERRED);

   } catch (ImageException | IOException e) {

To see the video of the example just click here, and to see the complete project just access our gitHub!

imagem mostrando cards no padrão material com Totalcross

To make your life easier …

Here’s how to create the Application class

public class NameSampleApplication{
   public static void main(String[] args) {
          "put your key here");

And another tip is in the class that inherits from MainWindow:

public class CardSample extends MainWindow{
   //Default settings such as background color and style
   public CardSample(){
     Settings.uiAdjustmentsBasedOnFontHeight = true;
   public void initUI() {
     /*Here we add on the screen the class that inherits from 
       container and the position we want*/
     add(new ClasseQueHerdaContainer(),CENTER,TOP+50,PARENTSIZE+96,PARENTSIZE+10);

What’s up? liked? Tell us in the comments!


More articles

Afinal, é possível criar app sem saber programação?

November 16, 2018

Como transformar um website em aplicativo?

November 14, 2018

Aplicativos: O que conhecer antes de criar um

November 13, 2018

É possível instalar aplicativos Android no Windows?

November 9, 2018