Creating Simple Weather App UI using Jetpack Compose

What we want to achieve in this tutorial:

What you will need:

Tutorial Content:

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

Importing Resources

Setting up Font

Setting up Theme

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

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

Building the Design

Planned UI

I. Creating the Surface

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

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

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

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

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:

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

Add this code above the DailyWeatherItem() method

V. Adding created screen in MainActivity

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

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

Android Developer | Newbie