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

> Posicionar un sello/contador superpuesto en la esquina de otro componente con RelativeLayout.

Source: https://crossfly.dev/es/docs/cookbook/ui/badge-no-avatar — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 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)
```java
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
```java
// 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](/docs/cookbook/ui/card-clicavel)