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

Related tags

Icons Skycons
Overview

Skycons for Android Android Arsenal

Skycons

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 Get it on Google Play

License

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

Comments
  • Creating a icon via code

    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?

    opened by erikthorselius 6
  • Add getters and setters for custom attributes

    Add getters and setters for custom attributes

    Hi, tried to answer my own question in issue #2 how to change custom settings. And found that one way is to expose them via getters and setters http://developer.android.com/training/custom-views/create-view.html#addprop

    I moved som shared code to a base class. It would be useful in my other project. for code like this

        SkyconView iconView = null;
        switch (icon) {
            case "clear-night":
                iconView = new MoonView(context);
                break;
            case "clear-day":
                iconView = new SunView(context);
                break;
            case "snow":
                iconView = new CloudSnowView(context);
                break;
            default:
                //Default to rain - plan for the worst
                iconView = new CloudRainView(context);
                break;
        }
        iconView.setLayoutParams(getParams());
        iconView.setBgColor(Color.BLACK);

    Hope this is helpful

    //Erik

    opened by erikthorselius 0
  • Using multiple icons at the same time

    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?

    opened by MIst3rM 0
  • Animation interrupted while using in RecyclerView.

    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.

    opened by AB-MB 0
  • Animated icons error

    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

    opened by joyner-perez 0
  • increasing speed of animations

    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.

    opened by sarinsukumar 0
  • Fix so both bgColor and strokeColor will be displayed

    Fix so both bgColor and strokeColor will be displayed

    I introduce some bugs from my last pullrequest. The icons did not set the colors right. Both stroke color and background color did not work from xml. And the stroke color was not set in onDraw().

    I did some refactoring and move more code to the shared class.

    opened by erikthorselius 0
Owner
Torry Harris
Torry Harris
GitHub
Easy to use material icons for Android

All available icons (744) If, like me, you're tired of copying 5 images (ldpi, mdpi, hdpi, xhdpi, xxhdpi) for each icon you want to use in your app, f

Anton Malinskiy 388 Oct 26, 2022
Androidicons is a professional, handcrafted icon set with 250 icons in 14 different colors and 5 sizes, including an icon font and all sources.

Android Developer Icons Android Developer Icons is a custom icon set, created by Opoloo. Included are: 250 hand-crafted, pixel-perfect icons in 5 size

Opoloo 685 Nov 23, 2022
Compose icons is a pack of libraries that provide well known Icon Packs to use in Jetpack Compose Multiplatform.

Compose icons is a pack of libraries that provide well known Icon Packs to use in Jetpack Compose Multiplatform. The library usage is inspired by Compose Material Icons.

Gabriel Souza 280 Dec 29, 2022
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.

Android-Iconics ... allows to include any icon font with all its vector icons in your project. No limits. Scale with no limit, use any color at any ti

Mike Penz 5k Jan 5, 2023
WeatherInfo - A simple weather forecast app Using OpenWeatherMap API to fetch current weather and next 38 hour forecast weather data

WeatherInfo WeatherInfo is a simple weather forecast app Using OpenWeatherMap AP

inderjeet yadav 2 May 5, 2022
Weatherapp: a simple weather forecast app, which uses some APIs to fetch 5 day / 3 hour forecast data from the OpenWeatherMap

Weatherapp Weatherapp is a simple weather forecast app, which uses some APIs to

null 0 Jan 7, 2022
Recreated iOS Calculator UI and functionality for android with Jetpack Compose

Compose-iOS-Calculator Recreated iOS Calculator UI and functionality for android with Jetpack Compose Currently using Regex to do the math, but when I

Ikechukwu Eze 6 Oct 11, 2022
Android Weather Library: android weather lib to develop weather based app fast and easily

WeatherLib Android weather lib is an android weather aggregator. The lib helps you getting weather data from the most importat weather provider. It su

Surviving with android (by Francesco Azzola) 641 Dec 23, 2022
Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the weather at that particular time.

Flux ?? Description Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the we

null 415 Jan 4, 2023
A nice weather that helps you get all information including: current weather, hourly weather and also forecasts for 16 days

WeatherForecast This is an ongoing project where I fetch all the weather data using Retrofit and Kotlin Coroutines over two APIs containing both curre

null 2 Jul 26, 2022
Over 1600 customizable icons for Android including 750+ Google Material Design icons, 25 ready-made social badges, and more!

droidicon - Over 1600 icons for Android! Icons From... Google Material Design FontAwesome Iconic Entypo Meteocons Unicode Icons Your own custom icons

Devon Guinane 2.2k Dec 19, 2022
About-icons - Android library to easily give credit if using icons which require attribution

Android About Icons Library About this project Features How to use Planned improvements Screenshots Contribute Apps using this library License About t

Niko Diamadis 4 Nov 6, 2022
Project BlueWeather is an android app that lists the closest locations to you and shows the 7-day weather forecast for the location you select.

Project BLUEWEATHER Description Project BlueWeather is a weather forecast application for android. It lists the locations closest to you. It then prov

Burak Unutmaz 4 May 12, 2021
School project: Weather forecast application made in android studio using Kotlin, SQLite and OpenWeatherMaps free API.

A*star 4-cast School project made in android studio using Kotlin, SQLite and free API from OpenWeatherMap.org. A weather forecast app with C(U)RD oper

Felicia Olsson 2 Apr 3, 2022
Android weather forecast app, which uses OpenWeatherMap API

Weather App ?? Android weather forecast app, which uses OpenWeatherMap API About Simple, free and fast weather API from OpenWeatherMap you have access

Ritesh 6 May 17, 2022
Koliber - Android weather & air pollution app. Current air quality index and forecast

Donate If you like this app please donate Bitcoin: bc1qwqqpuy54qfja7h5dzpd9swgrn

Krzysztof Kobiałka 2 Oct 22, 2022
Weather Forecast App with Jetpack Compose

Weather Forecast App Features: GetCurrentLocation for weather forecast 16 days of forecast any city you can search current weather details of any city

Yavuz 0 Dec 16, 2021
Weather Forecast App Used MVVM, Retrofit and RxJava

Weather_Forecast_App Used MVVM, Retrofit and RxJava Screen

Rumeysa Özer 0 Dec 31, 2021
Weatherapp is a simple weather forecast app

Weatherapp Weatherapp is a simple weather forecast app, which uses some APIs to fetch 5 day / 3 hour forecast data from the OpenWeatherMap and to fetc

null 2 Apr 28, 2022
How to improve the user experience using animated icons with vector drawables on Android

Android Animated Icons How to improve the user experience using animated icons with vector drawables on Android English version https://medium.com/@an

André Mion 116 Nov 25, 2022