# How to place a badge on the corner of an avatar

> Position a badge/counter overlaid on the corner of another component with RelativeLayout.

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

# How to place a badge on the corner of an avatar

**Purpose.** Overlay a small "badge" (notification counter, status dot)
anchored to a corner of another component (avatar, icon). It uses `RelativeLayout`, which
positions children by anchors relative to another child.

## APIs used
- `new RelativeLayout()` — layout that positions by `RelPos` anchors and sizes by `RelSize`.
- `layout.add(Component target, RelPos x, RelPos y, RelSize w, RelSize h, Component relative)` — adds `target` positioned **relative to** `relative`.
- `RelPos.END_OF` — aligns the badge's end (right) edge with the avatar's end edge.
- `RelPos.START` — aligns the badge's top with the avatar's top (vertical START anchor).
- `RelSize.AUTOSIZE` — the badge uses its own preferred size (width and height).
- `container.setLayout(layout)` — installs the `RelativeLayout` on the container.

> Important verification: in source, the enum values are `RelSize.AUTOSIZE`
> (not `AUTO`), `RelSize.FILL`, `RelSize.FIT`, `RelSize.SAMESIZE`, `RelSize.KEEPSIZE`;
> and `RelPos.END_OF`, `RelPos.START`, `RelPos.AFTER`, `RelPos.CENTER_OF` etc.

## Complete example (copy, paste and run)
```java
package com.exemplo;

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

/** 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());

      // Example components: an "avatar" and a counter "badge"
      Component avatar = new Component().style(Styles.component().backColor(0xFFCCCCCC));
      Component badge  = new Label("3").style(Styles.component().backColor(0xFFFF3B30).textColor(0xFFFFFFFF));

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

      // 1) The avatar: anchored to the top-left corner, automatic size
      rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

      // 2) The badge: top-right corner OF THE AVATAR (END_OF on x, START on y),
      //    with its own size. The last argument (avatar) is the reference.
      rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

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

> The snippet below shows **just the core**. To run it, place it in the `MainWindow` skeleton above.

## Minimal snippet
```java
// Container holding avatar + badge
Component container = new Component().style(Styles.transparent());
RelativeLayout rl = new RelativeLayout();

// 1) The avatar: anchored to the top-left corner, automatic size
rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

// 2) The badge: top-right corner OF THE AVATAR (END_OF on x, START on y),
//    with its own size. The last argument (avatar) is the reference.
rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

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

> **Verification note (2026 code).** Confirmed in `RelativeLayout`: the signature
> with an explicit reference is `add(Component, RelPos, RelPos, RelSize, RelSize, Component)`.
> `END_OF` resolves x as "reference's end edge minus the badge's width" (the badge
> touches the avatar's right side); `START` on y aligns to the top. To offset the badge
> "outward" from the corner (the classic overlap effect), adjust the badge's `outgap` —
> there is an `add(..., Component relative, Gap outgap)` overload. If you omit the
> reference, the layout uses **the previously added component** as the reference.

## Dig deeper
- Clickable card (composition with GridLayout): [card-clicavel.md](/docs/cookbook/ui/card-clicavel)