sd

Inside Weather Now: Custom View Animation Using RxAndroid


Built using RxAndroid

Our engineer is always looking to expand their programming skills. Our mobile dev team developed a real app Weather Now while learning Rx-Android and MVP pattern in custom views and custom animations. The app uses RxAndroid to act as an observer for network calls and manipulate the response that we get using mapping functions.

Weather Now is a beautiful mobile app for android users, with minimal UI giving a quick overview of a week’s forecast. It is straight to the point weather app that shows you only the information relevant to you- the weather!

App features

  • Automatic location detection
  • Humidity, pressure, temperature and wind conditions
  • Current condition, temperature, low and high temperatures
  • Beautiful animated weather icons according to the current weather condition
  • 7-day future forecast
  • Weather info in line graphs displaying hourly weather info.
  • Tap to see full weather details and swipe to see following day’s forecast.
Weather Now

What is RxAndroid?

Reactive Programming is a popular term in mobile app development. RxAndroid adds the minimum classes to RxJava that make writing reactive components in Android applications easy and hassle-free.

RxJava extensions for Android will help you with Android threading and Loopers, and RxBinding provides a binding between RxJava and Android UI elements like Buttons and TextViews.

If you are not familiar with the Rx or FRP terminologies, you can take a look at this post by Josh Skeen to get a good overview of FRP. You can also refer to this post by Dan Lew to get started with RxAndroid.

https://gist.github.com/manas-raj-shrestha/dc92ae9644760f54fc28b9834136ce1a

Android also provides lots of value animations for the view.

  • Frame-by-frame animation
    A series of frames are drawn one after the other at regular intervals by loading a set of Drawable resources.
  • Layout animation
    Animate views inside a container view such as lists and tables.
  • View animation
    Animate any general-purpose view.

The animations that we used in Weather Now are handled by the custom views. For each weather type, there is a custom widget that is an integrated part of its view hierarchy and manually does its animation drawing.

There are separate threads for each different type of custom animation logic. Once the thread does some logical kind of manipulation, the view is informed to get invalidated by the use of handler that has been passed to the thread during its creation.

Let’s take an example of a simple cross animation that we used to inform the users that there is no internet connection.

https://gist.github.com/manas-raj-shrestha/0f60df064e37eacba7e5bd95ddc0f11a


About the Author: Manas Shrestha is an Android developer at Leapfrog Technology Inc. He is passionate about music and gaming. His hobbies are traveling and photography.

Leapfrog Technology, Inc. is a technology company that provides mobile app development services for companies and individuals.

Find us on Facebook, Twitter, and Instagram

More in Insights

8 DevOps Tools and Services We Love Technology

8 DevOps Tools and Services We Love

The core focus of any DevOps team is evolving and improving products rapidly. At Leapfrog, we value the speed at

Read more
How We Moved Towards Serverless Architecture Technology

How We Moved Towards Serverless Architecture

The scalability, flexibility and reduced cost promised by serverless architecture resulted in a massive growth rate of 75% compared to

Read more
Enhancing Git Workflow with Smart Commit Open Source Tool Technology

Enhancing Git Workflow with Smart Commit Open Source Tool

When you have a predefined process, it is generally a good idea to automate the things that can be and

Read more