Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevFest Uyo—Jetpack compose: Game changer for building Modern Android UI
Search
Love
November 13, 2021
Programming
0
85
DevFest Uyo—Jetpack compose: Game changer for building Modern Android UI
Love
November 13, 2021
Tweet
Share
More Decks by Love
See All by Love
Code Surgery: Refactoring for a Healthy App
lamouresparus
0
6
Information gathering
lamouresparus
0
11
Code Surgery: Refactoring for a Healthy App
lamouresparus
0
16
Managing Technical Writing Projects
lamouresparus
0
25
DEVFEST BANJUL 2023: "Relay: The Future of Design to Code Workflows"
lamouresparus
0
43
WTM Aba Breakfast: Tech Career: Reaching Goals and Gaining Experiences
lamouresparus
0
16
DevFest Aba: 'Much Ado with Compose Multiplatform'
lamouresparus
0
20
Building Apps with Java and Kotlin: Learn2Earn Special Session
lamouresparus
0
21
Relay: The future of design-to-code workflows
lamouresparus
0
66
Other Decks in Programming
See All in Programming
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
100
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
640
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
140
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
110
Criando a Woovi em uma semana
daniloab
0
120
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
120
WebGLで始める コンピュータグラフィックス入門
heller77
0
390
Implementing Design Systems in Swift
seyfoyun
2
530
An adventure of Happy Eyeballs
coe401_
1
210
TypeScriptから始める VR生活
tamagokakeg
2
120
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
4.6k
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
260
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
15
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Facilitating Awesome Meetings
lara
43
5.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Embracing the Ebb and Flow
colly
80
4.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
How GitHub (no longer) Works
holman
305
140k
Code Reviewing Like a Champion
maltzj
515
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Ruby is Unlike a Banana
tanoku
96
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Transcript
Jetpack Compose: Game changer for building Modern Android UI Love
Sparus O’tudor Android Engineer, FrontendLabs Uyo
What is Jetpack Compose? Holla Jetty Packy😊
Jetpack Compose is a modern declarative UI Toolkit to simplify
and accelerate native Android UI development.
What ever happened to our famous XML?🤔
Different Languages 30+ thousands lines of code Cognitive Overhead Multiple
Files Deprecated Code Boilerplate Codes Multiple layers of inheritance Problems with the Traditional View System
UI logic and definition are completely Separate Uses XML Satic
Layout Definition Kotlin/Java Dynamic Logic & Behaviour Completely Separate Generates a lot of boilerplate codes
A Quick Look at Jetpack Compose
Jetpack Compose favours Composition over Inheritance is a Human has
a Composition Inheritance
Declarative UI Focus on the “WHAT” and not the “HOW”
Jetpack Compose is a function of State Anytime the “state“
changes the “compose UI” changes also.
@Preview @Composable setContent{} Compose Preview Material Theme
Composable Functions • Annotated with @Composable • @Composable informs the
compiler that the function is intended to convert data into UI. • Can accept parameters • Returns nothing
Composable Functions
“Composable functions can only be called in the context of
another compose function...”
setContent{} • The setContent block defines the activity's layout where
we call composable functions. • The content becomes the root view of the activity. • More like setContentView() in XML.
setContent{}
Material Theme • An implementation of Material Design. • Define
the applications theme with its respective colors, shapes, font, etc. • Can be customized. • Mostly the root element of the screen.
Material Theme
Modifier • An ordered, immutable collection of modifier elements that
decorate or add behavior to Compose UI elements. • Modifiers can be chained. • Their chaining order is important.
Modifier
Layouts Column Row Box Constraint Layout
Column
Row
Box
Say Goodbye to RecyclerView Welcome LazyRow and LazyColumn 🤩
Managing Lists In Compose • Compose makes it easy to
create lists. • These composables render only the elements that are visible on screen.
LazyRow A LazyRow is a horizontally scrolling list that only
composes and lays out the currently visible items.
LazyColumn A LazyColumn is a vertically scrolling list.
LazyVerticalGrid • A LazyColumn is a vertically scrolling grid. •
It accepts the number of grid items in one row or the minimum width of one item. • Unstable API.
LazyVerticalGrid
More Components • Button • Image • Icons, etc.
Ready to take a deep dive?
Additional Resources • Jetpack Compose Tutorial on developer.android • Jetpack
Compose basics Codelab • Under the hood of Jetpack Compose • Get started with Jetpack Compose • Jetpack Compose basics | Workshop
Questions?
Thank You!