Creating Simple Weather App UI using Jetpack Compose

What we want to achieve in this tutorial:

What you will need:

• Basic knowledge of Android Development using Kotlin
• Overview about Jetpack Compose
• Installed latest version of Android Studio Arctic Fox
• Emulator / Physical Device

Tutorial Content:

• Importing Resources
• Setting up Font
• Setting up Theme
• Building the target design

Note: We will use the design of Amjad in his Dribbble post: https://dribbble.com/shots/15162632-Weather-app and tweak some of its elements. This is for tutorial purposes only. The weather-related assets belong to Piqo: https://dribbble.com/Piqodesign . Follow/contact them for this awesome design!

Getting Started

1. Create a new Empty Compose Project using Android Studio Preview
2. Wait until the Gradle finished syncing
3. While waiting, you can download the needed resources: Weather App Resources

Importing Resources

1. Copy the folders inside the drawable directory
2. Paste it to the res folder
3. Do it also with font folder
4. Your res should look like this

Setting up Font

1. Go to the folder ui > theme > Type.kt (or you can also double-tap the shift key then search for Type.kt)
2. Then write this code:

• Here, we just override the styles of Typography and be reused across the screen(s).

Setting up Theme

1. Replace the ui>theme>Color.kt content into:

val Black400 = Color(0xFF3A3A3A)
val Black700 = Color(0xFF0F0F14)

2. Replace the ui>theme>Theme.kt dark and light palette into:

• Here, we redefined the colors of dark and light color palette so it will be responsive accordingly depending on the device’s theme mode.

Building the Design

Planned UI

• Our plan here is to divide the UI into 3 parts, let’s call it the top, middle, and bottom part.

I. Creating the Surface

1. Create a new package inside the ui folder and name it screens
2. Create a new empty Kotlin file named WeatherScreen.kt inside the screens package
3. Then let’s create a surface inside the WeatherScreen.kt

• Imagine a blank paper, that’s what a surface is.

II. Top (͠≖ ͜ʖ͠≖)👌

Note: At this block of code, never mind for now the undeclared class Weather() and its constructors.

• Line 3 — to check whether the device’s theme selected is Light mode or not
• Line 4 — we used Column to place the item vertically (from top to bottom) inside the parent surface.
• Line 5 — we used modifier’s fillMaxSize to fill the max-width and height of the screen and add some padding
• Line 9 — inside the column, we declared Text (this is like the TextView in XML’s UI Element) for the date
• Line 13— Spacer provides a space between the UI component. This is an alternative for declaring padding inside the UI component’s modifier.
• Line 14 — we declared Row to handle the horizontal alignment of the location icon and text
• Line 15 — ReusableImage is a custom helper to create this, you can add this code below the WeatherMain() function or to a separate file (recommended) by creating a new package: ui>components>ReusableComponents.kt
• Line 16 to 20 — means if the theme is in light mode, we will use the ic_location_light otherwise ic_location_dark

@Composable
fun ReusableImage(image: Int, contentScale: ContentScale, contentDesc: String, modifier: Modifier) {
    val paintImage: Painter = painterResource(id = image)
    Image(
        painter = paintImage,
        contentDescription = contentDesc,
        contentScale = contentScale,
        modifier = modifier
    )
}

• This will help our code cleaner and lessen the boilerplate code.

III. Middle

In this layout, we have a background image, an icon, and text on top of it.

Just below the Row’s declaration, add this block of code

• Line 3 — we used Box to put one element on the top of another
• Line 47 — You can use the Modifier.offset if you want to force adjust the distance on y or x axis.
• Line 64 — We will call DailyWeatherList() in this line

IV. Bottom ;)

In this part, we need to create a horizontally scrollable layout. To do this we need to create the layout of the item we want to populate.

Below the function WeatherMain(), add this method:

• Line 3 — here we used Card as our item’s container to make it elevate a little bit, it works the same with XML’s Card UI element.

Now, we created the item’s layout. Next is to populate it horizontally.

Add this code above the DailyWeatherItem() method

• Then add the DailyWeatherList(){} in the TODO part of section III

V. Adding created screen in MainActivity

1. In onCreate method, add this line:

setContent {
    WeatherAppTheme { //this depends on your app's theme name
        WeatherApp()
    }
}

2. Below the onCreate method, add this line:

@Composable
fun WeatherApp() {
    WeatherScreen()
}

VI. Creating Dummy Data

1. Create a new Kotlin file named Weather.kt outside ui’s package

Note: We used the design of Amjad in his Dribbble post: https://dribbble.com/shots/15162632-Weather-app and tweak some of its elements. This is for tutorial purposes only. The weather-related drawable assets belong to Piqo: https://dribbble.com/Piqodesign . Follow/contact them for this awesome design!

I do not own any of the assets/resources provided.

If you followed this tutorial until the end, thank you so much! I hope you learned something awesome. I am still learning, so if you have any suggestions or opinions, please let me know so I can improve my work. Thanks ✨

Follow me on Twitter: @mjmanaog