Building a Weather App with Kotlin and OpenWeatherMap API

⋅ 10 min read ⋅ Kotlin

This tutorial will guide you through the process of building a weather app using Kotlin and the OpenWeatherMap API. We will cover everything from setting up the project to displaying weather information and adding additional features. By the end of this tutorial, you will have a fully functional weather app that can fetch and display weather data based on user input.

building weather app kotlin openweathermap api

Introduction

What is a Weather App?

A weather app is a mobile or web application that provides users with real-time weather information for a specific location. Users can input their desired location and the app will fetch the latest weather data from a weather API and display it in a user-friendly format. Weather apps are popular among users who want to stay updated on current weather conditions, plan outdoor activities, or simply stay informed about the weather.

Why Kotlin for Weather App Development?

Kotlin is a modern programming language that is fully compatible with Java and has gained popularity among Android developers. It offers many advantages over Java, such as concise syntax, null safety, and improved readability. Kotlin also has excellent support for asynchronous programming, which is essential when making API requests and handling network responses in a weather app. Additionally, Kotlin's interoperability with Java allows developers to leverage existing Java libraries and frameworks, making it an ideal choice for building weather apps.

Setting Up the Project

Creating a New Kotlin Project

To start building our weather app, we need to create a new Kotlin project in an Integrated Development Environment (IDE) such as Android Studio. Follow these steps to set up a new project:

  1. Open Android Studio and click on "Create New Project".
  2. Select "Kotlin" as the programming language and choose a project template that suits your needs (e.g., Empty Activity).
  3. Fill in the project details, such as the name, package name, and project location.
  4. Click "Finish" to create the project.

Adding Dependencies

Next, we need to add the necessary dependencies to our project. These dependencies will allow us to make API requests, parse JSON responses, and handle errors. Add the following dependencies to your project's build.gradle file:

dependencies {
    implementation 'com.squareup.okhttp3:okhttp:4.9.0'
    implementation 'com.squareup.okhttp3:logging-interceptor:4.9.0'
    implementation 'com.squareup.moshi:moshi:1.12.0'
}

The first dependency, okhttp, is a popular HTTP client that will be used to make API requests. The logging-interceptor dependency is an okhttp interceptor that logs HTTP requests and responses, which can be useful for debugging purposes. The moshi dependency is a JSON parsing library that will be used to parse the JSON responses from the OpenWeatherMap API.

Obtaining an API Key

To fetch weather data, we will be using the OpenWeatherMap API. However, before we can make requests to this API, we need to obtain an API key. Follow these steps to obtain an API key:

  1. Go to the OpenWeatherMap website (https://openweathermap.org/) and sign up for a free account.
  2. Once you have signed up and logged in, navigate to the API Keys section in your account settings.
  3. Generate a new API key by clicking on the "Generate" button. Copy the generated API key.

Now that we have set up our project and obtained an API key, we can proceed to design the user interface of our weather app.

Designing the User Interface

Creating Layout Files

The first step in designing the user interface of our weather app is to create the necessary layout files. In Android Studio, navigate to the "res" directory and create a new directory called "layout" if it doesn't already exist. Inside the "layout" directory, create a new XML file called "activity_main.xml". This file will define the layout of the main activity of our app.

Add the following code to the "activity_main.xml" file:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/locationEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter location"/>

    <Button
        android:id="@+id/fetchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fetch Weather"/>

    <TextView
        android:id="@+id/weatherTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"/>

</LinearLayout>

This layout consists of a vertical LinearLayout that contains an EditText for the user to input the desired location, a Button to fetch the weather data, and a TextView to display the weather information.

Implementing UI Components

Now that we have defined the layout of our main activity, we need to implement the UI components in our MainActivity.kt file. Open the MainActivity.kt file and add the following code:

class MainActivity : AppCompatActivity() {

    private lateinit var locationEditText: EditText
    private lateinit var fetchButton: Button
    private lateinit var weatherTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        locationEditText = findViewById(R.id.locationEditText)
        fetchButton = findViewById(R.id.fetchButton)
        weatherTextView = findViewById(R.id.weatherTextView)

        fetchButton.setOnClickListener {
            val location = locationEditText.text.toString()
            fetchWeatherData(location)
        }
    }

    private fun fetchWeatherData(location: String) {
        // TODO: Implement API request to fetch weather data
    }
}

In this code snippet, we initialize the UI components in the onCreate() method by finding their corresponding views using findViewById(). We also set an onClickListener on the fetchButton that gets the location input from the locationEditText and calls the fetchWeatherData() method. The fetchWeatherData() method is currently empty and will be implemented in the next section.

Handling User Input

To handle user input and fetch weather data based on the entered location, we need to make API requests to the OpenWeatherMap API. We will use the okhttp library to make these requests. Add the following code to the fetchWeatherData() method in MainActivity.kt:

private fun fetchWeatherData(location: String) {
    val apiKey = "YOUR_API_KEY"
    val url = "https://api.openweathermap.org/data/2.5/weather?q=$location&appid=$apiKey"

    val request = Request.Builder()
        .url(url)
        .build()

    val client = OkHttpClient()

    client.newCall(request).enqueue(object : Callback {
        override fun onFailure(call: Call, e: IOException) {
            // Handle network errors
        }

        override fun onResponse(call: Call, response: Response) {
            val json = response.body?.string()
            if (response.isSuccessful && json != null) {
                val weather = parseWeatherJson(json)
                runOnUiThread {
                    updateWeatherUI(weather)
                }
            } else {
                // Handle API errors
            }
        }
    })
}

