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).

Touch area expansion#

Touch area expansion