Posted on

Android Animated Colors


android animated colors

I want to show an example of animating colors. I used it once for one of my app’s intro pages background. Let’ get started!

Animate Colors

First of all, how do you animate an RGB color? Let’s say from 225, 124, 102 to 59, 36, 189? You don’t. You need to translate it to HSV first. Which stands for Hue Saturation Lightness

android animated colors

 

Now I don’t know much about colors. Simply because I don’t need to. As you see from the image above – Hue is a rotation, Saturation is wideness and Lightness/Value is height.

It’s definitely an interesting topic if you eager to learn some – check this post about color models or ask any designer. They should give a good sophisticated answer

When I needed to animate colors for my app – I just googled it and found a simple Stack solution, which I’m going to include here

HSV

I guess you’re interested in those HSV values, right? So Hue goes from 0 to 360, you can see it from the image why it’s so. Saturation 0 to 1 and Value 0 to 1

If you spend some time looking at the image – you’ll start to figure out how to change one color to another. It’s simply linear

AnimatedColor

Here’s our core class

It takes two colors (start and end) and converts them to HSV (array of three floats) in a constructor. It has one public method called with which takes float from 0 to 1, calculates an HSV color for this position between start and end colors and then converts it to RGB and returns

As I said before, why it’s easy to change color with HSV and why we’re doing it with HSV is because it’s linear and colour change looks pretty nice

If you know how to get a fraction for a position between two points – you know how with() method works

ViewPager

Now I want to display one of the best use case scenarios for animating colors, on a ViewPager. Let’s create a simple fragment to display some test, so you can see that we’re swiping between pages

SimpleFragment.java

fragment_simple.xml

Then ViewPager adapter, Adapter.java

Main Activity

Now let’s add this ViewPager to our activity

MainActivity.java

activity_main.xml

and create few colors in colors.xml

Change Colors On Swipe

Finally, what we want is to change the background color of a ViewPager on swipe. We don’t want to change background of each fragment because we want fluentness, that’s why it should be a global background (ViewPager)

Modified activity’s onCreate method with those changes

So onPageScrolled method has three arguments – first is positionwhich is a currently selected page. PositionOffset is a float from 0 to 1. So when you scroll from page 0 to page 1 you have position of 0 and positionOffset changing from 0 to 1

When you scroll from page 1 to 0 – your position is 0 again, but positionOffset goes from 1 to 0

And it goes on for the rest of the pages in the same way. When it reaches the last page 3 – there’s no way to swipe to the right, that’s why I don’t need to animate color change of position 3

Here’s what I got

android animated colors

 

You can get the source code here, don’t forget to subscribe, follow me on Twitter, Facebook, G+ to get notified about the latest posts!