Creating Simple Weather App UI using Jetpack Compose

What we want to achieve in this tutorial:

  • Overview about Jetpack Compose
  • Installed latest version of Android Studio Arctic Fox
  • Emulator / Physical Device
  • Setting up Font
  • Setting up Theme
  • Building the target 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:

Setting up Theme

  1. Replace the ui>theme>Color.kt content into:
val Black400 = Color(0xFF3A3A3A)
val Black700 = Color(0xFF0F0F14)

Building the Design

Planned UI

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

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

  • 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
)
}

III. Middle

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

  • 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.

V. Adding created screen in MainActivity

  1. In onCreate method, add this line:
setContent {
WeatherAppTheme { //this depends on your app's theme name
WeatherApp()
}
}
@Composable
fun WeatherApp() {
WeatherScreen()
}

VI. Creating Dummy Data

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

Android Developer | Newbie