Touch Handling

All components support touch handling through the framework's event system. All components can handle the following events by default: ClickEvent, LongClickEvent, and TouchEvent.

This means all layout builders have an EventHandler prop named clickHandler, longClickHandler, and touchHandler respectively. Specify the event class you want to handle as an argument to the @OnEvent annotation.

For example, setting a click handler on any component is as simple as:

@LayoutSpec
class MyComponentSpec {

  @OnCreateLayout
  static Component onCreateLayout(
      ComponentContext c,
      @Prop String title) {

    return Text.create(c)
        .text(title)
        .clickHandler(MyComponent.onClick(c))
      .build();
  }
}

And the callback within MyComponentSpec would look like this:

@LayoutSpec
class MyComponentSpec {
...
  @OnEvent(ClickEvent.class)
  static void onClick(
      ComponentContext c,
      @FromEvent View view,
      @Prop String someProp) {
    // Handle click here.
  }
}

Touch area expansion

You can expand the interactive bounds of a component by using the touch expansion APIs in the layout builder:

Text.create(c)
    .text(title)
    .clickHandler(MyComponent.onClick(c))
    .touchExpansionDip(ALL, 10);

In this example, the clickable bounds of the text component will be 10 dips larger on all edges (left, top, right, bottom).