private fun parseWeatherJson(json: String): Weather {
    // TODO: Implement JSON parsing logic
}

private fun updateWeatherUI(weather: Weather) {
    // TODO: Update the weatherTextView with the weather information
}

In this code snippet, we construct the API request URL by concatenating the location input and the API key. We then create a new Request object using the okhttp library. The client.newCall(request).enqueue() method executes the API request asynchronously and provides callbacks for handling the response. In the onResponse() callback, we parse the JSON response using the parseWeatherJson() method and update the UI using the updateWeatherUI() method. We also handle network errors in the onFailure() callback and API errors in the else block.

Fetching Weather Data

Making API Requests

To make API requests in our weather app, we will be using the okhttp library. We have already set up the initial API request in the fetchWeatherData() method. Now, let's implement the JSON parsing logic and update the UI with the weather information.

Parsing JSON Responses

To parse the JSON response from the OpenWeatherMap API, we will use the moshi library. Add the following code to the parseWeatherJson() method in MainActivity.kt:

private fun parseWeatherJson(json: String): Weather {
    val moshi = Moshi.Builder().build()
    val adapter = moshi.adapter(Weather::class.java)
    return adapter.fromJson(json) ?: throw JsonDataException("Invalid JSON format")
}

In this code snippet, we create a new Moshi object and an adapter for the Weather class. We then use the adapter.fromJson() method to parse the JSON string into a Weather object. If the JSON format is invalid, an exception will be thrown.

Handling Errors

In the fetchWeatherData() method, we handle network errors in the onFailure() callback. We can also handle API errors by checking the response code and displaying appropriate error messages to the user. Add the following code to the onFailure() callback in MainActivity.kt:

override fun onFailure(call: Call, e: IOException) {
    runOnUiThread {
        Toast.makeText(this@MainActivity, "Network error occurred", Toast.LENGTH_SHORT).show()
    }
}

In this code snippet, we use the runOnUiThread() method to display a Toast message indicating a network error occurred.

Displaying Weather Information

Creating Weather Models

To represent the weather data fetched from the API, we need to create a Weather data class. Add the following code to a new file called Weather.kt:

data class Weather(
    val temperature: Double,
    val humidity: Int,
    val description: String,
    val icon: String
)

This data class represents the temperature, humidity, description, and icon of the weather.

Updating UI with Weather Data

Now that we have parsed the JSON response and obtained a Weather object, we can update the UI with the weather information. Add the following code to the updateWeatherUI() method in MainActivity.kt:

private fun updateWeatherUI(weather: Weather) {
    val temperatureText = getString(R.string.temperature, weather.temperature)
    val humidityText = getString(R.string.humidity, weather.humidity)
    val descriptionText = getString(R.string.description, weather.description)
    val iconUrl = "https://openweathermap.org/img/w/${weather.icon}.png"

    weatherTextView.text = "$temperatureText\n$humidityText\n$descriptionText"

    // TODO: Load the weather icon from the iconUrl and display it in the UI
}

In this code snippet, we format the temperature and humidity values using string resources and concatenate them with the weather description. We also construct the URL for the weather icon and assign the formatted weather information to the weatherTextView.

Adding Icons and Graphics

To load the weather icon from the iconUrl and display it in the UI, we can use the Glide library. Add the following code to the updateWeatherUI() method in MainActivity.kt:

private fun updateWeatherUI(weather: Weather) {
    // ...

    Glide.with(this)
        .load(iconUrl)
        .into(weatherImageView)
}

In this code snippet, we use the Glide library to load the weather icon from the iconUrl and display it in an ImageView with the id weatherImageView. Make sure to add the ImageView to your layout file and assign it the appropriate id.

Adding Additional Features

Implementing Location Services

To enhance our weather app, we can implement location services to automatically fetch weather data for the user's current location. This can be achieved using the Android Location API. However, implementing location services is beyond the scope of this tutorial. You can refer to the official Android documentation for more information on how to implement location services in your weather app.

Adding Forecasting

To provide users with weather forecasts, we can extend our app to fetch and display forecast data from the OpenWeatherMap API. This can be done by making additional API requests and parsing the JSON responses. You can create a separate Forecast data class and modify the UI to display forecast information alongside the current weather.

Customizing the App

To make your weather app stand out, you can customize the UI by adding additional features such as themes, animations, and interactive elements. You can also integrate other APIs or services, such as a map API to display weather conditions on a map or a notification service to send weather alerts to users.

Conclusion

In this tutorial, we learned how to build a weather app using Kotlin and the OpenWeatherMap API. We covered everything from setting up the project to displaying weather information and adding additional features. By following this tutorial, you should now have a solid foundation for building your own weather app. Remember to experiment, iterate, and continuously improve your app to provide the best user experience. Happy coding!

KotlinAndroid DevelopmentWeather AppOpenWeatherMap API
About Us

Devbrite is the best resource for high-quality curated articles on tech, programming, career growth, and FAANG insights. Our mission at Devbrite is to provide developers with the best kept secrets of the tech industry. Whether you are a complete beginner looking to learn how to code, or you are already a seasoned developer with many years of experience, we provide you with tutorials, career advice, compensation data, and many more.

Discuss topics such as tech stacks, programming languages, compensation, companies, career paths, and more. Create your own developer profile that's easily shareable, or read tutorials or discussions about the topics you are interested in.

Devbrite
Find us on
Resources

Devbrite © 2024. All rights reserved.