Cómo colocar un badge en la esquina de un avatar

Propósito. Superponer un pequeño “badge” (contador de notificaciones, punto de estado) anclado a una esquina de otro componente (avatar, icono). Usa el RelativeLayout, que posiciona a los hijos mediante anclajes relativos a otro hijo.

APIs usadas

new RelativeLayout() — layout que posiciona por anclajes RelPos y dimensiona por RelSize.
layout.add(Component target, RelPos x, RelPos y, RelSize w, RelSize h, Component relative) — añade target posicionado relativo a relative.
RelPos.END_OF — alinea el borde final (derecho) del badge con el borde final del avatar.
RelPos.START — alinea la parte superior del badge con la parte superior del avatar (anclaje vertical START).
RelSize.AUTOSIZE — el badge usa su propio tamaño preferido (ancho y alto).
container.setLayout(layout) — instala el RelativeLayout en el contenedor.

Verificación importante: en la fuente, los valores del enum son RelSize.AUTOSIZE (no AUTO), RelSize.FILL, RelSize.FIT, RelSize.SAMESIZE, RelSize.KEEPSIZE; y RelPos.END_OF, RelPos.START, RelPos.AFTER, RelPos.CENTER_OF etc.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Componentes de ejemplo: un "avatar" y un "badge" contador
      Component avatar = new Component().style(Styles.component().backColor(0xFFCCCCCC));
      Component badge  = new Label("3").style(Styles.component().backColor(0xFFFF3B30).textColor(0xFFFFFFFF));

      // Container que contiene avatar + badge
      Component container = new Component().style(Styles.transparent());
      RelativeLayout rl = new RelativeLayout();

      // 1) El avatar: anclado en la esquina superior izquierda, tamaño automático
      rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

      // 2) El badge: esquina superior derecha DEL AVATAR (END_OF en x, START en y),
      //    tamaño propio. El último argumento (avatar) es la referencia.
      rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

      container.setLayout(rl);
      add(container);
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

// Container que contiene avatar + badge
Component container = new Component().style(Styles.transparent());
RelativeLayout rl = new RelativeLayout();

// 1) El avatar: anclado en la esquina superior izquierda, tamaño automático
rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

// 2) El badge: esquina superior derecha DEL AVATAR (END_OF en x, START en y),
//    tamaño propio. El último argumento (avatar) es la referencia.
rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

container.setLayout(rl);
add(container);

Nota de verificación (código 2026). Confirmado en RelativeLayout: la firma con referencia explícita es add(Component, RelPos, RelPos, RelSize, RelSize, Component). END_OF resuelve x como “borde final de la referencia menos el ancho del badge” (el badge toca el lado derecho del avatar); START en y alinea a la parte superior. Para desplazar el badge “hacia afuera” de la esquina (efecto clásico de superposición), ajusta el outgap del badge — hay una sobrecarga add(..., Component relative, Gap outgap). Si omites la referencia, el layout usa el componente añadido anteriormente como referencia.

Profundiza

Card cliqueable (composición con GridLayout): card-clicavel.md