Windows Phone UI via Pocket Casts layout


The UI employs a mix of overlap and stack groups to keep it all organized as you see it. If you're new to KLWP or just want to make sure your global variables are setup correctly, I recommend starting with the app shortcuts.  The first thing I recommend doing after installing the apps listed above is to import the icons into iconzy for any apps your want shortcuts for Then, setup global images to keep the color extraction formulas short and simple (it can get quite messy looking without them).

The app overlap groups employ a "background" shape to extract the vibrant color from the app icon itself so you'll know it matches. The icon image is a simple formula linked to the global image for the app. Then create a touch action to launch the icon when you touch the icon. The 3x3 grid of large icons uses a vertical stack group to keep them in line with each other

The footer icons is a horizontal stack group that links to the global image variables for the apps with touch actions to launch them. All icons are also setup to colorize when there is a notification for that app (except the Google app and the lock screen icon).This is a bit tricky you have to get the app's package name then setup an if statement to have it check if that app has a notification to set one color and a "default' color if there are none.

The header text is a few embedded stack groups to keep the date and weather elements together. The date text launchers the calendar app and weather launches my weather app.

The weather forecast and media player setups employs a similar method to the large app icons where it's a base overlap group to get the background color then a stack group to set the info in each. Touching the weather forecast currently does nothing but can be set to something like force refresh weather.