Advanced „fancy“ Layer Tutorial for Lightning Launcher with Zooper Widget pro

Lightning Launcher Settings

Items

• Disable Display the label

• Disable Reflection

Layout

• Disable Free Mode

• Set a Grid 8 Columns 12 Rows (if you set other you have to adjust the size of the widgets)

 Zooming and Scrolling

• Scrolling Direction Auto

• Disable Snap to pages

• Enable Use Scroll stops 

• Enable Fit desktop to Items (should prefent for overscrolling)

• Disable diagonal scrolling

Lost&found 

• Screen orientation Portrait

• Hide the status bar

Figure 1 shows a scheme of the different Zooper-Widgets (zoom)

Figure 2 shows a scheme of the layout (zoom)

Figure 3 (and the ugly Video 😉 ) shows the result.

LLZW Tutorial 01

To get the Result what we want we need 4 Layer Levels:

Layers from Bottom to Top:

1. Background with the 2 Widgets which slides from the left/right in the middle

2. Main Layer with “Mask”

3. Action-layer with Hotspots for Backgroundlayer

4. Protection or another Action-Layer

Explanation why:

It’s not possible to tap “through” widgets. The Widget or App on the highest level will get the control.

Setting up Layer 1:

Create a Zooper Widget with full-screen width and for example  4 rows height. Name it. Add some Modules as I did ( weather/time. you can customize it later). Place it half on the main and half on the left page.

Create a Zooper Widget with full-screen width and same height like before Name it. Add some Modules as I did ( battery/date. you can customize it later). Place it half on the main and half on the right page.

Long tap on empty space on the Screen select Edit layout when you are not in editing mode.

Long tap again. Select add. Select “Scrolling Stop point”.

Place it at the left corner of the left widget.

Long tap again. Select add. Select “Scrolling Stop point”.

Place it  at the right corner of the right widget.

Setting up Layer 2:

Create a Zooper Widget with full-screen width and same height as before. Name it. 

Set Background color to transparent.

Add a Rectangle (Later you can use a bitmap if you like). Set height and width to full widgetsize. Color as you like.

Add another rectangle. Size and shape as you like and set drawing mode to clear.

 Place the Widget at the middle of your Mainpage over the Widgets you have created before.

Long tap the Widget. Select pin.

Setting up Layer 3:

Create Zooper Widget half of the screenwidth . Height as before.

Name it. 

Set Background color to transparent.

Create Rectangle shapes and modul on tap for the hotspots for the left widget on layer1.

(to check how it works and to adjust set the color to something semitransparent)

Place it over the main widget half on the mainpage half on the left page.

Create Zooper Widget half of the screenwidth . Height as before.

Name it. 

Set Background color to transparent.

Create Rectangle shapes and modul on tap for the hotspots for the right widget on layer1.

(to check how it works and to adjust set the color to something semitransparent)

Place it over the main widget half on the mainpage half on the right page.

The widgets will slide like the widgets from layer 1.

That means when nothing is slide the hotspots on the right an left side of the mainpage will be “active” even though layer 1 is not visible.

Therefore we are

Setting up Layer 4: 

either with a) pseudo widgets or with b) apps to protect the hotspots.

a: 

create a zooper widget width a quarter of screenwidth. Height as before.

Set background color to transparent. Set widget on tap action to disable.

Place it over the mainwidget on the right or left side.

Long tap on the widget. Select position. select pin.

If you prefer this solution do it twice.

b: 

 create a shortcut to a application.

Place it to the “area” which you want to protect.

Long tap on the icon.. Select position. select pin.

do this as much as you need to “protect” the hotspots.

You are done 😉

This is just a simple and not very beauty example, but it shows you how you can create a fancy effect. It works horizontal and vertical (change left/right with upper/lower) . You can customize it as you like.

Enjoy

]]>