In the world of Android development, creating practical applications is the best way to hone your skills. Today, we’ll walk you through building a weather app using Kotlin, a modern, concise, and safe programming language. By the end of this tutorial, you’ll have a functional weather app that fetches real-time weather data from an API and displays it in a user-friendly interface.
Setting Up the Environment
Before we dive into coding, let's set up our development environment.
- Install Android Studio: Download and install the latest version of Android Studio from the official website.
- Create a New Project:
- Open Android Studio.
- Select "Start a new Android Studio project."
- Choose "Empty Activity" and click "Next."
- Name your project (e.g., WeatherApp) and set the language to Kotlin.
- Click "Finish" to create the project.
- Set Up an Emulator: You can use an Android emulator or a physical device for testing. To set up an emulator, go to AVD Manager in Android Studio and create a virtual device.
Designing the UI
Next, we’ll design the user interface using XML.
- Open
activity_main.xml
:- In the
res/layout
folder, openactivity_main.xml
.
- In the
- Add UI Components:
xmlCopy code
-
Fetching Weather Data
To fetch weather data, we’ll use the OpenWeatherMap API and Retrofit for network requests.
-
Add Dependencies: Open
build.gradle (Module: app)
and add the following dependencies:Copy code
implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
Sync your project to download the dependencies.
-
Create API Interface:
Copy code
interface WeatherApiService { @GET("weather") fun getWeather(@Query("q") cityName: String, @Query("appid") apiKey: String): Call }
-
Data Classes for JSON Response:
Copy code
data class WeatherResponse( val main: Main ) data class Main( val temp: Float )
-
Make Network Request:
Copy code
val retrofit = Retrofit.Builder() .baseUrl("https://api.openweathermap.org/data/2.5/") .addConverterFactory(GsonConverterFactory.create()) .build() val service = retrofit.create(WeatherApiService::class.java)
Displaying Data
- Fetch and Display Weather Data:
Copy code
class MainActivity : AppCompatActivity() { private lateinit var tvCityName: TextView private lateinit var tvTemperature: TextView private lateinit var btnFetchWeather: Button override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) tvCityName = findViewById(R.id.tvCityName) tvTemperature = findViewById(R.id.tvTemperature) btnFetchWeather = findViewById(R.id.btnFetchWeather) btnFetchWeather.setOnClickListener { fetchWeatherData("London") } } private fun fetchWeatherData(cityName: String) { val apiKey = "YOUR_API_KEY" val call = service.getWeather(cityName, apiKey) call.enqueue(object : Callback { override fun onResponse(call: Call, response: Response) { if (response.isSuccessful) { val weatherResponse = response.body() tvTemperature.text = "${weatherResponse?.main?.temp} °C" } } override fun onFailure(call: Call, t: Throwable) { // Handle error } }) } }
Conclusion
Congratulations! You’ve built a functional weather app using Kotlin. This project not only demonstrates how to work with APIs and display data in Android but also helps you understand the basics of Retrofit and JSON parsing. We encourage you to expand on this project by adding features like a search function for different cities or a detailed weather forecast.