[TUTORIAL] Taking Android customization to the next level...with Robin!
Nextbit Employee Khang
Nextbit Employee
‎06-24-2016 04:00 PM
‎06-24-2016 04:00 PM

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!

 

Chicken scratch at its best.Chicken scratch at its best.

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.

 

Screenshot_20160623-150603.png Screenshot_20160623-150347.png

 

Now that you have your vision, we need to prep our canvas.

  • Open Nova Launcher
  • Go ahead and set Nova Launcher as your home launcher
  • Long press the homescreen to create the appropriate number of home screens
  • Tap the home icon on the first screen to set it as your default home
  • Go into Gestures and Inputs and select None for all of them (I use double tap to launch Voice Search however), and I've selected the Home Button to open the App drawer only on the default home screen

 

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.

 

Screenshot_20160623-151100.png

 

At the top you have a Save, Restore, and Add buttons. 

 

For a quick rundown of the icons on the right side:

  • Page Indicator - Shows what page you're on. When you tap on it it will prompt you to select how many screens you have horizontally and vertically. Here you will need to choose 2 for the X component and 1 for the Y component.
  • Zoom - feature so it's easier to tell how things will line up more closely
  • Preview Lock/Unlock
  • Hide layers - tool so you can hide things that you do not have selected
  • Pause - to pause any animations that you have running
  • Magnetic sensors - you won't need to use this

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.

  • Naviagte to the Globals tab
  • Tap the Add button at the top right corner
  • Call the Title: Robin and select the type as Color and Press OK
  • Type #FF51C1C0 and Press OK
  • Repeat for White, but use #FFFFFFFF

II. Background

 

Tap on the Add button at the top, and it will open this menu:

 

Screenshot_20160623-153644.png

 

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:

 

