torryharris/skycons

Forecast / DarkSky's Skycons, Animated Weather icons recreated for Android

Skycons for Android

We set out to create a native weather app on Xamarin but we wanted to build something unique to differentiate ourselves amongst the plethora of weather apps avaialble out there. The DarkSky app & Forecast did an excellent job with their Skycons.

We wanted to re-use the same icons for our app as well, however, we found that these animated icons don't exist natively on either platforms. This is currently a work-in-progress as the team is finetuning the animation & the performance itself. You can download the complete repository which also contains the sample project SkyconsDemo.

Built with Android Studio (2.2.3)

Available Icons

Icon	View
Cloud	CloudView
Clear Sky (Sunny)	SunView
Clear Night	MoonView
Partly Cloudy Day	CloudSunView
Partly Cloudy Night	CloudMoonView
Heavy Showers	CloudHvRainView
Snow	CloudSnowView
Light Showers	CloudRainView
Fog	CloudFogView
Wind	WindView
Thunder	CloudThunderView

How to use

• Deployment target should be API level 14 or above.
• Import 'SkyconsLibrary' as a library to your project.

Adding icons:

1) To add a skycon(icon) through the XML:
                 
       <com.thbs.skycons.library.<skycon>
         android:layout_width="250dp"
         android:layout_height="250dp"
         android:layout_centerHorizontal="true"
         android:layout_centerVertical="true"
         app:isStatic = "true"
         app:strokeColor = "#000000"
         app:bgColor = "#ffffff"/>

where <skycon> represents the particular view/icon. For example "MoonView"


2) To add a skycon(For instance, WindView) through Java code, perform following in the activity:

      
        LinearLayout layout = new LinearLayout(this);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layout.setLayoutParams(params);
    
        //Using these params, you can control view attributes
        //attributres include boolean isStatic,boolean isAnimated, int strokeColor , int backgroundColor
        WindView windView = new WindView(this,true,false, Color.parseColor("#000000"),Color.parseColor("#ffffff"));          
        
        //Using these params, you can control width & height of the icon
        params.width = 200;
        params.height = 200;
        windView.setLayoutParams(params);
      
        layout.addView(windView);
        this.setContentView(layout);

• For a better experience, keep 'layout_width' & 'layout_height' the same.

Customization:

Options	Value	Description
layout_width	100dp (recommended min value)	Width of icon
layout_height	100dp (recommended min value)	Height of the icon
isStatic	True / False	Boolean Value to enable on-touch animation
strokeColor	HEX	Customize the color of the icon
bgColor	HEX	Customize the background colour

Pull Requests are welcomed. We are looking forward for your suggestions on new icons & animations.

##Demo

License

Skycons for Android is being made available in public domain under similar terms like the original

skycons's Issues

Creating a icon via code

Hi, do you have any good example how to create a icon from code?
I have problems creating the AttributeSet from my layout.

CloudHvRainView cloudHvRainView = new CloudHvRainView(context, attrs);

Don't know if you have any good code example?

Animation interrupted while using in RecyclerView.

I have created a layout which contains a horizontal RecyclerView in which every cell contains the Skycons view but it is not working normally. Animation stucks abruptly & makes the whole view freeze.

Please let me know if I can do something about it.

my ideas

could invalidate() in onDraw() be replaced by postInvalidate()?
i think postInvalidate() is better.

How to use this in android project

Hi There,
Its really worth to use in the project. Is there any way to use these in android project.

increasing speed of animations

This is an awesome work. Thank you for sharing.
Is there any method to increase the speed of animations ?
Actual skycon has bit more speed in animations.
Please share if anybody has any idea.

StrokeColor does not work

app:strokeColor="#003B5A"
Never works, you always see the black line.
Please help.

Decrease margin around icons

Hi guys,

awesome work!

Is there a way to decrease the margin around the icons?

Greets

Animated icons error

When I use several icons it shows me this error after a few seconds:
java.util.concurrent.TimeoutException: android.graphics.Path.finalize() timed out after 10 seconds

Using multiple icons at the same time

Hi, I am using the icons in an app that I am making for school and whenever I want to display 5 at the same time for a weather 5 day forecast feature I start getting messages from the debugger saying too many tasks running on the Main UI and it starts skipping frames. I use an asynctask to get the information from the api and I display these icons in the postExecute(). Is there a way of having all of it run in the background?