Okay, so you remember what my homescreen used to look like? Pretty simple, no apps, just an app drawer and some gestures. See below for a quick refresh:
So today, it looks and behaves like this:
It's a pretty significant difference and I wanted to teach you guys how to create each element so you can have a unique homescreen. At the end of the tutorial, I'll provide the preset I created so you can load it up onto your own Robin! To begin the tutorial, you'll need the following:
Spolier: This app has a steep learning curve, and it took me 2 days to complete this preset. I started from scratch and had to cherry-pick a couple of things to make it how I wanted, but I literally spent hours trying to get it to this point.
Before opening the app, use paper and pen to visualize what you want
When I started with KLWP, I didn't know how to do squat and I got overwhelmed quickly. So I took a step back and just thought about what I wanted my homescreen to look like and behave. Check out my crappy drawing!
So as you can see I wanted a 2-page setup. On the first page, I started with a simple battery monitor with a clock and time indicator. On the second page, I wanted an agenda. Seems easy enough, right? Well, it wasn't. You also need to consider how you want to transition between the two pages, and how to animate each element so that it looks seamless and clean.
Got your rough idea? Let's set up Nova Launcher first.
Now that you have your vision, we need to prep our canvas.
Now, let's open up KLWP
Note: I purchased the PRO version of the app. If you try some of these features, they may not work on the standard app. When you first open the app, you should see this screen that is a WYSIWYG of what your wallpaper will look like.
At the top you have a Save, Restore, and Add buttons.
For a quick rundown of the icons on the right side:
The bottom frame is where you will be doing all the editing, and this is where all the magic happens. We'll get in depth on this part as we go through the tutorial. And finally on the left side, you have a Settings Menu as well as an indicator where you are in the preset. To start, you'll be at the root level.
I. More Set Up!
The first thing you need to do is set up Global Values. This will be important later.
Tap on the Add button at the top, and it will open this menu:
The first thing is that we want to do is create two shapes that lay on top of each other: A long Rectangle and a Circle. Let's start with a Rectangle like the one below:
Now, let's make the circle:
Great! You're almost done with the background. Now we need to position it.
III. Battery indicator, date and time widget, and charging animation
I wanted a cool looking battery like the ones that Cyanogen and I remember from older ROMs their splash screen would have a circle that would spin. So I went that route. Here's how to make it:
In this case, I made a mistake using a Stack Group, but instead create another Overlap Group because I need the battery ring to overlap with the date and time.
Okay, now that the battery is complete, let's move on to the Weather Widget!
IV. For the Weather Widget do the following:
Now this is really coming together! Reminder, everything is still static at this point, and we'll add all the animations at the end. Just a couple of items and we're all good! So we've got the Shortcut menu on the first page and an agenda on the second page. Let's start with the shortcuts.
V. For the Shortcuts - we'll create another Stack group, since all the icons are stacked on top of each other.
VI. Next, we have the Agenda to create!
VII. Music Player
For the last little bit, we need to add the music player. I found a Preset with a music player called "Material Music Komponent". This gave me the base that I needed to add the music player and controls into my custom preset. Once I installed it, I went to the root menu, added the Installed Komponent and did the following:
This is the part that makes it all come together in a seamless package! WOOO HOO! Again, this takes a bit of envisioning beforehand. I wanted the background and battery indicator to scale smaller when swiping and move to make room for the agenda. Also, by doing so, I made the weather disappear, bring down the music controls and have the shortcuts scroll out.
Let's start with the cool one: The charging animation.
For the scrolling animation and scale for the battery and background this is a bit more involved. We need to not only have them appear when I've unlocked the phone, but also scale and scroll sideways when I swipe to screen number two that features the agenda. I'll show the background and you can then apply the same technique to the battery.
Apply similar techniques to the rest of the items from the Root folder. Again, just scroll over to animations for each and have fun! This will take A LOT of time to fine tune and mess with, but don't stress out, the beauty of Android is that you can just play around as you wish. That's pretty much it! You've made it all the way to the end of this in-depth customization post. Hopefully by the end of things, you'll be able to see all the different things that you can do. If you want some inspiration you can check out the following examples from other sites I've seen. Also, if you want to take the simpler route, you can take my preset and load it up!
Download my preset - Unzip the file, and place it in the sdcard/Kustom/wallpapers folder
Seriously, making this wallpaper has been a blast! Though I did get a little frustrated at times, I was able to work through them using different websites and communities online. Huge thanks to the developers for making such a great tool, and for the agenda and music player that I cherry-picked from! If you have any questions, let me know and we can learn together. In the future, I will run a contest to see who can make the best Robin or Nextbit-themed Live wallpaper!