WeatherApp + Widget

Current Status

Not Enrolled



Get Started

Reading Time: 4 minutes

In this course you will learn how you can create a modern Android application with a modern user interface design. This application will be a weatherapp, which will have a nice widget as well.

The application, what we are going to build up together, will be a totaly standalone app, what you could upload to the Google Play as well. The app will fetch the data automatically or by manul refreshing. Thenafter the current weather can be shown in a widget as well.

The sample app

After watching the above video, below is the summary for you what you are going to build up in this course.

  • Lesson 1 – The UI, the Navigation and Data Binding (8 mins)
    • Create new Android project
    • Add the needed dependencies
    • Build up the user interface of the WeatherFragment
    • Implementation of the navigation
    • Convert UI to a Data Binding UI
  • Lesson 2 – Register at OpenWeatherMaps (3 mins)
    • Register to OpenWeatherMaps
    • Get the API key
  • Lesson 3 – Kotlin Data class (3 mins)
    • Create the data classes from the JSON objects
  • Lesson 4 – Retrofit and Hilt (5 min)
    • Add Hilt to the project
    • Build up the API client
  • Lesson 5 – Repository (5 min)
    • Create the repositry module
    • Create the Repository interface and its implementation
  • Lesson 6 – The ViewModel and the Observer (5 min)
    • Create the WeatherFragmentViewModel
    • Get the data and update the WeatherFragment’s UI with the data
  • Lesson 7 – ViewPager2 with RecyclerView (10 mins)
    • Create the layout of the current weather
    • Create the RecyclerView Adapter and ViewHolder
    • Init the RecyclerView and ViewPager2
  • Lesson 8 – UI of CityListFragment and AddCityFragment (10 mins)
    • Create the layout for the CityListFragment and AddCityLayout
    • Create the RecyclerView Adapter for the list of cities
  • Lesson 9 – Search function (5 mins)
    • Search cities using the API
    • Implementation of 2 BindingAdapters
  • Lesson 10 – Insert weather into Room (8 mins)
    • Room DAO
    • Room Database
    • Repository
    • Hilt modules
    • Save the fetched current weather to Room database
    • Implementation of the position property
  • Lesson 11 – Update the list of cities (8 mins)
    • Implementation of getter method in Dao
    • then in the repository
    • and in the ViewModel
    • Populate ViewPager2 from Room
  • Lesson 12 – Single source of truth (7  mins)
    • Handling data source
    • Handling data update from network and save locally
    • Navigation in case of empty list
  • Lesson 13 – SwipeRefreshLayout (2 mins)
    • Loading animation
    • Send a new request to the API
  • Lesson 14 – Get the forecast from API (5 mins)
    • Extend the app with the forecast data classes
    • Add the new API request
    • Update the repository
  • Lesson 15 – Insert forecast into Room (7 mins)
    • Add the DAO of the forecast data
    • Update the database
    • Update the repository and ViewModel
  • Lesson 16 – Extend the layout for forecast (5 mins)
    • Add the layout for the hourly and daily forecast
  • Lesson 17 – Synchronize current and forecast weather (7 mins)
    • Synchronizing the API request of the current and forecast weather
    • Update the single source of truth implementation to save both to the local storage
  • Lesson 18 – Android Widget (14 mins)
    • Implementation of the weather android widget
    • This widget will show the current weather for the first selected city
  • Lesson 19 – The settings screen (7 mins)
    • Creation of the settings screen
    • It contains the settings of the temperature unit and the light/dark mode
  • Lesson 20 – SharedPreferences (5 mins)
    • Store the selected settings values
    • When we open the app, then this values will be used as settings
  • Lesson 21 – Dark mode (5 mins)
    • Add light / dark mode handling
    • Add the colors and icons for the dark mode
  • EXTRA – Splash screen (9 mins)
    • Nice clearing weather animation with
    • MotionLayout
  • EXTRA – App icon (3 mins)
    • Change the default application icon
  • EXTRA – Handle network state (5 min)
    • Implement a notification bar for every screen
    • Implementation of network state listener and observer

Pre requirements

This course assume that you are familiar with the MVVM design pattern and with web API requests using Retrofit.

In the app, for offline caching, we are going to store locally the data. For thet reason, we gonna use the Room persistent library.

In this app we are going to have 4 screens. To navigate between them, we are going to use the Navigation Component library.

Finally one more Jetpack library, which is Data Binding. We are going to use this library to link the UI elements to the Kotlin code and to create some cool BindingAdapters as well, which will help to show the data on the UI.

So, if you are new or never used them, then please check out below our tutorials.


This app will follow the MVVM desing pattern. It means, thet the UI layer and the data layer will be separeted from each other following the SOLID principles.

As we have talked about, our app will have a 4 fragments, which will show the data for the user and there the user can search for the cities and change the settings.

Next is the ViewModel, where we are going to store the data from the local cache. Also in these classes we gonna implement the business logic as well.

Then the third layer is the repository layer, which is responsible to get and store the data directly.

If you would like to know more about this design pattern from Android point of view, then check out he official documentation.

Guide to app architecture


Used to get the remote data using the OpenWeatherMap API.

For Retrofit you can find our basics tutorial below.

Retrofit basics


To store the remote data locally, we are going to use the Room persistent library, which is part of the Jetpack Android Architecture Components.

The basics tutorial is available under the link.


Navigation Component

For the fragment navigation we are going to use the Jetpack Navigation Component library.

For this check out our basics tutorial as well.

Navigation Component

Data Binding

Finally, check out our basic Data Binding tutorial, if you need it.

Data Binding

Source Code

During the whole course the source code will be available at the end of the courses. So, if you will be stucked, then you can check the final source code of the chapters.


I hope the description of this course was understandable and clear. But, if you have still questions, then leave me comments below! 😉

See you in this course. Have fun and have a nice a day! 🙂

Follow and like us:

Click to rate this post!
[Total: 0 Average: 0]

2 thoughts on “WeatherApp + Widget”

  1. Hi, I have a question regarding lesson 5 on this course. When I try to implement the error function in the BaseDataSource class i get a red underlined error with the following message

    “No value passed for parameter ‘data'”

    Now i’ve “fixed” it for now by removing the data parameter from this, and by extension the error fun in the Resource object – but I get the feeling this will bite me down the line. Would like to get your thoughts

    • Hi,

      you don’t have to implement anything in the BaseDataSource.class, because it is an abstract class.
      You will use it in the lesson 5 as an implementation in the WeatherRepositoryImpl.class.

      The error method in the BaseDataSource.class is a private method, so it is used only this class.
      This is the body of this method:
      return Resource.error(“Network call has failed for a following reason: $message”)

      I hope I could help you.

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications