[Tutorial] How create a functional Touchscreen from any app design Image

Example: Star Trek Lcars Touchscreen:


create a mask with clear defined colors in your favourite Image editor:

  • load both into the assets
  • use a canvas (fill parent) and load the Lcars image as the canvas background
  • use 2 (unreleased) extensions: DjTouchscreen and DjSound (optional) and set them up.
    The DjTouchscreen extension can define exact zones from the mask image no matter what screen resoultion the used device has.
    The DjSound extension is cappable to play sounds from a list. No need to set up a bunch of sound components if you want to play sounds simultan. Ideal for a piano app It also offers more functions than the native soundcomponent.


    Here you can see how the Zones are setted up. Insert the RGB values of the zone color . Get it from the Color Selector tool of your Image editor. Give the zone an Id.


Pm me if you are interested to test these extensions and aia. I didnt release it yet, because this is WIP.

1 Like

Nice. Can I have an advice of an addition? It would be good if you could set the touchdown colors individually for every button.

Already possible.