Press and feedback

The visual response to touch (the “sinking” of a button) is automatic in CrossFly when the style is marked as pressable — you write no animation at all.

Complete example (copy, paste and run)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Automatic press feedback: custom style with .pressable()
      Button botao = new Button("Enviar");
      botao.style(new ComponentStyle().backColor(0xFF0173ED).pressable());
      add(LAY_AUTO, botao);

      // Manual opacity control to represent state (selected/disabled)
      Label item = new Label("Item");
      add(LAY_AUTO, item);
      boolean selecionado = false;
      item.alpha(selecionado ? 1f : 0.5f);
      Component.repaint();

      // Toggles the state with feedback: on tap, highlights the item back to opaque
      botao.onAction(c -> { item.alpha(1f); Component.repaint(); });
   }
}

The snippets below show only the core (what goes inside onShow()). To run them, place them in the MainWindow skeleton above.

Automatic press feedback — `pressable()`

Mark the style as pressable() and the component animates itself when touched (using the theme’s animationDuration):

Button b = new Button("Enviar");
b.style(Styles.button());   // the Skin's button style already comes .pressable()

// in a custom style, enable it explicitly:
b.style(new ComponentStyle().backColor(0xFF0173ED).pressable());

The Skin generates the pressed state from the normal one (by default, a darker background). To customize it, define a pressedStyle(...) (see Styling components).

Feedback duration

Comes from Styles.animationDuration (default 0.3s) and is read by the Skin styles. Global adjustment:

Styles.animationDuration = 0.2f;   // more "crisp" tap across the whole app

Manual opacity control — `alpha(...)`

To fade/highlight a component on your own (e.g., visually disable, emphasize a selection), use alpha(float) (0 = transparent, 1 = opaque):

item.alpha(selecionado ? 1f : 0.5f);
Component.repaint();

For a smooth opacity transition, combine it with AlphaAnimation:

AlphaAnimation fade = new AlphaAnimation(item.alpha(), 1f, 0.2f);
fade.onUpdate(() -> { item.alpha(fade.getValue()); Component.repaint(); }).start();

Best practices

Let pressable() handle the touch feedback — don’t animate the press by hand.
Use alpha() for state (disabled/selected); animate only when the transition adds value.
A disabled component already fades via the style’s disabledAlpha — don’t duplicate it.

Common mistakes

Custom style without pressable() → button with no feedback on touch.
Setting alpha(...) and forgetting Component.repaint() (on-demand rendering).