Build a MVI Weather App Project with Jetpack Compose, Kotlin, UDF in Android Studio - Part 3
Complete end to end tutorial for production-ready weather app for Android using Jetpack Compose and Kotlin.
🎨 UI Components Covered:
MoonPhaseViewCompose - Custom moon phase renderer using Jetpack compose canvas
SunMoonViewCompose - Arc-based sun path visualization
AnimatedProgressIndicator - Smooth percentage animations
PercentageColumn - Vertical bar charts with color interpolation
WindDirectionItem - Rotating compass indicators using graphic layer
🏗️ Architecture & Best Practices:
Clean Architecture with UseCase layer
Repository pattern for data management
Domain to UI model mapping
Unidirectional data flow (MVI pattern)
Kotlin coroutines and Flow
Error handling and loading states
Extension functions for cleaner code
Composable best practices and performance optimization
💻 Technical Highlights:
Canvas API for custom graphics (drawArc, drawCircle, drawLine)
BlendMode and saveLayer for shadow effects
GraphicsLayer transformations for rotations
AnimatedState APIs (animateDpAsState, animateFloatAsState, animateIntAsState)
Spring animations with custom damping and stiffness
Color lerp for gradient transitions
Custom layout modifiers (ignoreHorizontalParentPadding)
Material 3 theming and color schemes
Grid layouts with custom spanning
Lottie animations for loading and error states
------------------------------
CHAPTERS
0:00 Start
0:19 Introduction
0:57 Update Dagger Module
2:29 Update DTO classes
4:58 Create extension mappers
7:15 Update Repository
8:50 Update model & usecase
10:30 Ui kit Module
12:04 Current weather model
14:56 Current weather mapper
18:16 MVI contract & Viewmodel
20:24 Arc progress component
22:10 Error screen component
23:21 Generic Info card component
24:54 Moon Phase component
29:09 Sun Rise component
35:01 Hero section
37:26 Hourly weather section
39:32 Moon phase item
40:42 Rain chance item
41:43 Weather details item
46:00 Current weather screen
48:02 Weekly weather MVI contract
48:57 Weekly UI model
50:05 Mapper domain to UI
52:13 Weekly weather view model
53:28 Percentage column view
54:33 Rain Item
55:48 Wind direction and speed item
56:54 Climate detail card
58:29 Rain chart card
59:23 Weather selectable card
01:00:58 Wind speed card
01:01:58 Future forecast screen
01:04:00 Home screen bottom navigation
01:05:26 Update destination
01:07:28 End
------------------------------
Source code: https://buymeacoffee.com/coroutinelab...
Buy me a coffee - https://buymeacoffee.com/coroutinelab
#JetpackCompose #AndroidDevelopment #Kotlin #WeatherApp #AndroidStudio #MVVM #CleanArchitecture #MaterialDesign #CustomUI #AndroidTutorial #ComposeTutorial #MobileDevelopment #AndroidUI #KotlinProgramming #ComposeCanvas #coding #tutorialyoutube
Music from #Uppbeat (free for Creators!):
https://uppbeat.io/t/swoop/success
License code: CKTGT1QGUS07RXHC
Get vidIQ to grow your channel faster! 🚀
https://vidiq.com/CoroutineLab