Tutorial: Create Before & After images for your mobile app

Posted by in Locly Native Tutorials

Before & After images, where you swipe a finger across the app screen to blend between two images, can be a simple yet very effective addition to your proximity mobile app. Commonly used by Locly users to illustrate how an object or place has changed over time, these images can be used in almost any instance to show contrast and/or transformation. This quick tutorial shows you how you can easily add a Before & After image card to your app:

Step 1: Creating the Before & After card

  • Login to your Locly Native App Builder Desktop on your computer and click on your app.
  • From the main menu edit screen click on ‘Add Card’ and then select ‘Before After’.
  • Give your card a ‘Name’ and then set the visibility to ‘Preview’ so you will be able to see it on your device.
  • Upload your ‘before’ and ‘after’ images from the asset library or from your computer.
  • Use the ‘Bar’ settings to change the colour, width and position of the scroll bar.
  • Finally click on ‘Cover’ to upload an image to appear in the main menu.

before&after_mockupStep 2: Preview the card in your app:

  • Download the ‘Locly Native’ app to your phone or tablet device (from the App Store or Google Play).
  • From the Locly Desktop on your computer, click on the QR code icon for your app (grey icon, on the left hand side)
  • Tap on ‘Scan QR Code’ and hold your device to the QR square on the screen. Your app will appear on the device.
  • Tap on the new ‘Before & After’ card in the main menu.

Step 3: Pin to a location

  • From the Locly Desktop click on the ‘LOCATION’ tab.
  • From this screen you can then add a Beacon Device and a GPS pin to the map (Physical Web coming soon).

…and that’s all there is to it. This example uses portrait images, but you can create a landscape version by uploading landscape images and adjusting the position of the scroll bar. You can try this tutorial for yourself using a Locly Native demo account together with the preview app on your Android or iOS device. Other card types to try include image, map, PDF, audio, video, HTML, link, panorama, widget (e.g. Bookry widget) and YouTube.

Click here to request a demo account >