Simple Weather App In Jetpack Compose in Android

Building a Simple Weather App in Jetpack Compose

In this tutorial, we will create a simple weather app using Jetpack Compose where data is dynamically updated. The app will display a list of cities and their temperatures. The background color of the city card will change based on the temperature. When a user enters a city name and hits "add," the app will automatically generate a temperature and display the corresponding card color. So, let's get started with the development!

Watch the Video Tutorial

If you prefer a step-by-step walkthrough, watch the video tutorial below:

Project Setup

Open Android Studio and create a new project. Choose "Empty Compose Activity" and click Next. Name the app Weather App. Leave the default values for the rest and hit Finish.

After the project is created, you’ll see some default Jetpack Compose code. Let’s start by understanding its structure.

Jetpack Compose Project Structure

In Jetpack Compose, the UI is built using composable functions. These are annotated with @Composable, and they are the building blocks of your app's UI. The preview function, annotated with @Preview, allows you to see the UI without running the app.

Here’s the default Greeting function and the preview in your project:

@Composable
fun Greeting(name: String) {
    Text(text = "Hello \$name")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Greeting("A")
}

After building the project, you'll see the preview showing "Hello A." Now, let’s build a simple weather app that displays a list of cities with their temperatures.

Creating the Weather App UI

First, remove the default Greeting function and the preview. We'll start with a blank project. The weather app will display a list of cities, and each city card will show its temperature. Here’s how you can build the UI.

1. Creating City Weather Item

Let's create a composable function named CityWeatherItem that will display a city's name and temperature.

@Composable
fun CityWeatherItem(cityName: String, temperature: Int) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(8.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = cityName) Text (text = "\$temperature°")
    }
}

@Preview(showBackground = true)
@Composable
fun CityWeatherItemPreview() {
    CityWeatherItem("Paris", 10)
}
 

Here’s what we did:

• We created a row that contains two text elements: the city name and its temperature.
• fillMaxWidth() makes the row take up the full width of the screen.
• Arrangement.SpaceBetween ensures the city name and temperature are aligned on the left and right.

2. Adding Styling and Background

Now, let’s add a background color and padding to make the UI more appealing:

 @Composable
fun CityWeatherItem(cityName: String, temperature: Int) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(8.dp).background(Color.White),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = cityName) Text (text = "\$temperature°")
    }
}
 

3. Creating a List of Cities

Next, we’ll create a list of cities with their respective temperatures. For this, we’ll use LazyColumn, which is a composable that displays a vertically scrolling list.

@Composable
fun CityWeatherList(cityWeathers: List) {
    LazyColumn {
        items(cityWeathers) { cityWeather ->
            CityWeatherItem(cityWeather.city, cityWeather.temperature)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CityWeatherListPreview() {
    val cityWeathers =
        listOf(CityWeather("Paris", 10), CityWeather("London", 15)) CityWeatherList (cityWeathers)
}

data class CityWeather(val city: String, val temperature: Int)

In this code:

• We created a CityWeather data class to hold the city name and temperature.
• The CityWeatherList composable function takes a list of CityWeather items and displays them using a LazyColumn.

Dynamic City Input

To make the app more interactive, you can allow users to add cities dynamically. When a user adds a city, its temperature will be randomly generated, and the card will be updated with the new data. We’ll implement this functionality next.