Screenshot_20160623-154141.png

 

  • Select Overlap Group - this essentially creates a Layer for you to work with
  • Select Shape - we're going to create a shape within this layer - Tap on the shape field to select Rectangle
  • Select the width and height you desire - For this, you will need 1760 for the width and 200 for the height
  • Tap on the Paint tab
  • Long press the Color field. On the top of the Menu, a Globe will appear. Tap on this and the globe that now appears in the color field. This will bring up the Colors that you can choose from. Choose "Robin" (#FF51C1C0). 

 

Now, let's make the circle:

 

Screenshot_20160623-212905.png

  • Within the same layer and overlap group, tap on the Add button
  • Select Shape - we're going to create a shape within this layer - Tap on the shape field to select Circle
  • Select the width you desire - For this, you will need 400
  • Tap on the Paint tab
  • Tap on the Color Field and Type #FF333333 

Great! You're almost done with the background. Now we need to position it.

  • Go back to the Root folder by tapping root at the top left corner
  • Tap on Overlap Group - You should see two shapes: Rectangle and Circle
  • Navigate by swiping over to the Position Tab
  • Using the XOffset and YOffset, you can position anywhere you want on your screen. In this case, I've selected XOffset: -100 and YOffset and 120

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:

 

Screenshot_20160623-214046.png

 

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.

  • Within the  Overlap Group, add two items: Progress (for the battery), and Stack Group (for the Date and Time)
  • Starting with the Battery
    • Tap on the Progress item
    • Change the Mode to Split Progress so you can see the individual bars
    • Tap on Style and change it to Circular
      • Size: 300
      • Width: 50 (the width of the battery levels)
      • Height: 20 (the thickness of the ring)
    • Tap on Color
      • Change the Foreground color to "Robin"
      • Change the Background color to #FF5F6262 - This is the color of the empty battery levels as the phone runs down
    • Navigate over to Touch
      • Have the touch function Launch Activity > Settings > Battery (scroll to look for com.android.setetings.fuelgauge.PowerUsageSummary)
  • Now, create the Date and Time items
    • Go to the Stack Group under the Progress Group
    • Add two items, both of which will be Text
    • Tap on the first Text item
      • Tap Text Tab and in the first field (a-z Text) tap it to show the Formula editor
      • Type: $df(hh:mma)$ - This will format the date into text for full hours and minutes as well as AM or PM
      • Now you can scroll all the way to Touch and have it launch the clock by touching the time
        • Tap on the Touch field
        • Choose Launch App
        • For the App to Launch, tap on the App field and select the Clock
    • Tap on the second Text item
      • Tap the Text Tab and in the a-z Text field, tap it to show the Formula editor
      • Type: $df(EEE, a1)$, $df(MMM d)$ - This will spit out a three-letter day, three letter month, and the day number
      • For the Touch field, I did the same thing but am launching Google Calendar instead
  • After everything is finished, it should look like this:

 

Screenshot_20160623-221938.png

 

  • For the Charging Animation, that was a bit trickier:
    • At the root folder, I created a Shape
    • Within the shape item, I created an arc with the following dimensions:
      • Width: 409
      • Height: 12
      • Angle: 359
    • I then gave it a Lined look
      • Go to the Paint tab and select Stoke as the Style instead of Fill
      • Choose the Robin Color
      • Go to FX and select Sweep Gradient for the Texture
      • For the color I wanted a highlight when it was charging so I made the Color #FF60EEED
    • We'll get to the Animation portion after, but we have the basic items for our battery indicator

 

  • Time to create the two arcs that revolve around the Battery
    • In the root folder, create a Stack group and Add a shape to it
    • In the Shape item, select the Arc
      • Width: 208
      • Height: 11
      • Angle: 67
      • Paint
        • Color: #FF7D9F9F (or any other color you wish)
    • Long press the Shape to and tap the Copy icon to duplicate
    • Then tap the clipboard to copy it to the same layer. You should now have two identical shapes 
    • Rotate the second one 180 degrees and position each arch appropriately around the battery
    • It should now look like:

 

Screenshot_20160624-114001.png

 

Okay, now that the battery is complete, let's move on to the Weather Widget!

 

IV. For the Weather Widget do the following: 

 

  • Create a Stack Group at the root folder
  • Within the Stack Group add two Text items
  • In the first Text item, tap the A-Z Text field and then tap the "li" box for Location Information
    • Tap the first box for Current Locality
  • In the second Text item, do the exact same except tap the "wi" box for Weather Information
    • Tap the first box for Temperature in Local Unit - this will give you the temperature where you're at
  • Lastly, in the root folder, I added a Komponent and from the installed folder, I chose the WeatherFlatSVG icons from the base pack

 

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.

 

Screenshot_20160624-140733.png

 

V. For the Shortcuts - we'll create another Stack group, since all the icons are stacked on top of each other.

 

  • All you need to do is within this Stack group is create as many FontIcons as you want
  • While in the Stack group, tap the add button and choose FontIcon
  • When you tap the Font Icon, it'll allow you to select an icon from different packs that you have available. In this case, I chose the email Icon from the Material Pack
  • For Color, I chose the Stroke option and long pressed the Color field to make the Formula option pop up
    • In the formula, I need the icon to change color when I get a new email in the Inbox app
    • Type the following: $if(ni(pcount,com.google.android.apps.inbox)>=1,gv(Robin),gv(white))$ - this basically will pull the Robin color for the email icon when there's a new email, and will stay white when all the emails are read
  • You can repeat this for different shortcuts that you want

 

VI. Next, we have the Agenda to create!

 

  • I stole, copied, borrowed a Stack Group from another Preset called "Marl" and pasted it into the root folder (long press the item you want, copy it, and paste it)
  • Under the Events Title and Events list, I edited each element to my taste. I called for the Robin color on the title, and changed the date format to reflect the way I wanted it in the MM/dd format
  • You can also edit the text to reflect shorter day names

 

Screenshot_20160624-140810.png

 

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:

 

  • Based on the colored background I had, I wanted to change the colors for all the controls and text. That was pretty easy since the colors are available as soon as you open the komponent item
  • I also added a touch function so that it would Launch Google Music

 

VIII. Animations

 

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. 

 

Screenshot_20160624-142844.png

  • To make it rotate while charging, we need to add an animation
    • So we want it to loop while charging and rotate
    • Select the ReactOn to Loop
    • Select Action to Rotate
  • The other thing we want to do is make it appear when the phone is charging
    • For this, go to Layer: Long press the Visible Field so the Calculator/Formula option pops up and tap on it
    • Type: $if(bi(charging) = 1 , always, never)$ . This means that when the phone is charging, it will appear, and when it is not charging, the animation will go away

 

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.

 

Screenshot_20160624-151713.png

  • Go to the Background Overlap Group
  • Navigate to the Animation tab and add THREE animations
    • For the first animation, you need it to react when you unlock the phone so select Unlock for the ReactOn field
    • Next, I want the action to "Scale out" so when I unlock the phone it gets bigger. This time, I chose Scale Out Horizontal
    • By scrolling down you can see other options for where you want the animation to start from, as well as the timing. You can edit these to your liking but I chose
      • Anchor: Module Center
      • Duration: 5
      • Amount: 100 (this means that the action completes 100%)
      • Delay: 5
    • Now that I have an animation that appears, I need it to change when I swipe. So the second animation is a scroll animation
      • The ReactOn that you want to choose in this case is "Bg Scroll" - so it reacts when you swipe
      • Next, I chose Scroll Inverted, you can also choose Scroll with the following
        • Important that the Center: First screen - this is where the animation begins
        • Speed: 100
        • Angle: 322
        • Limit: 377 - this limits the animation to a certain level so it doesn't happen all the way
        • Note: If you were to choose Scroll, pretty much the only thing that would change would be the Angle (I just have it a bit backwards)
        • Also, you can see in the top right corner that the Page number has switched from 1/2 to 2/2. Again, it previews what the animation will end up like on the second page.

 

Screenshot_20160624-150831.png

 

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

 

Other examples:

 

 

 

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!

 

 

7 Comments
vidyesh
Rebel 3.6

Nice. This changes the face of the phone completely.

As much as I like it, this would require way too much upkeep.

 

I still fancy, @alastair setup. Pretty clean and minimal.

 

P.S. : Why wasn't I invited to the Beta Tester Hangout? Smiley Wink

sachania
Rebel 2.8

Super! thanks for sharing this Smiley Happy 

vhl71
Rebel 3.0

Khang wrote:

 

Screenshot_20160624-151713.png

Download my preset - Unzip the file, and place it in the sdcard/Kustom/wallpapers folder

 

 

 


Hi

I'd like to try this - when i download it from the google drive, zip file is empty - there are no files. Can you please check?

Nextbit Employee Khang
Nextbit Employee

 @vhl71 - When I unzip, there is a test.klwp file. Do you see it?

Irvin792
Rebel 3.2

Would love an Ember theme

ChiragAsawa695
Rebel 2.8

Thanks for sharing this steps and your creativity with us, this really helped me to think ahead in live wallpapers and create my own amazing and different than system wallpaper...

emma015
Rebel 1.2

lucky to read such a post!!!